echarts 双Y轴,最大值,

发布时间:2024年01月19日
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
    }
  ]
};

在这里插入图片描述

Axis的yAxisIndex属性 echarts配置多个y轴的时候,需要加上: yAxisIndex;

series数据中,yAxisIndex值为0对应的y轴是yAxis对应的第一条y轴;

series数据中,yAxisIndex值为1 对应的y轴是yAxis对应的第二条y轴;

const showLabel = 7038; position: item[1] < showLabel2 ? ‘top’ : ‘bottom’ :当折线图有交点时,数值小于7038,标题在顶部。数值大于7038标题在底部;

文章来源:https://blog.csdn.net/qq_28586135/article/details/132037457
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。