由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理，也就是用圖表展示，眾所周知echarts是非常強(qiáng)大的插件。一開始想在網(wǎng)上找一個(gè)基于vue封裝好的（懶省事），eg:vue-echarts ，但是他們的類型有限，數(shù)據(jù)大多都是定制好的，我很難在此基礎(chǔ)上進(jìn)行更改（惹不起）。最終還是選擇使用echarts。以下是我使用的一些心得體會(huì)~
我的示例是在vue-cli搭建
安裝echarts依賴?
```
npm install echarts -S
//或者使用淘寶的鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
```
創(chuàng)建圖表
首先需要全局引入
在main.js中
在網(wǎng)上找到的許多案例都是以下的引入方式，但是一直報(bào)錯(cuò)
```
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
```
在this.$echarts.init（）的前一步打印this.$echarts為undefined，因此判定為引入失敗，后續(xù)不斷的嘗試，以下為有效的引入方式
```
const echarts = require('echarts');
Vue.prototype.$echarts = echarts;
```
在Echarts.vue中
```
<div id="myChart" :style="{width: '300px', height: '300px'}"? ref="chart"></div>
```
注意：?
在Echarts.js中
```
export default{
name:'hello',
data(){
return{
msg:'Welcome to Your Vue.js App'
}
},
mounted(){
this.drawLine();
},
methods:{
drawLine(){
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
let myChart=this.$echarts.init(document.getElementById('myChart'));
/**
**也可以使用 let myChart=this.$echarts.init(this.$refs.chart);
*/
// 繪制圖表
myChart.setOption(
{
title:{text:'在Vue中使用echarts'},
tooltip:{},
xAxis:{data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},
yAxis:{},
series:[{name:'銷量',type:'bar',data:[5,20,36,10,10,20]}]});}}}
```
注意：我們要在mounted生命周期函數(shù)中實(shí)例化echarts對(duì)象。因?yàn)槲覀円_保dom元素已經(jīng)掛載到頁(yè)面中
這樣一個(gè)簡(jiǎn)單的圖表就完成了。
假如在一個(gè)大型的項(xiàng)目中，而且數(shù)據(jù)是非常復(fù)雜的情況下，考慮使用組件的形式。
按需引入
由于全局引入會(huì)將所有的echarts圖表打包，導(dǎo)致體積過大
在Echarts.vue文件中
```
// 引入基本模板
letecharts=require('echarts/lib/echarts')
// 引入柱狀圖組件
require('echarts/lib/chart/bar')
// 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
```
注意：使用 require 而不是 import
以組件的形式用echarts
從上邊可以看出，你每次在使用echarts的時(shí)候，都必須要重復(fù)的引入，這樣很不方便
vue作為一個(gè)組件化開發(fā)的框架，我們可以使用組件的方式進(jìn)行集成。每次我們引入組件，進(jìn)行使用，這樣就方便的多。
下面是一個(gè)我自己對(duì)echarts進(jìn)行的一個(gè)簡(jiǎn)單的vue組件的集成。
在echarts中?
子組件：
注意：要給box2具體的寬高
config中是你要生成的圖表的參數(shù)
父組件：
