前几天在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官网实例