Vue ECharts X轴 type为value的数据格式 + X轴固定间隔并向上取整十位数 - 附完整示例

 ECharts：一个基于 JavaScript 的开源可视化图表库。

目录

效果

一、介绍

 1、官方文档：Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、在单页面引入 ' echarts '

2、指定容器并设置容器宽高

3、数据处理（关键点）

四、完整示例

tips

xAxis. interval  试一试

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

---

效果

一、介绍

 1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、官方示例

二、准备工作

1、安装依赖包

npm install echarts --save

 2、示例版本 

"echarts": "^5.4.2",

三、使用步骤

1、在单页面引入 ' echarts '

import * as echarts from "echarts";

注：上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。详见官方文档：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

2、指定容器并设置容器宽高

<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公众号