
<template>
  <div id="main"></div>
</template>
 
<script>
  import * as echarts from "echarts";
  export default {
    name: "mutiYAxis",
    data() {
      return {
     
      };
    },
    methods: {
      initChart() {
        let data = this.data
        let chartDom = document.getElementById("main");
        let myChart = echarts.init(chartDom);
        let option;
 
        ...详见完整示例   
      },
    },
  };
</script>
 
<style scoped>
  #main {
    width: 1000px;
    height: 500px;
  }
</style>

3、数据处理（关键点）

1）数据格式为一维数组


dataList: [
  [0, 221.6503],
  [35.564, 198.3526],
  [68.154, 168.4582],
  [108.124, 145.4562],
  [136.357, 128.1254],
  [158.354, 99.6574],
  [227.137, 58.5234],
  [268.854, 36.8563],
  [324.358, 21.2563],
  [385.135, 11.7854],
  [462.568, 0.35413]
]

2）X轴type设为value


xAxis: [
  {
     name: 'xAxisName',
     nameLocation: 'center',
     nameGap: 40,
     type: 'value',
     boundaryGap: false
     ......
   }
 ]

3) X轴固定间隔并向上取整十位数 + 设置最大值和最小值

向上取整的更多示例请看这里 =》CSDN


let xMax = Math.ceil(dataList[dataList.length - 1][0] / 20) * 20;
 
xAxis: [
  {
     name: 'xAxisName',
     nameLocation: 'center',
     nameGap: 40,
     type: 'value',
     boundaryGap: false,
     min: 0,    
     max: xMax,     
     interval: 20, // 无法在类目轴中使用。
     ......
   }
 ]

4） dataZoom的type设为inside


dataZoom: [{
  type: 'inside' // 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
}]

5) toolbox的feature的dataZoom即使是空对象也要保留，否则会没有缩放icon


toolbox: {
  show: true,
    feature: {
      // dataZoom 空对象也要保留，否则会没有缩放icon
      dataZoom: {},
      restore: {
       show: true
      }
  },
  right: '2%',
}

注：部分方法/数据的完整版在完整示例展示

四、完整示例


<template>
  <div class="typeValue">
    <div id="main"></div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";
 
export default {
  name: "typeValue",
  data() {
    return {
      result: {
        dataList: [
          [0, 221.6503],
          [35.564, 198.3526],
          [68.154, 168.4582],
          [108.124, 145.4562],
          [136.357, 128.1254],
          [158.354, 99.6574],
          [227.137, 58.5234],
          [268.854, 36.8563],
          [324.358, 21.2563],
          [385.135, 11.7854],
          [462.568, 0.35413],
        ],
        seriesName: '名称'
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart(this.result);
    });
  },
  methods: {
    initChart(data) {
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
      let option;
 
      const { dataList, seriesName } = data;
      if (dataList === null || dataList.length === 0) return;
 
      let legendData = [];
      legendData.push(seriesName);
      let xMax = Math.ceil(dataList[dataList.length - 1][0] / 20) * 20;
 
      option = {
        title: {
          left: '10%',
          top: '3%',
          text: 'title',
        },
        grid: {
          left: '12%'
        },
        toolbox: {
          show: true,
          feature: {
            // dataZoom 空对象也要保留，否则会没有缩放icon
            dataZoom: {},
            restore: {
              show: true
            }
          },
          right: '2%',
        },
        tooltip: {
          trigger: "axis",
          borderColor: 'rgba(226,231,234,0.75)',
          borderRadius: 4,
          backgroundColor: 'rgba(240,244,248,0.75)',
          textStyle: {
            color: '#333',
            fontSize: 13
          },
          formatter: function (params) {
            const { data } = params[0]
            return `(${data[0]}, ${data[1]})`;
          },
        },
        legend: {
          type: "scroll",
          data: legendData,
          textStyle: {
            color: "#999"
          }
        },
        xAxis: [
          {
            name: 'xAxisName',
            nameLocation: 'center',
            nameGap: 40,
            type: 'value',
            boundaryGap: false,
            min: 0,    
            max: xMax,     
            interval: 20, // 无法在类目轴中使用。
            boundaryGap: false,
            axisLabel: {
              show: true,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            boundaryGap: [0, '100%'],
            name: 'yAxisName',
            nameLocation:'center',
            nameGap: 40,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
            },
            axisLine: {
              show: true,
            },
          }
        ],
        series: [
          {
            name: data.seriesName,
            type: "line",
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: dataList,
          }
        ],
        dataZoom: [{
          type: 'inside' // 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
        }]
      };
 
      option && myChart.setOption(option);
    },
  },
}
</script>
 
<style lang="less" scoped>
#main {
  width: 1000px;
  height: 500px;
}
</style>

tips

1、X轴的type一般都是category，假如该示例的type为category，图形会如下图所示，很显然数据显示有问题，所以务必要修改type为value

2、X轴设置interval，无法在类目轴中使用。由于需要设置interval，因此X轴的type改为value

Documentation - Apache ECharts

xAxis. interval  试一试

number

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。

无法在类目轴中使用。在时间轴（type: 'time'）中需要传时间戳，在对数轴（type: 'log'）中需要传指数值。

欢迎扫码下方二维码关注VX公众号

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/617195