<meta charset="utf-8">
由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理颁湖，也就是用圖表展示，眾所周知echarts是非常強(qiáng)大的插件例隆。一開(kāi)始想在網(wǎng)上找一個(gè)基于vue封裝好的（懶省事）甥捺，eg:vue-echarts ，但是拉取下來(lái)發(fā)現(xiàn)镀层，跟項(xiàng)目中使用的類(lèi)型有點(diǎn)偏差镰禾，而且他們的數(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中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在Echarts.vue中
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
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'))
// 繪制圖表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
注意：我們要在mounted生命周期函數(shù)中實(shí)例化echarts對(duì)象备韧。因?yàn)槲覀円_保dom元素已經(jīng)掛載到頁(yè)面中
這樣一個(gè)簡(jiǎn)單的圖表就完成了，是不是覺(jué)得很簡(jiǎn)單痪枫？假如在一個(gè)大型的項(xiàng)目中织堂，而且數(shù)據(jù)是非常復(fù)雜的？那么該如何操作奶陈？
按需引入
由于全局引入會(huì)將所有的echarts圖表打包易阳，導(dǎo)致體積過(guò)大
在Echarts.vue文件中
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱狀圖組件
require('echarts/lib/chart/bar')
// 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
使用 require 而不是 import
基于前面的疑問(wèn)，加上實(shí)際運(yùn)用到項(xiàng)目中遇到的一些問(wèn)題吃粒，我思考使用組件的形式潦俺。
以組件的形式用echarts
從上邊可以看出，你每次在使用echarts的時(shí)候，都必須要重復(fù)的引入黑竞，這樣很不方便
vue作為一個(gè)組件化開(kāi)發(fā)的框架捕发，我們可以使用組件的方式進(jìn)行集成。每次我們引入組件很魂，進(jìn)行使用扎酷，這樣就方便的多。
下面是一個(gè)我自己對(duì)echarts進(jìn)行的一個(gè)簡(jiǎn)單的vue組件的集成遏匆。
在echarts中
子組件：
props部分是我接收到的參數(shù)法挨，父組件獲取數(shù)據(jù)分發(fā)，data是父組件分發(fā)給echarts的數(shù)據(jù)源幅聘。
父組件：
如果在大型的項(xiàng)目凡纳，而且圖表又非常的多，那么vuex少不了帝蒿。如果把數(shù)據(jù)集中存儲(chǔ)到了vuex中荐糜，echarts組件再?gòu)膙uex中獲取數(shù)據(jù)，我們也能隨時(shí)保存獲取的結(jié)果葛超，對(duì)這些數(shù)據(jù)可以添加收藏也可以加入緩存中暴氏，下次再請(qǐng)求可以先從緩存調(diào)用。接下來(lái)會(huì)繼續(xù)分享vuex的使用~~~
