echarts 修改柱形图形状新增柱形图堆叠效果

今天药忘吃喽~ 2022-12-05 00:51 203阅读 0赞

效果图  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]

### html部分 ###

### js部分 ###

柱形图堆叠需要用的的属性是 series 下面的 stack属性,只要给每组数据给一个相同的stack名称,都会堆叠都同一个柱子上面去  
每组数据的每一项都是不为零的效果图  
![每组数据都有值][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center 1]  
每组数据中其中一部分值为零的效果图  
![每组数据都有零数据][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center 2]  
主要实现代码如下

var myChart = echarts.init(document.getElementById('adrCharts'));
                var colors = ['#2D9CFF', '#92C0E9', '#135A9C', '#FFAE53'];
    
                var option = { 
                    color: colors,
    
                    tooltip: { 
                        trigger: 'axis',
                        axisPointer: { 
                            type: 'cross'
                        }
                    },
                    grid: { 
                        right: '20%'
                    },
                    toolbox: { 
                        feature: { 
                            dataView: { show: true, readOnly: false},
                            restore: { show: true},
                            saveAsImage: { show: true}
                        }
                    },
                    legend: { 
                        data: ['峰占比', '平占比',"平占比","谷占比"]
                    },
                    xAxis: [
                        { 
                            type: 'category',
                            axisTick: { 
                                alignWithLabel: true
                            },
                            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
                        }
                    ],
                    yAxis: [
                        { 
                            type: 'value',
                            name: '蒸发量',
                            min: 0,
                            axisLine: { 
                                lineStyle: { 
                                    color: colors[0]
                                }
                            },
                            axisLabel: { 
                                formatter: '{value} ml'
                            }
                        },
    
    
                    ],
                    series: [
                        { 
                            name: '峰占比',
                            type: 'bar',
                            data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0,15.6, 12.2, 12.6, 10.0, 6.4, 3.3, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
                            itemStyle: { 
                                barBorderRadius: 20,
    
                            },
                            barWidth: 10,
                            stack :'one'  //重叠的重点
                        },
                        { 
                            name: '尖占比',
                            type: 'bar',
                            data: [ 0.0, 0.0, 0.0, 0.0,0.0,0.0, 0.0, 0.0, 0.0, 0.0,0.0, 0.0,11.0,12.0, 18.0, 11.0, 31.0,12.0, 0.0, 0.0, 0.0, 0.0,0.0, 0.0],
                            itemStyle: { 
                                barBorderRadius: 20,
    
                            },
                            barWidth: 10,
                            stack :'one' //重叠的重点
                        },
                        { 
                            name: '平占比',
                            type: 'bar',
                            data: [11.0,12.0, 18.0, 11.0, 31.0,12.0, 0.0, 0.0, 0.0, 0.0,0.0, 0.0, 0.0, 0.0, 0.0, 0.0,0.0, 0,0.0, 0.0, 0.0, 0.0, 0.0,0.0, 0.0],
                            itemStyle: { 
                                barBorderRadius: 20,
    
                            },
                            barWidth: 10,
                            stack :'one'//重叠的重点
                        },
                        { 
                            name: '谷占比',
                            type: 'bar',
                            data: [ 0.0, 0.0, 0.0, 0.0,0.0,0.0, 0.0, 0.0, 0.0, 0.0,0.0, 0.0, 0.0, 0.0, 0.0, 0.0,0.0, 0.0,11.0,12.0, 18.0, 11.0, 31.0,12.0],
                            itemStyle: { 
                                barBorderRadius: 20,
    
                            },
                            barWidth: 10,
                            stack :'one'//重叠的重点
                        },
    
    
    
                    ]
                }
    
                myChart.setOption(option)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c97bab076feb45d3a0acad1daabdea08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/0756da616a3842b69526df4084275363.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/2e453a1284af4dd7bba6ed3947c3cf79.png

echarts 修改柱形图形状新增柱形图堆叠效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读