前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Echarts柱状图每根柱子设置不同柱子颜色

Echarts柱状图每根柱子设置不同柱子颜色

作者头像
李维亮
发布2021-07-08 10:11:52
1.5K0
发布2021-07-08 10:11:52
举报
文章被收录于专栏:李维亮的博客
echartColor.png
echartColor.png
代码语言:javascript
复制
   <template>
        <div>
            <!-- 承载图表的div -->
            <div id="main" style="width: 100%;height:400px;"></div>
        </div>
    </template>

    <script>
    export default {
        name: "Bar",
        data() {
            return {};
        },
        mounted() {
            this.drawBar();
        },
        methods: {
            drawBar: function() {
                // 基于准备好的dom,初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("main"));
                let option = {
                    //标题配置信息
                    title: {
                        text: "这个是主标题",
                        textStyle: {
                            color: "#B03A5B",
                            fontWeight: "bolder"
                        },
                        subtext: "这个是副标题",
                        subtextStyle: {
                            color: "#1AAC1A",
                            fontWeight: "bolder"
                        },
                        left: "center"
                    },
                    xAxis: {
                        type: "category",
                        data: [
                            "Mon",
                            "Tue",
                            "Wed",
                            "Thu",
                            "Fri",
                            "Sat",
                            "Sun",
                            "Mon1",
                            "Tue1",
                            "Wed1",
                            "Thu1",
                            "Fri1",
                            "Sat1",
                            "Sun1"
                        ],
                        itemStyle: {
                            narmal: {
                                color: "orange"
                            }
                        }
                    },
                    yAxis: {
                        type: "value"
                    },
                    series: [
                        {
                            data: [
                                120,
                                200,
                                150,
                                80,
                                70,
                                110,
                                130,
                                80,
                                90,
                                55,
                                100,
                                88,
                                20,
                                130
                            ],
                            type: "bar",
                            barWidth: "70%",
                            itemStyle: {
                                normal: {
                                    //每根柱子颜色设置
                                    color: function(params) {
                                        let colorList = [
                                            "#c23531",
                                            "#2f4554",
                                            "#61a0a8",
                                            "#d48265",
                                            "#91c7ae",
                                            "#749f83",
                                            "#ca8622",
                                            "#bda29a",
                                            "#6e7074",
                                            "#546570",
                                            "#c4ccd3",
                                            "#4BABDE",
                                            "#FFDE76",
                                            "#E43C59",
                                            "#37A2DA"
                                        ];
                                        return colorList[params.dataIndex];
                                    }
                                }
                            },
                            //柱状图上显示数据
                            label: {
                                show: "true",
                                position: "top",
                                color: "#FFF",
                                fontWeight: "bolder",
                                backgroundColor: "auto",
                                fontSize: "20"
                            },
                            //平均值
                            markLine: {
                                data: [{ type: "average", name: "平均值" }]
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
    };
    </script>
    <style scoped>
    </style>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-09-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档