實際工作中壹直涉及的是數據可視化操作（Echarts、Highcharts），即大量數據圖表展示，卻獨獨沒有用到丁點兒的vue知識，感覺實在是讓人憋得心慌，晚上沒事幹脆試驗壹把，如題：在Vue項目中實現數據可視化操作
Echarts ?步驟：
壹、安裝插件
cnpm install echarts -D
註：echarts 也不能通過 Vue.use() 進行全局調用
所以，通常在需要使用圖表的 .vue文件中直接引入
import echarts from 'echarts'
也可以在main.js中引入，然後修改原型鏈
Vue.prototype.$echarts = echarts
這樣在全局中就可以直接使用了
let mychart = this.$echarts.init(document.getElementById('mychart'))
二、創建圖表
由於壹般情況我們會在組件中使用，這裏我也貼近實際開發，舉的例子就是應用於組件中
數據導入
這樣圖表就可以在頁面中展示出來了
問題：這裏引入的 echarts 包含了所有圖表，但有時候我們只需要壹兩個基本圖表，這時候完整的 echarts 就顯得累贅，所以：
二、按需引入
// 引入基本模板letecharts = require('echarts/lib/echarts')
? // 引入餅圖組件require('echarts/lib/chart/pie')
? // 引入提示框和圖例組件require('echarts/lib/component/tooltip')
? require('echarts/lib/component/legend')
可以按需引入的模塊列表見 /ecomfe/echarts/blob/master/index.js
繼續引出問題：在echarts中圖表寬高如果不寫，那麽就相當於作死，所以nozuonodie，所以：
三、適應容器
let chartBox = document.getElementsByClassName('charts')[0]
let myChart = document.getElementById('myChart')
// 用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬
function resizeCharts () {
? myChart.style.width = chartBox.style.width + 'px'
? myChart.style.height = chartBox.style.height + 'px'
}
// 設置容器高寬
resizeCharts()
let mainChart = echarts.init(myChart)
mainChart.setOption(options)
四、擴展
可以把這個案例模塊化，設計成壹個可復用組件，只需傳入id、options既可完成圖表渲染
參考案例：/kf/201707/660054.html
剛好，參考案例中用的是highcharts