设置 echarts 柱状图双轴右侧的百分比

1,831 阅读1分钟

设置 echarts 柱状图双轴右侧的百分比

如图:

image.png

看起来是个比较简单的柱状图,左侧轴的单位是 ml, 右侧的轴是 %

但是我们要设置橙色的折线图是以右侧的百分比去显示。 具体配置如下:

yAxis

 yAxis: [
    {
      type: 'value',
      name: '折线图',
      min: 0,
      max: 100,
      interval: 20,
      axisLabel: {
        formatter: '{value} %' // 右侧轴的单位展示
      }
    }
  ]
  
  

series

series: [
    {
      name: '折线',
      type: 'line',
      yAxisIndex: 1, // 使用的y 轴的 index
      tooltip: {
        valueFormatter: function (value) {
          return value + '%'; // 单位后缀 百分比
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 6.2] // 折线图的数据
    } 
]