送一張我最近很喜歡的手機(jī)壁紙給大家

先來(lái)直接看下實(shí)現(xiàn)效果

截圖效果

上代碼

    <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() {
                // 基于準(zhǔn)備好的dom供搀，初始化echarts實(shí)例
                let myChart = this.$echarts.init(document.getElementById("main"));
                let option = {
                    //標(biāo)題配置信息
                    title: {
                        text: "這個(gè)是主標(biāo)題",
                        textStyle: {
                            color: "#B03A5B",
                            fontWeight: "bolder"
                        },
                        subtext: "這個(gè)是副標(biāo)題",
                        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: {
                                    //每根柱子顏色設(shè)置
                                    color: function(params) {
                                        let colorList = [
                                            "#c23531",
                                            "#2f4554",
                                            "#61a0a8",
                                            "#d48265",
                                            "#91c7ae",
                                            "#749f83",
                                            "#ca8622",
                                            "#bda29a",
                                            "#6e7074",
                                            "#546570",
                                            "#c4ccd3",
                                            "#4BABDE",
                                            "#FFDE76",
                                            "#E43C59",
                                            "#37A2DA"
                                        ];
                                        return colorList[params.dataIndex];
                                    }
                                }
                            },
                            //柱狀圖上顯示數(shù)據(jù)
                            label: {
                                show: "true",
                                position: "top",
                                color: "#FFF",
                                fontWeight: "bolder",
                                backgroundColor: "auto",
                                fontSize: "20"
                            },
                            //平均值
                            markLine: {
                                data: [{ type: "average", name: "平均值" }]
                            }
                        }
                    ]
                };
                // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
                myChart.setOption(option);
            }
        }
    };
    </script>
    <style scoped>
    </style>

代碼里有注釋滥搭，不明白或者有其他疑問(wèn)的小伙伴可以私信我哦

這里卿洋
愿喜??