Echarts图表柱状图数据最大值显示不同颜色,柱状图渐变色,柱状图显示背景阴影

Echarts图表柱状图数据最大值显示不同颜色,柱状图渐变色,柱状图显示背景阴影,第1张

注:图表其它配置项省略 效果图:


实现效果:
1.数据的最高值显示不同的颜色
2.数据展示为渐变色
3.显示数据的背景阴影

实现代码(仅series配置项)
'series': [
		//表格中展示颜色的配置项
        {
            name: '',
            type: 'bar',
            barWidth: '18',//柱体宽度
            itemStyle: {
            normal: {
            //color配置字体的颜色
            color: function(params) {
                var index_color = params.value;
                if (index_color === Math.max.apply(null,data1)) {//Math.max.apply获取数据源中的的最大值
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                          offset: 0,
                          color: 'rgba(255, 191, 44, 0.2)',
                        },
                        {
                          offset: 1,
                          color: '#FFBF2C',
                        },
                  ]);//Echarts的渐变色设置
                } else {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {
                            offset: 0,
                            color: 'rgba(24, 144, 255, 0.2)',
                          },
                          {
                            offset: 1,
                            color: '#35C3FF',
                          },
                    ]);

                }
    
            }
             }
            },
            zlevel: 3,
            data: data1,//数据源
            label: { normal: {
            show: true,
            textStyle: {
                color: '#fff',
                fontSize: 12
            },
            position: 'top'
            }}
        },
        //表格中每条数据的背景阴影的配置项
        {
            name: '',
            type: 'bar',
            barWidth: '18',//背景阴影宽度
            barGap: '-100%',//进行偏移,将背景移到数据正下方
            itemStyle: {
                normal: {
                color: 'rgba(255,255,255,0.1)'
                }
            },
            zlevel: 2,
            data: ['10', '10', '10', '10', '10'],//每项阴影显示高度
            label: {
            normal: {
            show: false,
            textStyle: {
                color: '#fff',
                fontSize: 12
            },
            position: 'top'
            }
            }
        }
        ]

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1322918.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存