vue中使用echarts

echarts是开源的一个数据可视化的一个重要工具，运行流畅，并且是免费使用！下面是我在vue-cli中使用的一些方式

直接引入

    首先 npm install echarts  --save
   


     然后再main.js中全局引入
       

import Mycharts from '../../sss'

        Vue.use(myCharts)
   **但建议再引用时按需引入。但方便学习没有使用**

/**

• 各种画echarts图表的方法都封装在这里
• 注意：这里echarts没有采用按需引入的方式，只是为了方便学习

*/
myCharts.js

需要先给echarts提供盒子的大小
import echarts from 'echarts'
const install = function(Vue) {
Object.defineProperties(Vue.prototype, {
    
    $chart: {
        get() {
            return {
                //画一条简单的线
                line1: function (id) {
                    this.chart = echarts.init(document.getElementById(id));
                    this.chart.clear();

                    const optionData = {
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line'
                        }]
                    };

                    this.chart.setOption(optionData);
                },
            }
        }
    }
})
export default {
install

}

使用时：

<template>
  <div class="hello">
    <div id="chart1"></div>//指定盒子的宽高。
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  mounted() {
    this.$chart.line1('chart1');
  }
}
</script>

<style scoped>
  #chart1 {
    width: 300px;
    height: 300px;
  }
</style>

当然这只是最简单的使用。需要一点点的积累。关键在于细心参考官方文档。echarts配置项