记一次vue中使用echart柱状图

最新推荐文章于 2024-09-23 02:31:39 发布

weixin_41655541

最新推荐文章于 2024-09-23 02:31:39 发布

阅读量803

点赞数

分类专栏：插件

本文链接：https://blog.csdn.net/weixin_41655541/article/details/103527786

版权

插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 let myChart = this.$echarts.init(document.getElementById('myChart'));
            let option = {
                color: ['#FFCD86'],//柱子颜色
                backgroundColor: ['#fff'],//背景色
                title: {
                    text: ''
                },
                tooltip: {},
                legend: {
                    data: ['总订单量'],
                },
                xAxis: [{
                    type: 'category',
                    data: ['10.1-10.7', '10.7-10.14', '10.14-10.21', '10.21-10.28', '10.28-11.5', '11.5-11.12', '11.12-11.19', '11.19-11.26'],
                    axisLabel: {
                        interval: 0,//横轴信息全部显示  
                        // rotate: -5,//-15度角倾斜显示  
                    },
                }],
                yAxis: {
                },
                series: [{
                    name: '总订单量',
                    type: 'bar',
                    data: [50, 120, 180, 80, 200, 110, 130, 50],
                    barWidth: 30,//柱图宽度
                }]
            };
            myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。
            //点击图例默认是把柱状图隐藏了，此段代码就是为了点击图例展示柱状图
            myChart.on('legendselectchanged', function (params) {
                let option = this.getOption();
                let select_key = Object.keys(params.selected);
                if (!params.selected[params.name]) {
                    select_key.map(res => {
                        option.legend[0].selected[res] = !params.selected[res];
                    });
                } else {
                    select_key.map(res => {
                        option.legend[0].selected[res] = false;
                    });
                    option.legend[0].selected[params.name] = true;
                }
                this.setOption(option);
            });