前几天在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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69

Y轴刻度自适应与固定

如上段代码中注释所示，默认情况下是自适应的，效果如下 
 

若想固定纵轴只需配置min和max值即可

若想分更多刻度可以配置splitNumber属性

 // yAxis: {},      //纵轴自适应
 yAxis: {          //纵轴标尺固定
      type: 'value',
      scale: true,
      name: '销量',
      max: 100,
      min: 0,
      splitNumber:10,
      boundaryGap: [0.2, 0.2]
  },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

效果如下 
 
 
　

---

本文参考博文

JavaScript eChart yAxis 固定值 变化值

echarts官网实例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yuzhibo22/article/details/78040639