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

Echarts多y轴展示

604
0
2023-07-26
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辅助线整数显示

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

Echarts常用修改总结

Echarts多y轴展示

Echarts辅助线整数显示

Echarts渐变内置生成器

Echarts多列柱状图重叠

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点