上代码

    <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>

作者：神仙哥哥卿洋
链接：https://www.jianshu.com/p/2afc2b3627d7