echarts

最新推荐文章于 2024-01-22 09:39:18 发布

这个前端不太行

最新推荐文章于 2024-01-22 09:39:18 发布

阅读量370

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/s_m123/article/details/122376187

版权

本文探讨了如何使用Echarts创建双轴图表，并解决两个坐标轴重合的问题。通过调整坐标轴的位置、偏移量、刻度间隔等属性，实现了分类轴的清晰展示。同时，通过计算最大值和最小值来动态设定轴的范围，确保数据的准确显示。此外，文章还展示了如何设置颜色、提示框样式和图例，以增强图表的可读性和视觉效果。

摘要由CSDN通过智能技术生成

echarts图形及两个坐标重合

let option = {
  color: ['#5470C6', '#EE6666'],
  tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
  legend: { data: ['均值', '超标率'] },
  grid: { top: 50, left: 50, right: 40 },
  xAxis: [
    {
      type: 'category',
      position: 'bottom',
      offset: 0,
      axisLine: { show: true, onZero: false },
      axisTick: { length: 40, lineStyle: { color: '#ccc' } },
      axisLabel: { color: '#535252', fontSize: 9, interval: 0, rotate: 90 },
      data: [
        '2020年',
        '2019年',
        '',
        '2020年',
        '2019年',
        '',
        '2020年',
        '2019年',
        '',
        '2020年',
        '2019年',
        ''
      ]
    },
    {
      type: 'category',
      position: 'bottom',
      offset: 40,
      axisTick: { length: 60, lineStyle: { color: '#ccc' } },
      axisLine: { lineStyle: { color: '535252' }, onZero: false },
      axisLabel: { color: '#535252', fontSize: 10, interval: 0 },
      data: [
        '铬',
        '',
        '石油烃',
        '',
        '砷',
        '',
        '铜',
        ''
      ]
    }
  ],
  yAxis: [
    {
      type: 'value',
      position: 'left',
      min: 0,
      max: 70,
      splitNumber: 5,
      interval: 14,
      axisLine: { show: true, lineStyle: { color: '#5470C6' } }
    },
    {
      type: 'value',
      position: 'right',
      min: 0,
      max: 110,
      splitNumber: 5,
      interval: 22,
      axisLine: { show: true, lineStyle: { color: '#EE6666' } }
    }
  ],
  series: [
    {
      type: 'bar',
      name: '均值',
      data: [
        10,
        9,
        '',
        20,
        22.4,
        '',
        2.5,
        2.08,
        '',
        2,
        1.9,
        ''
      ],
      barWidth: 25,
      itemStyle: { normal: { color: '#5470C6' } }
    },
    {
      name: '超标率',
      type: 'line',
      yAxisIndex: 1,
      data: [
        4,
        7,
        '',
        62.5,
        58.33,
        '',
        78.13,
        100,
        '',
        3,
        6,
        '',
      ],
      symbol: 'circle',
      symbolSize: 10,
      itemStyle: { normal: { color: '#EE6666' } }
    }
  ]
};

y轴两个坐标重合：

//计算最大值
     function calMax(arr) {
        let max = 0;
        arr.forEach((el) => {
          if (!(el === undefined || el === '')) {
            if (max < el) {
              max = el;
            }
          }
        })
        let maxint = Math.ceil(max);//不让最高的值超过最上面的刻度
        let maxval = maxint;//让显示的刻度是整数
        return maxval;
      }
    
      //计算最小值
      function calMin(arr) {
        let min = 0;
        arr.forEach((el) => {
          if (!(el === undefined || el === '')) {
            if (min > el) {
              min = el;
            }
          }
        })
        let minint = Math.floor(min);
        let minval = minint;//让显示的刻度是整数
        return minval;
      }
      var Min1 = calMin(series[0].data), Min2 = calMin(series[1].data),
          Max1 = calMax(series[0].data), Max2 = calMax(series[1].data);


    yAxis: [
          {
            type: 'value',
            position: 'left',
            min:Min1,
            max:Max1,
            splitNumber:5,
            interval:(Max1-Min1)/5,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            },
          },
          {
            type: 'value',
            position: 'right',
            min:Min2,
            max:Max2,
            splitNumber:5,
            interval:(Max2-Min2)/5,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              }
            },
          }
        ],