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

Love The Way You Lie 2023-07-10 15:35 28阅读 0赞

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200303150150113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw==,size_16,color_FFFFFF,t_70