echarts的使用——vue

在vue的项目开发中，数据的可视化可以用echarts来实现，具体用法如下：

（1）安装echarts，进入项目目录，执行如下命令，安装echarts：

npm install echarts --save-dev

（2）引入echarts，并对相关的横坐标和纵坐标进行赋值，该实例直接写入了app.vue中，具体代码如下：

<template>
  <div id="app">
    <div id="echarts" :style="{height:height,width:width}"></div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      dataX:["周一","周二","周三","周四","周五","周六","周日"],
      dataY:[5, 20, 36, 10, 10, 20, 30]
    }
  },
  props:{
    height: {
      type: String,
      'default': '300px'
    },
    width: {
      type: String,
      'default' :"500px"
    }
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw: function(){
      let echart = this.$echarts.init(document.getElementById('echarts'));
      var option = ({
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          color:['green'],
          data: []
        }]
      });
      for(var i = 0; i < this.dataX.length;i++){
        option.xAxis.data[i] = this.dataX[i];
        option.series[0].data[i] = this.dataY[i];
      }
      echart.setOption(option);
    }
  }
}
</script>

<style lang="scss">
  #echarts{margin:auto;}
</style>

（3）效果图如下：