echarts柱形图一组数据如何实现两个图例?

组数组实现两个图例,如下图所示,当文字移动到柱子上时候,文字也会发生相应的变化,请问这如何实现?
image.png
let arr = [0, 1, 0, 1]; //修改数组中的值来判断柱子的颜色
 
option = {
  title: {
     text: '耗材使用数量及金额排名',
     x:'center'
    },           
  xAxis: {
    type: 'category',
    data: ['耗材1', '耗材12', '耗材13', '耗材14']
  },
  yAxis: [
    {
        name:'金额',
        type: 'value'
    },
    {
        name:'数量',
        type: 'value'
    }
  ],
        
  series: [
    {
      name: '金额',
      type: 'bar',
      zlevel: 1,
      itemStyle: {
        normal: {
          color: function (params) {
            if (arr[params.dataIndex] == 1) {
              return '#47CC06';
            } else if (arr[params.dataIndex] == 0) {
              return '#FF5A00';
            } 
            console.log(params)
          },
          barBorderRadius: 30
        }
      },
      barWidth: 20,
      data: [103240, 52340, 12340, 60324],
    },
    {
      name: '数量',
      type: 'bar',
      barWidth: 20,
      data: [15, 14, 147, 120],
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: 'rgba(28, 128, 213, 0.19)',
          barBorderRadius: 30
        }
      }
    }
  ],
  tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: "shadow"
                }
            },
  legend: {
                data:['金额','数量'],
                bottom:'1%',
            }, 
};
阅读 2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题