初入Echarts,想请问各位Echarts中series的使用的问题。

Mesopotamia
  • 98

在echarts中能否让柱状图中series.data每一个数据设置不同的itemStyle样式?

// 今天消耗数据
    let todayData = [3709, 2500, 2000, 2610, 1719, 433, 2644, 4205, 3372, 4384, 4078, 5227]
    // 昨天消耗数据
    let yesterdayData = [4000, 2417, 755, 2710, 1819, 483, 2544, 4245, 3572, 2484, 4378, 5177]

    let data1 = getMinExpend()
    let data2 = getEconomyExpend()
let option = {
      title: {
        text: '冷量消耗环比图',
        left: 'center',
        top: '10px',
        subtext: '今天 VS 昨天'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['1小时', '2小时', '3小时', '4小时', '5小时', '6小时', '7小时', '8小时', '9小时', '10小时', '11小时', '12小时']
      },
      yAxis: {},
      series: [
        {
          name: getName(),
          type: 'bar',
          data: data1.value,
          barWidth: 40,
          stack: 'hours',
          itemStyle: {
            color: '#00BFFF'
          },
          emphasis: {
            itemStyle: {
              color: '#1A2F44',
              borderColor: '#fff'
            }
          }
        },
        {
          name: 'economyExpend',
          type: 'bar',
          data: data2,
          barWidth: 40,
          stack: 'hours',
          itemStyle: {

          }
        }
      ]
    }
    
    function getMinExpend() {
      let data = {
        name: [],
        value: []
      }
      for (let i=0; i<12; i++) {
        if (todayData[i] < yesterdayData[i]) {
          data.value.push(todayData[i])
          data.name.push('today')
        } else if (todayData[i] === yesterdayData[i]){
          data.value.push(todayData[i])
          data.name.push('today')
        } else {
          data.value.push(yesterdayData[i])
          data.name.push('yesterdayData')
        }
      }
      console.log('data1', data)
      return data
    }

    function getEconomyExpend() {
      let data = []
      for (let i=0;i<12;i++) {
        data.push(Math.abs(todayData[i] - yesterdayData[i]))
      }
      console.log('data2', data)
      return data
    }
回复
阅读 6.9k
1 个回答
✓ 已被采纳
series : [
        {
          data:[
              {
                value:200,
                itemStyle:{
                  normal:{color:'gray'}
              }
              }, 
              {
                value:300,
                itemStyle:{
                  normal:{color:'green'}
              }
              },
              {
                value:1500,
                itemStyle:{
                  normal:{color:'yellow'}
              }
              },
              {
                value:300,
                itemStyle:{
                  normal:{color:'red'}
              }
              }
            ]
        }
    ]
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏