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

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

<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]
                        }
                    ]
                });
     }
}
  • 7
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: 可以使用 echarts 的 dataset 组件来实现多个横坐标的柱子合并。 首先,需要将数据按照不同的横坐标分组,并将每组数据转换为一个二维数组。例如,假设有三个横坐标 A、B、C,对应的数据分别为 [1, 2, 3]、[4, 5, 6]、[7, 8, 9],则可以转换为以下格式: ```javascript { dimensions: ['x', 'y'], source: [ ['A', 1], ['A', 2], ['A', 3], ['B', 4], ['B', 5], ['B', 6], ['C', 7], ['C', 8], ['C', 9] ] } ``` 然后,在 echarts 的 option 中配置 dataset 组件和 series 组件。其中,dataset 组件需要指定数据源,并配置 dimensions 和 source;series 组件需要使用 dataset 中的数据,并设置 seriesLayoutBy 属性为 'column',表示按列排列。 下面是一个简单的示例代码: ```javascript option = { dataset: { dimensions: ['x', 'y'], source: [ ['A', 1], ['A', 2], ['A', 3], ['B', 4], ['B', 5], ['B', 6], ['C', 7], ['C', 8], ['C', 9] ] }, series: [{ type: 'bar', seriesLayoutBy: 'column', encode: { x: 'x', y: 'y' } }] }; ``` 这样就可以实现多个横坐标的柱子合并了。需要注意的是,如果多组数据之间的横坐标不一致,需要在 dataset 中使用 unionDimensions 属性来合并相同的维度。例如,如果有两组数据分别为 [A, B, C] 和 [B, C, D],则可以配置 unionDimensions: ['x'] 来合并横坐标为 B 和 C 的数据。 ### 回答2: 要实现echarts柱状图多个横坐标的柱子合并,可以通过设置柱状图的宽度和坐标轴的配置来实现。 首先,设置柱状图的宽度。可以通过设置series中的itemStyle属性,将barWidth属性设置为一个较小的数值来实现。该数值决定了每根柱子的宽度,可以根据实际需求进行调整。 其次,调整坐标轴的配置。对于多个横坐标的柱子合并,可以通过设置xAxis的type属性为"category",将多个横坐标作为一个数组赋值给xAxis的data属性。然后,设置xAxis的axisLabel属性中的interval属性来控制横坐标显示的间隔,以适应多个横坐标的显示需求。 例如,假设有两个横坐标:"A"和"B",可以将它们作为数组["A", "B"]赋值给xAxis的data属性,然后将xAxis的axisLabel的interval属性设置为0,即每个横坐标都显示。 最后,将以上配置应用到echarts的实例中,即可实现多个横坐标的柱子合并。 ### 回答3: 在Echarts柱状图中实现多个横坐标的柱子合并,可以通过使用Echarts中的堆叠柱状图(stack)属性来实现。 首先,需要在Echarts的配置中设置xAxis参数,其中的type属性设置为"category"表示横坐标类型为分类类型,而不是连续类型。 接下来,设置series参数,其中的type属性设置为"bar"表示图表类型为柱状图,而不是其他类型,同时设置stack属性为"合并名称",表示需要将此series下的柱子合并为一组。例如: ``` xAxis: { type: 'category', data: ['横坐标1', '横坐标2', '横坐标3'] }, series: [ { name: '柱子1', type: 'bar', stack: '合并名称', data: [100, 200, 300] }, { name: '柱子2', type: 'bar', stack: '合并名称', data: [150, 250, 350] } ] ``` 上述代码中,横坐标有三个分类,即"横坐标1"、"横坐标2"、"横坐标3"。设置了两个series,它们的stack属性均设置为"合并名称",表示需要将这两个series下的柱子进行合并。 这样配置后,在图表中就会显示出两个柱子组,并且横坐标相同的柱子会进行合并,形成一组数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值