使用echarts如何实现双y轴且实现指定数据使用y轴呢?

在项目中经常使用echarts,我们经常会用到双y轴伸直多y轴去展示数据,默认所有数据都是使用左边y轴去展示数据的 , 我们需要自己去设置,具体使用某一个y轴去展示指定的某一个具体的数据。

现在的需求是折线图有四条数据,想实现三条数据基于一侧y轴,另外一条数据基于另外一侧y轴
实现上述功能 按以下配置即可

指定需要使用的Y轴 yAxisIndex: 1, 默认 yAxisIndex: 0

yAxis: [
       {
              type: "value",
              name: "左侧y轴名称",
              axisLabel: {
                formatter: "{value}"+"次",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
              },
              splitLine: {
                show: true,
              },
            },
            {
              type: "value",
              position: 'right',
              name: "右侧y轴名称",
              axisLabel: {
             
                formatter: "{value}"+"次",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
              },
              splitLine: {
                show: false,
              },
            }
          ],
 series: [
            {
              name: "第1条数据名称",
              type: "line",
              yAxisIndex: 1,
              data: 数据
            },
            {
              name: "第2条数据名称",
              type: "line",
              yAxisIndex: 0,
              data:  数据
            },
            {
              name: "第3条数据名称",
              type: "line",
              yAxisIndex: 0,
              data:  数据
            },
            {
              name: "第4条数据名称",
              type: "line",
              yAxisIndex: 0,
              data:  数据
            },
          ],
        };

你可能感兴趣的:(echarts,前端,javascript)