在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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。