Echarts实现多个x轴或y轴曲线图

Echarts实现多个x轴或y轴曲线图

效果图如下：

1.1 配置option对象

option:{
   
    // 设置 x 轴的样式
    xAxis:{
   },
    // 设置 y 轴的样式
    yAxis:[],
    // 设置每条曲线的数据和样式
    series:[],
    // 设置鼠标hover时的提示信息
    tooltip:{
   },
    // 调整表格两边的空白的区域
    grid:{
   },
    // 调整图样的名称
    legend:{
   }
    // 定义图样和每条曲线的颜色
    color:[]
}

• yAixs 用来配置 y 轴的数据，样式和名称，当把 yAxis 设置为一个数组，且给数组添加多个对象时，就可以实现多个 y 轴的效果。

• 但是这些 y 轴都是重叠的，我们可以通过每个 y 轴的 offset 属性来调整 y 轴使它们到达合适的位置

• 通过 axisTick 和axisLabel 属性可以分别设置 y 轴上的刻度和刻度值的位置，是在左侧显示还是在右侧

• 如果表格左右的留白空间不足以放下多个 y 轴，可以通过设置 grid 属性来调整空白和图像的比例

• 具体实现代码如下：

option = {
   
 yAxis: [
              {
   
                name: '指标参数一(单位)',
                type: 'value',
                // max: 700,
                // min: 0,
                // 让表格的刻度向靠里侧显示
                axisTick: {
   
                  inside: true
                },
                axisLabel: {
   
                  inside: true
                },
                // 设置刻度线的颜色等样式
                axisLine: {
   
                  lineStyle: {
   
                    color: 'red',
                    width: 3
                  }
                },
                splitLine: {
   
                  show: true, //想要不显示网格线，改为false
                  lineStyle: {
   
                    // 设置网格为虚线
                    type: 'dashed'
                  }
                }
              },
              {
   
                name: '指标参数二(单位)',
                // max: 800,
                // min: 0,
                type: 'value',
                axisLine: {
   
                  lineStyle: {
   
                    color: 'orange',
                    width: 3
                  }
                },
                splitLine: {
   
                  show: false //想要不显示网格线，改为false
                },
                // 设置坐标轴偏移位置
                offset: -1060
              },
              {
   
                name: '指标参数三(单位)',
                // max: 900,
                // min: 0,
                type: 'value',
                axisLine: {
   
                  lineStyle: {
   
                    color: 'green',
                    width: 3
                  }
                },
                offset: -1160,
                splitLine: {
   
                  show: false //想要不显示网格线，改为false
                }
              },
              {
   
                name: '指标参数四(单位)',
                // max: 1000,
                /