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

最新推荐文章于 2024-08-09 14:25:37 发布

hjy170314

最新推荐文章于 2024-08-09 14:25:37 发布

阅读量1.1k

点赞数

分类专栏：前端知识文章标签： javascript vue.js html5 echarts

本文链接：https://blog.csdn.net/hjy170314/article/details/108469474

版权

前端知识专栏收录该内容

104 篇文章 2 订阅

订阅专栏

效果图

html部分

<div id="main" style="width: 600px;height:400px;"></div>

js部分

var myChart = echarts.init(document.getElementById('main'));
var colors = ['#2D9CFF','#5793f3', '#d14a61', '#675bba'];

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: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            // label:{  //borb柱形图上面的文字
            //     show:true,
            //     borderRadius:20
            // },
            itemStyle:{
             barBorderRadius:20,
            
            },
            barWidth:10
                
        },
       
       
    ]
     myChart.setOption(option);

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

  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)