在Vue中使用echarts
由於在專案中需要對資料進行視覺化處理,也就是用圖表展示,眾所周知echarts是非常強大的外掛。一開始想在網上找一個基於vue封裝好的(懶省事),eg:vue-echarts ,但是拉取下來發現,跟專案中使用的型別有點偏差,而且他們的資料大多都是定製好的,我很難在此基礎上進行更改(惹不起),於是選擇了放棄,最終還是選擇echarts。以下是我使用的一些心得體會~
我的示例是在vue-cli搭建
安裝echarts依賴
npm install echarts -S
或者使用淘寶的映象
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
建立圖表
首先需要全域性引入
在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(){
// 基於準備好的dom,初始化echarts例項
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 繪製圖表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
注意:我們要在mounted生命週期函式中例項化echarts物件。因為我們要確保dom元素已經掛載到頁面中
image.png
這樣一個簡單的圖表就完成了,是不是覺得很簡單?假如在一個大型的專案中,而且資料是非常複雜的?那麼該如何操作?
按需引入
由於全域性引入會將所有的echarts圖表打包,導致體積過大
在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
基於前面的疑問,加上實際運用到專案中遇到的一些問題,我思考使用元件的形式。
以元件的形式用echarts
從上邊可以看出,你每次在使用echarts的時候,都必須要重複的引入,這樣很不方便
vue作為一個元件化開發的框架,我們可以使用元件的方式進行整合。每次我們引入元件,進行使用,這樣就方便的多。
下面是一個我自己對echarts進行的一個簡單的vue元件的整合。
在echarts中
子元件:
image.png
props部分是我接收到的引數,父元件獲取資料分發,data是父元件分發給echarts的資料來源。
父元件:
image.png
如果在大型的專案,而且圖表又非常的多,那麼vuex少不了。如果把資料集中儲存到了vuex中,echarts元件再從vuex中獲取資料,我們也能隨時儲存獲取的結果,對這些資料可以新增收藏也可以加入快取中,下次再請求可以先從快取呼叫。接下來會繼續分享vuex的使用~~~
作者:margery
連結:https://www.jianshu.com/p/cf0a54374419
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。