echarts---多个柱子一组的柱状图 使用

在公司做项目的时候,直接用官网现成的模板,柱子显示不出来,可能与项目中的某些配置冲突了才导致的;根据其他的模板,修改之后,可以实现相同的效果:
在这里插入图片描述

<div id="myChart1" style="width: 1000px;height: 300px;margin: 0 auto"></div>
methods:{
	drawLine(){
                // 基于准备好的dom,初始化echarts实例
                let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
                // 绘制图表
                myChart1.setOption({
                    title: {
                        text: '损耗电量统计分析图',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['供电量(单位:kWh)', '售电量(单位:kWh)', '耗损电量(单位:kWh)']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '供电量(单位:kWh)',
                            type: 'bar',
                            data: [1258470.00, 1258470.00, 1573486.00, 1258412.00,1258465.00, 1258621.00, 1258841.00, 1258001.00,1258105.00,1254095.00,1258801.00,1258201.00,]
                        },
                        {
                            name: '售电量(单位:kWh)',
                            type: 'bar',
                            data: [1228470.00, 1248570.00, 1116511.20, 1228450.00,1228640.00, 1225470.00, 1222570.00,1228630.00,1220200.00,1266670.00,1228900.00,1228942.00]
                        },
                        {
                            name: '耗损电量(单位:kWh)',
                            type: 'bar',
                            data: [30000.00, 2900.00, 82000.05, 40000.30,20000.34, 90000.37, 23000.34,50000.30,24000.39,71000.34,60000.31,20000.32]
                        }
                    ]
                });
     }
}
发布了51 篇原创文章 · 获赞 8 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_44171757/article/details/104632787
今日推荐