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

String佳佳

已于 2023-04-24 17:45:11 修改

阅读量1.4w

点赞数 7

文章标签： echarts javascript ecmascript

于 2020-03-03 15:03:08 首次发布

本文链接：https://blog.csdn.net/weixin_44171757/article/details/104632787

版权

本文介绍了一种在使用ECharts时遇到的柱状图显示问题及解决方案。通过调整代码配置，成功实现了损耗电量统计分析图的绘制，包括供电量、售电量和耗损电量的数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<div id="myChart1" style="width: 1000px;height: 300px;margin: 0 auto"></div>


import * as echarts from 'echarts'

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]
                        }
                    ]
                });
     }
}