Echarts多y轴展示

芋圆社区 > 编程 > Echarts > Echarts多y轴展示

487

2023-07-26

Hey、小怪兽

• 多y轴展示图表也可以理解为不同单位的折线图
• 如果折线图要展示CPU和内存的使用率，还要展示下载速度和上传速度，如果它们用一个y轴的话就会导致蓝色绿色的折线（CPU和内存使用率）一直在最底下，黄色红色的折线（下载和上传速度KB/S）一直在最上面，也没有什么起伏
• 如图，想要他们有这样的起伏就可以用多y轴
• 首先模拟好数据，需要传4个东西：
- id：用来做唯一标识，生成图表用的
- legendData：图例组件数据，就是CPU使用率，内存使用率，下载速度KB/s，上传速度KB/s的数组
- xAxisData：横坐标的数据，这里应该是一个时间的数组
- series：用来生成Echarts的series，每个图例的数据
• 例子：

{
  "id": "node-chart",
  "legendData": ["CPU使用率", "内存使用率", "下载速度KB/s", "上传速度KB/s"],
  "xAxisData": [
    "2023-07-26 13:45:00", "2023-07-26 13:46:00", "2023-07-26 13:47:00", "2023-07-26 13:48:00", "2023-07-26 13:49:00",
    "2023-07-26 13:50:00", "2023-07-26 13:51:00", "2023-07-26 13:52:00", "2023-07-26 13:53:00", "2023-07-26 13:54:00"
  ],
  "series": [{
      "name": "CPU使用率",
      "data": ["7.38", "7.40", "7.38", "7.42", "8.87", "9.21", "7.46", "7.33", "7.39", "7.44"]
    },
    {
      "name": "内存使用率",
      "data": ["85.60", "85.64", "85.61", "85.60", "84.01", "84.13", "84.19", "84.25", "84.30", "84.35"]
    },
    {
      "name": "下载速度KB/s",
      "data": ["18249.09", "18141.47", "18111.40", "18100.10", "18189.10", "13774.61", "18109.65", "18223.38", "18139.79", "18131.21"]
    },
    {
      "name": "上传速度KB/s",
      "data": ["17894.41", "17805.30", "17766.77", "17808.33", "17826.01", "8770.95", "17769.91", "17885.77", "17800.52", "17793.69"]
    }
  ]
}

• 这些数据是放在props里的，Echarts组件可以拿到这些值
• 先定义需要动态改变的Echarts值和模板：

let series = [];
let yAxis = [];
let yAxisOne = {
  type: 'value',
  min: 0,
  max: 100,
  splitLine: { show: false },
  axisLine: { show: true, lineStyle: { color: '#e8e8e8' } },
  axisTick: { show: false },
  axisLabel: { show: false },
};

• 因为我的需求是坐标的刻度，刻度线，标签都不显示，所以把splitLine，axisTick，axisLabel都设置false了
• x和y轴的坐标轴还是要显示的，颜色是#e8e8e8
• 如果props，也就是传进来的值还没有数据，那就直接显示xy坐标轴：

if (!props.series.length) {
  yAxis.push(yAxisOne);
}

• 接下去遍历传进来的series：
- y轴最小值最大值就是图例里data的最小值最大值，也就是说，当下载速度最大1000KB/s，那么y轴最上面就是1000KB/s，下载速度最小10KB/s，那么y轴最下面就是10KB/s，当然可以根据浮动设置
- 分别push进yAxis和series就行了
- symbol是折线图的拐点，给它设置成none
- 多个y轴需要设置yAxisIndex，直接拿map的索引值就可以了，应该是用来体现谁显示在上面吧

props.series.map((x, i) => {
  const copyObj = JSON.parse(JSON.stringify(yAxisOne));
  copyObj.min = Math.min(...x.data);
  copyObj.max = Math.max(...x.data);
  yAxis.push(copyObj);

  series.push({
    name: x.name,
    type: 'line',
    data: x.data,
    symbol: 'none',
    // 多个y轴必须设置
    yAxisIndex: i,
  });
});

• 其他的都正常写，完整代码（仅供参考）：

import React from 'react';
import { useEffect } from 'react';
import * as echarts from 'echarts';

export default function (props) {
  let series = [];
  let yAxis = [];
  let yAxisOne = {
    type: 'value',
    min: 0,
    max: 100,
    splitLine: { show: false },
    axisLine: { show: true, lineStyle: { color: '#e8e8e8' } },
    axisTick: { show: false },
    axisLabel: { show: false },
  };

  if (!props.series.length) {
    yAxis.push(yAxisOne);
  }

  props.series.map((x, i) => {
    const copyObj = JSON.parse(JSON.stringify(yAxisOne));
    copyObj.min = Math.min(...x.data);
    copyObj.max = Math.max(...x.data);
    yAxis.push(copyObj);

    series.push({
      name: x.name,
      type: 'line',
      data: x.data,
      symbol: 'none',
      // 多个y轴必须设置
      yAxisIndex: i,
    });
  });

  useEffect(() => {
    const echartsOption = {
      title: {
        show: false,
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        right: '0.5%',
        icon: 'roundRect',
        data: props.legendData,
      },
      grid: {
        top: '50%',
        left: '0.5%',
        right: '0.5%',
        bottom: '6%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: props.xAxisData,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#e8e8e8',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      yAxis: yAxis,
      series: series,
    };

    let myChart = echarts.getInstanceByDom(document.getElementById(props.id));

    if (myChart == null) {
      myChart = echarts.init(document.getElementById(props.id));
    }
    myChart.setOption(echartsOption);

    window.addEventListener('resize', function () {
      myChart.resize();
    });
  }, [props.xAxisData]);

  return (
    <React.Fragment>
      <div id={props.id} style={{ width: '100%', height: '100%' }} />
    </React.Fragment>
  );
}

上一篇：Echarts常用修改总结

下一篇：Echarts辅助线整数显示

Echarts多y轴展示

回复