echarts

echarts双Y轴时,不同组的数据设置对应y轴

2022-12-14  本文已影响0人  Pino
废话少说先上图 image.png

根据上图可知,折线图的颜色和左侧的y轴颜色是一样

所以折线图以左侧的y轴对齐,柱状图以右侧的y轴对齐

那么改如何设置对应y轴呢?

答案是 series中的data对应item配置yAxisIndex,如下


 yAxis: [
    {
      type: "value",
      name: "单位: 次",
      max: 1000,//要写设置最大值最小值的时候有用
      max: 0,//要写
      scale: true,
      nameGap: 40,
      nameTextStyle: {
        color: "#fff",
        fontSize: 14,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: "#c0c3cd", //y轴字颜色
        fontSize: 14,
      },
    },
    {
      type: "value",
      name: "单位: 次",
      max: 800,//要写设置最大值最小值的时候有用
      max: 0,//要写
      scale: true,
      nameGap: 40,
      nameTextStyle: {
        color: "#fff",
        fontSize: 14,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: "#c0c3cd", //y轴字颜色
        fontSize: 14,
      },
    },
   
  ],
 
 
 
 series: [
    {
      type: "bar",
      name: "使用量(次)",
      yAxisIndex: 0, // 设置数据对齐yAxis 第一个y轴
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              color: "rgba(250,250,250,0.6)",
              fontSize: 16,
            },
          },
          borderWidth: 2,
        },
      },
      data: [], //[19, 29, 39, 81, 47, 20, 18, 39, 81, 47, 20, 18]
    },
    {
      type: "bar",
      name: "效益(人/每天)",
      yAxisIndex: 1, // // 设置数据对齐yAxis 第二个y轴
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              color: "rgba(250,250,250,0.6)",
              fontSize: 16,
            },
          },
          borderWidth: 2,
        },
      },
      data: [], //[12, 23, 35, 100, 53, 36, 22, 39, 81, 47, 20, 18]
    },
  ]
上一篇 下一篇

猜你喜欢

热点阅读