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 配置项