本文主要介紹了vue.js將echarts打包成壹鍵組件的相關內容，分享給大家參考。我們來看看詳細的介紹。
解釋
做項目的時候，為了讓數據顯示更直觀，總是會用到圖表相關的控件。說到圖表控件，當然第壹時間想到的是ECharts這種開源項目，但是使用起來沒有iview和element-ui那麽方便，需要小彎。為了圖的方便起見，ECharts是封裝的。
控制演示
控制用途
概述
基於電子海圖的二次包裝
由數據驅動
有關控件源代碼，請參見src/components/charts。
文件
小道具
屬性
解釋
類型
_id
圖表的唯壹標識。如果id重復，將會報告錯誤。
線
_標題文本
海圖標題
線
_xText
x軸描述
線
_yText
y軸描述
線
_圖表數據
圖表數據
排列
_類型
有三種圖表類型(線形條形圖/線形條形圖/餅圖)。
呼叫示例
& lt圖表
:_ id = " " test charts " "
:_titleText= " "流量統計"
:_ x text = " " category " "
:_yText= " "總訪問量"
:_chartData="chartData "
:_ type = " " Pie " " & gt；& lt/chart & gt；
//樣本測試數據]
實現模式
創建壹個要呈現的dom。
& lt模板& gt
& ltdiv:id = " _ id " class = " chart " & gt；& lt/div & gt；
& lt/template & gt；
繪圖功能
函數drawPie(chartData，id，titleText，xText，yText) {
var chart = echarts . init(document . getelementbyid(id))
var xAxisData = chart data . map(function(item){ return item[0]})
var pieData = []
chartData.forEach((v，I)= & gt；{
pieData.push({
名稱:v[0]，
值:v[1]
})
})
chart.setOption({
標題:{
文本:標題文本，
潛臺詞: ''，
x:“中心”
},
工具提示:{
觸發器:“項目”，
格式化程序:“{ a } & ltbr/>；{b} : {c} ({d}%)"
},
圖例:{
方向:“垂直”，
左:'左'，
數據:xAxisData
},
系列:[
{
名稱:xText，
類型:“餅圖”，
半徑:“55%”，
中心:['50% '，' 60%']，
數據:pieData，
項目樣式:{
重點:{
暗影模糊:10，
shadowOffsetX: 0，
陰影顏色:' rgba(0，0，0，0.5)'
}
}
}
]
})
}
當裝載結束且數據源發生變化時重新繪制
觀察:{
_chartData(val){
切換(這個。_type){
案例“LineAndBar”:
drawLineAndBar(val，this。_id，這個。_titleText，這個。_xText，這個。_ yText)；
破裂
案例“LineOrBar”:
drawLineOrBar(val，這個。_id，這個。_titleText，這個。_xText，這個。_ yText)；
破裂
案例“餡餅”:
drawPie(瓦爾，這個。_id，這個。_titleText，這個。_xText，這個。_ yText)；
破裂
默認值:
drawLineAndBar(val，this。_id，這個。_titleText，這個。_xText，這個。_ yText)；
破裂
}
}
},
已安裝(){
切換(這個。_type){
案例“LineAndBar”:
drawLineAndBar(這個。_chartData，這個。_id，這個。_titleText，這個。_xText，這個。_ yText)；
破裂
案例“LineOrBar”:
drawLineOrBar(這個。_chartData，這個。_id，這個。_titleText，這個。_xText，這個。_ yText)；
破裂
案例“餡餅”:
drawPie(這個。_chartData，這個。_id，這個。_titleText，這個。_xText，這個。_ yText)；
破裂
默認值:
drawLineAndBar(這個。_chartData，這個。_id，這個。_titleText，這個。_xText，這個。_ yText)；
破裂
}
}
摘要