美文网首页
Echarts报表两侧Y轴重叠设置

Echarts报表两侧Y轴重叠设置

作者: 背着生活往前走你才辨的出美和丑 | 来源:发表于2021-04-22 16:31 被阅读0次
要求左右两边的y轴刻度重叠
/*
 *  获取 折线图
 *  id: 元素ID
 *  x: ['00\n00', '00\n30','01\n00', '01\n30','02\n00', '02\n30','03\n00', '03\n30',]
 *  data: [
      {
        name: '月计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[0],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [18203, 23489]
      },
      {
        name: '年计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[2],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [19325, 681807]
      }
    ]
 *  name: 提示框name
 * */
export function getLine(id, legendData, x, data) {
  if (data === undefined) {
    Message.error("没有找到报表数据,请检查!");
    return;
  }
  let maxMin = getMax(data); // 计算最大值
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 20,
      data: legendData
    },
    grid: {
      top: 35,
      left: 60,
      right: 200,
      bottom: 40,
    },
    xAxis: {
      type: 'category',
      boundaryGap: true, // 坐标两边留白策略 - 点在两个坐标中间
      data: x,
      axisLine: {
        lineStyle: {
          color: "#C8D6E4"
        }
      },
      axisTick: {
        lineStyle: {
          color: "#C8D6E4"
        }
      },
      axisLabel: {
        color: "#333"
      },
    },
    yAxis: [{
      type: 'value',
      name: '功率数值(MW)',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      min:maxMin[0][1], // 最小值
      max:maxMin[0][0], // 最大值
      splitNumber:5, // 刻度数
      interval: (maxMin[0][0]-maxMin[0][1])/5 //强制设置刻度间隔
    },
    {
      type: 'value',
      name: '平均风速/日照强度',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      min:maxMin[1][1],
      max:maxMin[1][0],
      splitNumber:5,
      interval: (maxMin[1][0]-maxMin[1][1])/5
    }],
    series: data
  };
  myChart.setOption(option, true);
}
// 获取最大值
export function getMax(data) {
  let d1 = [];
  let d0 = [];
  data.forEach((item)=>{
    if(item.yAxisIndex === 1){
      d1 = d1.concat(item.data)
    }else{
      d0 = d0.concat(item.data)
    }
  });
  return [[Math.max.apply(null,d0), Math.min.apply(null,d0)], [Math.max.apply(null,d1), Math.min.apply(null,d1)]]
}

相关文章

网友评论

      本文标题:Echarts报表两侧Y轴重叠设置

      本文链接:https://www.haomeiwen.com/subject/xflfrltx.html