????????話說(shuō)最近一直在攻在網(wǎng)上花二十塊大洋買的vue音樂(lè)播放器項(xiàng)目，收獲頗多！對(duì)vue項(xiàng)目整體的流程有了更進(jìn)一步的了解，打算花點(diǎn)空余時(shí)間把這個(gè)項(xiàng)目再擼幾遍，然后轉(zhuǎn)入京東的項(xiàng)目實(shí)戰(zhàn)中。。。
? ????? 實(shí)際工作中一直涉及的是數(shù)據(jù)可視化操作（Echarts、Highcharts），即大量數(shù)據(jù)圖表展示，卻獨(dú)獨(dú)沒(méi)有用到丁點(diǎn)兒的vue知識(shí)，感覺(jué)實(shí)在是讓人憋得心慌，晚上沒(méi)事干脆試驗(yàn)一把，如題：在Vue項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)可視化操作
Echarts ?步驟：
一、安裝插件
? ? ? ? cnpm install echarts -D
注：echarts 也不能通過(guò) Vue.use() 進(jìn)行全局調(diào)用
所以，通常在需要使用圖表的 .vue文件中直接引入
import echarts from 'echarts'
也可以在main.js中引入，然后修改原型鏈
Vue.prototype.$echarts = echarts
這樣在全局中就可以直接使用了
let mychart = this.$echarts.init(document.getElementById('mychart'))
二、創(chuàng)建圖表
? ? ? ? 由于一般情況我們會(huì)在組件中使用，這里我也貼近實(shí)際開發(fā)，舉的例子就是應(yīng)用于組件中
數(shù)據(jù)導(dǎo)入
這樣圖表就可以在頁(yè)面中展示出來(lái)了
問(wèn)題：這里引入的 echarts 包含了所有圖表，但有時(shí)候我們只需要一兩個(gè)基本圖表，這時(shí)候完整的 echarts 就顯得累贅，所以：
二、按需引入
? ??// 引入基本模板letecharts = require('echarts/lib/echarts')
? // 引入餅圖組件require('echarts/lib/chart/pie')
? // 引入提示框和圖例組件require('echarts/lib/component/tooltip')
? require('echarts/lib/component/legend')
可以按需引入的模塊列表見https://github.com/ecomfe/echarts/blob/master/index.js
繼續(xù)引出問(wèn)題：在echarts中圖表寬高如果不寫，那么就相當(dāng)于作死，所以nozuonodie，所以：
三、適應(yīng)容器
let chartBox = document.getElementsByClassName('charts')[0]
let myChart = document.getElementById('myChart')
// 用于使chart自適應(yīng)高度和寬度,通過(guò)窗體高寬計(jì)算容器高寬
function resizeCharts () {
? myChart.style.width = chartBox.style.width + 'px'
? myChart.style.height = chartBox.style.height + 'px'
}
// 設(shè)置容器高寬
resizeCharts()
let mainChart = echarts.init(myChart)
mainChart.setOption(options)
四、擴(kuò)展
可以把這個(gè)案例模塊化，設(shè)計(jì)成一個(gè)可復(fù)用組件，只需傳入id、options既可完成圖表渲染
參考案例：https://www.2cto.com/kf/201707/660054.html
剛好，參考案例中用的是highcharts
