Echarts学习系列之创建多个Y轴

标签： Echarts 分类： Javascript 创建时间：2020-11-12 10:41:35 更新时间：2023-10-20 11:23:25

前言

创建多个坐标轴，就是类似于左边一个横坐标，右边一个横坐标，但是两种都使用的是同一年份的X坐标，也有可能右边有多个Y轴。

参考文章：
1.Echarts3实例 双Y轴折线图
2.xAxis

1.使用yAxis创建多个纵坐标

使用传统的设置series的data的方式，就可以使用参考文章中的提到的方法进行创建。

参考文章：
1.Echarts3实例 双Y轴折线图

2.使用数据集的方式

如果有一个dataset对象数组，可以进行如下的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
// 表格参数
const chartOption = {
    //数据提示框
    tooltip: {
        trigger: 'axis',
        textStyle: {
            fontSize: 10
        }
    },
    dataset: {
        // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
        // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
        dimensions: ['RecordTime', 'DifPress','InsFlux'],
    }, // 数据集配置
    //区域缩放，
    dataZoom: {
        type: 'inside',//内置于坐标系中 ，在坐标系上通过鼠标拖拽，滚轮，单指拖拽，双指缩放
    },
    // 多个y轴要留出空间
    grid:{
        right: '20%',
        left:'8%'
    },
    //图例
    legend: {
        itemGap:1,
        itemWidth:10,
        itemHeight:8,
        padding:2,
        data: ['差压','瞬时流量'],
        selected: [],
        // rotation:-90
    },
    calculable : true,
    xAxis: {
        type: 'time',//注意：数据类型不能为category，否则数据缺少时，不会自动留出空间
        splitLine: {
            show: true
        },
        axisLabel: {
            textStyle: {
                fontSize: 10//在手机端，字体比较大，看得清楚
            }
        }
    },
    yAxis : [
        {
            type: 'value',
            name:"差压",
            nameLocation:"center",
            nameGap:35,
            nameRotate:90,
            nameTextStyle:{
                fontSize: 16,
            },
            //默认以千分位显示，不想用的可以在这加一段
            axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                show:true,
                showMinLabel:true,
                showMaxLabel:true,
                formatter: function (value) {
                    return value;
                }
            }
        },
        {
            type: 'value',
            name:"瞬时流量",
            nameLocation:"center",
            nameGap:35,
            nameRotate:90,
            nameTextStyle:{
                fontSize: 16,
            },
            offset:0,
            //默认以千分位显示，不想用的可以在这加一段
            axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                show:true,
                showMinLabel:true,
                showMaxLabel:true,
                formatter: function (value) {
                    return value;
                }
            }
        }
    ],
    series : [
        {
            name:"差压",
            type:'line',
            smooth: true,
            showSymbol:false,
            yAxisIndex:0,
            splitLine:false,
            encode: {
                // 映射数据集中的哪个字段
                y: 'DifPress'
            },
        },
        {
            name:"瞬时流量",
            type:'line',
            smooth: true,
            showSymbol:false,
            splitLine:false,
            yAxisIndex:1,
            encode: {
                // 映射数据集中的哪个字段
                y: 'InsFlux'
            },
        }
    ]
};
// 初始化图表
echarts.init(ele).setOption(chartOption, true);

其中dataset中的数据格式为对象数组:

1
2
3
[
    {"RecordTime": "2020-11-12 14:49:00", "InsFlux": 6.319, "SiteNo": 1, "DifPress": 3.943},
    {"RecordTime": "2020-11-12 14:50:00", "InsFlux": 6.721, "SiteNo": 1, "DifPress": 4.509,}]

效果图：

参考文章：
1.ECharts 数据集（dataset）
2.echarts自定义tooltip显示内容
3.echarts自定义tooltip提示框内容
4.echarts折线图的每个折点都显示数值 (显示数据的方式就是设置series的itemStyle : { normal: {label : {show: true}}})

3.刻度线问题

左右两个 Y 轴，这个就会出现不一致的情况。 配置如下，主要的代码就是 yAxisIndex 指定坐标轴的序列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
const option = {
  grid: [
    {
      show: false,
      left: 70,
      top: 40,
      bottom: 20,
      right: 70,
    },
  ],
  textStyle: {
    color: 'white',
  },
  tooltip: {
    formatter: '{c}',
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    padding: 0,
    borderWidth: 0,
    textStyle: {
      color: 'red',
      fontSize: 16,
      fontWeight: 'bold',
    },
    position: 'top',
  },
  xAxis: {
    type: 'category',
    data: stateData.yearData,
    boundaryGap: false,
  },
  yAxis: [
    {
      type: 'value',
      offset: 15,
      splitLine: {
        lineStyle: {
          color: ['#fff'],
          type: 'dashed',
        },
      },
      position: 'left',
      axisTick: {
        show: true,
      },
      scale: false,
      name: '面积(m²)',
      splitNumber: 5,
      min: stateData.mjYAxis.min,
      max: stateData.mjYAxis.max,
      interval: (stateData.mjYAxis.max - stateData.mjYAxis.min) / 5,
    },
    {
      type: 'value',
      name: '增长率',
      position: 'right',
      offset: 15,
      nameTextStyle: { align: 'left' },
      axisLabel: {
        formatter: '{value} %',
      },
      axisLine: {
        lineStyle: {
          color: '#5e859e', //纵坐标轴和字体颜色
          width: 2,
        },
      },

      splitNumber: 5,
      min: stateData.zzlYAxis.min,
      max: stateData.zzlYAxis.max,
      interval: (stateData.zzlYAxis.max - stateData.zzlYAxis.min) / 5,
    },
  ],
  series: [
    {
      data: stateData.mjData,
      type: 'line',
      smooth: true,
      symbol: 'emptyCircle',
      symbolSize: 10,
      itemStyle: {
        normal: {
          lineStyle: {
            width: 5,
            color: 'rgba(14, 232, 79, 1)',
          },
        },
      },
    },
    {
      data: stateData.zzlData,
      yAxisIndex: '1', //使坐标轴在右侧显示，当有多个坐标轴时，数字依次增大，可建立多个Y轴
      type: 'bar',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: 'rgba(109, 183, 255, 0.97)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(49, 98, 255, 0.97)', // 100% 处的颜色
              },
            ],
            false
          ),
        },
      },
    },
  ],
};
参考文章:
1.实现ECharts双Y轴左右刻度线一致并不是参差不齐的刻度线 1.首先固定两边的分隔的段数。分别求出左边Y轴和右边Y轴的最大值max和最小值min，根据max和min之间的和去除以分隔的段数，分别算出左边Y轴和右边Y轴的分隔间隔。
2.echarts的双y轴显示 这篇文章给了我灵感，就是多加了 yAxisIndex 参数。
3.实现ECharts双Y轴左右刻度线一致的例子 这里的代码只是配置了两个轴，设置了min、max，其他的还是有些问题的。
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 前言
  2. 2. 1.使用yAxis创建多个纵坐标
  3. 3. 2.使用数据集的方式
  • 3.刻度线问题
    • 小额赞助
    本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
    **光 3.01 元
    Sun 3.00 元
    bibichuan 3.00 元
    捐赠者名单 合计：9.01 元
    微信公众号
    广告位
    诚心邀请广大金主爸爸洽谈合作
    每日一省
    isNaN 和 Number.isNaN 函数的区别？

    1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

    2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

    2021-04-07 链接地址
    每日二省
    为什么0.1+0.2 ! == 0.3，如何让其相等?

    一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

    2021-04-07 链接地址
    每日三省
    == 操作符的强制类型转换规则？

    1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

    2.类型不相同的话，就会进行类型转换。

    3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

    4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

    5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

    6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

    2021-04-07 链接地址
    每日英语
    Happiness is time precipitation, smile is the lonely sad.
    幸福是年华的沉淀，微笑是寂寞的悲伤。
    2016 ——— 美文