vue 插件 使用 Echarts 建立圖表 （轉）

在後臺管理系統中，圖表是一個很廣泛的元素。目前經常使用的圖標插件有 charts,  Echarts, highcharts。此次將介紹 Echarts 在 Vue 項目中的應用。

 

1、安裝插件

使用 cnpm 安裝 Echarts

cnpm install echarts -S

和以前介紹的 axios 相似，echarts 也不能經過 Vue.use() 進行全局調用

一般是在須要使用圖表的 .vue 文件中直接引入

import echarts from 'echarts'

 

也能夠在 main.js 中引入，而後修改原型鏈

Vue.prototype.$echarts = echarts

而後就能夠全局使用了

let myChart = this.$echarts.init(document.getElementById('myChart'))

 

2、建立圖表

首先須要在 HTML 中建立圖表的容器

 

須要注意的是，圖表的容器必須指定寬高，也就是說 width，height 不能使用百分比，只能用 px

這樣確實不夠靈活，不過咱們能夠用 js 來改變 width 和 height，使圖表容器可以自適應，具體的實現請日後看

 

而後在 mounted 中建立圖表，具體的配置參考官方文檔，這裏再也不贅述

 

3、按需引入

上面引入的 echarts 包含了全部圖表，但有時候咱們只須要一兩個基本圖表，這時候完整的 echarts 就顯得累贅

假如只須要建立一個餅圖，那麼能夠這麼作：

1.  
   // 引入基本模板
2.  
   let echarts = require('echarts/lib/echarts')
3.  
   // 引入餅圖組件
4.  
   require('echarts/lib/chart/pie')
5.  
   // 引入提示框和圖例組件
6.  
   require('echarts/lib/component/tooltip')
7.  
   require('echarts/lib/component/legend')

之因此使用 require 而不是 import，是由於 require 能夠直接從 node_modules 中查找，而 import 必須把路徑寫全

能夠按需引入的模塊列表見 https://github.com/ecomfe/echarts/blob/master/index.js

 

4、適應容器

上面說過，圖表的容器必須固定寬高，這確實是一個比較反人類的設定

爲了解決這個問題，須要給圖表容器外面再加一個容器，而這個外容器的寬高能夠適應頁面。上面的 <div class="charts"> 就是這樣的外容器

1.   let chartBox = document.getElementsByClassName('charts')[0]
2.   let myChart = document.getElementById('myChart')
3.   
4.   // 用於使chart自適應高度和寬度,經過窗體高寬計算容器高寬
5.   function resizeCharts () {
6.  myChart.style.width = chartBox.style.width + 'px'
7.  myChart.style.height = chartBox.style.height + 'px'
8.  }
9.   // 設置容器高寬
10.  resizeCharts()
11.   
12.   let mainChart = echarts.init(myChart)
13.  mainChart.setOption(options)

當頁面加載的時候，將外容器的寬高，賦給圖表容器

但這只是解決了頁面加載時的自適應問題

若是在頁面加載以後，仍須要圖表自適應寬高，就須要用到 echarts 的媒體查詢

轉自 https://blog.csdn.net/bbsyi/article/details/77897780