Echarts yAxisIndex配置多个y轴的最大值最小值

林中明月间。

已于 2024-05-07 11:29:58 修改

阅读量4.7k

点赞数

分类专栏： Vue+Echart 文章标签： echarts 前端 javascript

于 2022-02-17 16:23:29 首次发布

原文链接：https://blog.csdn.net/weixin_30394333/article/details/97677512

版权

Vue+Echart 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

echarts配置多个y轴_weixin_30394333的博客-CSDN博客

echarts配置多个y轴的时候，需要加上： yAxisIndex: 1

 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, // 配置多个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, // 配置多个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]
    },
  ],