echarts 双Y轴，最大值，

最新推荐文章于 2025-05-25 13:15:10 发布

Baifu paste

最新推荐文章于 2025-05-25 13:15:10 发布

阅读量864

点赞数 6

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_28586135/article/details/132037457

文章描述了一个使用ECharts库创建的收入利润曲线图表，展示了用户数与利润、收入之间的关系，通过yAxisIndex控制了不同系列数据在两个y轴上的展示位置，并设置了自适应的标签位置策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this.value = [
        [0, 0],
        [10, 788],
        [30, 3663],
        [50, 7038],
        [100, 16776]
      ];
this.value2 = [
        [0, 0],
        [10, 4500],
        [30, 13500],
        [50, 22500],
        [100, 45000]
      ];
const showLabel = 7038;
const showLabel2 = 22500;
option = {
  title: {
    text: '收入利润曲线（万元）'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    name: '用户数（万）',
    nameLocation: 'middle'
  },
  yAxis: [{
                type: "value",
                //name: "数量",
                // interval: 10,
                show: true,
                min: 0,
                max: 60000,
                nameTextStyle: {
                  color: "#000"
                },
                axisLabel: {
                  textStyle: {
                    color: "#000"
                  }
                },
              },

              {
                type: "value",
                //name: "挂起后通过比例",
                position: "right",
                min: 0,
                max: 18000,
                show: true
              }],
  series: [
    {
      itemStyle: { normal: { label: { show: true } } },

      name: '利润',
      showAllSymbol: true,
      data: this.value.map(item => {
       return {
         value: item,
         label: {
           show: true,
           position: item[1] < showLabel ? 'bottom' : 'top'
         }
       }
     }),
      type: 'line',
      yAxisIndex: 1,
      smooth: true
    },
    {
      itemStyle: { normal: { label: { show: true } } },
      name: '收入',
      showAllSymbol: true,
      data: this.value2.map(item => {
       return {
         value: item,
         label: {
           show: true,
           position: item[1] < showLabel2 ? 'top' : 'bottom'
         }
       }
     }),
      type: 'line',
      smooth: true
    }
  ]
};

在这里插入图片描述