echart柱状条根据不同数据显示不同颜色

series: [{
          data: [100, 80, 60, 40, 20, 90, 70],
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              color: function (value) {
                console.log('颜色这里')
                let vv = value.value
                console.log(vv)
                if (vv >= 80) {
                  return 'red'
                }
                else if (vv >= 60) {
                  return 'yellow'
                }
                else {
                  return 'green'
                }
              }
            }
          }
        }]
### ECharts 中为柱状图的不同系列分配不同颜色ECharts 中,可以通过 `itemStyle` 属性来实现为柱状图的不同系列设置不同颜色。具体来说,在每个系列的配置中定义其专属的颜色即可。 以下是完整的解决方案: #### 方法描述 通过在每个系列的 `itemStyle` 配置项中指定颜色属性,可以直接为每个系列设定固定的颜色[^1]。如果需要动态调整颜色,也可以利用回调函的方式根据数据索引来返回对应的颜色值[^2]。 #### 示例代码 以下是一个基于需求的具体实现案例: ```html <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '多个系列柱状图' }, tooltip: {}, legend: { data: ['销量A', '销量B'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [ { name: '销量A', type: 'bar', data: [5, 20, 36, 10, 10, 20], itemStyle: { color: '#DA251D' // 销量A 的颜色 } }, { name: '销量B', type: 'bar', data: [15, 25, 16, 5, 25, 10], itemStyle: { color: '#00A3E0' // 销量B 的颜色 } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> ``` #### 关键点解析 1. **静态颜色设置** 如果只需要简单的固定颜色,可以在 `itemStyle.color` 中直接赋值字符串形式的颜色码[^1]。 2. **动态颜色设置** 对于更复杂的情况,比如每根柱子有不同颜色或者按某种逻辑变化颜色,可以使用回调函的形式定义颜色[^3]。例如: ```javascript itemStyle: { color: function (params) { var colorList = ['#c23531', '#2f4554', '#61a0a8']; return colorList[params.seriesIndex]; } } ``` 3. **多系列支持** 当存在多个系列时,需分别为每个系列单独配置 `itemStyle.color` 或者采用统一的调色板策略[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值