Vue使用echarts資料動態更新，Y軸刻度固定或者自適應

前幾天在Vue項目中使用到了echarts,所以寫個簡單的小Demo 想要實現的效果 資料動態產生（即時改變） 時間點1
時間點2
代碼 檔案（Echarts.vue）

<template>  <div class="echarts">    <i-echarts :option="options"></i-echarts>  </div></template><script>  import IEcharts from 'vue-echarts-v3/src/full.vue'  export default {    name: 'table',    components: {      IEcharts    },    data() {      return {        options: {          title: {            text: 'Timesky'          },          tooltip: {            trigger: 'item'          },          legend: {            data: ['銷量']          },          xAxis: {            name: '商品',            nameLocation: 'start',            nameGap: '50',            boundaryGap: true,            data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']          },          // yAxis: {},      縱軸自適應          yAxis: {          //縱軸尺規固定              type: 'value',              scale: true,              name: '銷量',              max: 100,              min: 0,              boundaryGap: [0.2, 0.2]          },          series: [{            name: '銷量',            type: 'bar',            data: [5, 20, 36, 60, 10, 55]          }]        }      }    },    mounted() {      this.changeData()    },    methods: {      changeData() {        let data = []        for (let i = 0, min = 5, max = 99; i < 6; i++) {          data.push(Math.floor(Math.random() * (max + 1 - min) + min))        }        this.options.series[0].data = data        setTimeout(this.changeData, 2000)      }    }  }</script><style>  .echarts {    width: 800px;    height: 400px;  }</style>

Y軸刻度自適應與固定 如上段代碼中注釋所示，預設情況下是自適應的，效果如下

若想固定縱軸只需配置min和max值即可 若想分更多刻度可以配置splitNumber屬性

 // yAxis: {},      //縱軸自適應 yAxis: {          //縱軸尺規固定      type: 'value',      scale: true,      name: '銷量',      max: 100,      min: 0,      splitNumber:10,      boundaryGap: [0.2, 0.2]  },

效果如下


　 本文參考博文 JavaScript eChart yAxis 固定值 變化值 echarts官網執行個體