前言
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),遼中企業(yè)網(wǎng)站建設(shè),遼中品牌網(wǎng)站建設(shè),網(wǎng)站定制,遼中網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,遼中網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
本文主要給大家介紹了關(guān)于vue.js將echarts封裝為組件一鍵使用的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
說(shuō)明
做項(xiàng)目的時(shí)候?yàn)榱俗寯?shù)據(jù)展示的更加直觀，總會(huì)用到圖表相關(guān)的控件，而說(shuō)到圖表控件第一時(shí)間當(dāng)然想到ECharts這個(gè)開源項(xiàng)目，而它不像iview、element-ui這些組件使用起來(lái)那么便捷，需要繞一個(gè)小彎，為了圖方便于是對(duì)ECharts進(jìn)行了一層封裝
控件演示
控件使用
概要
文檔
props
| 屬性 | 說(shuō)明 | 類型 |
|---|---|---|
| _id | 圖表唯一標(biāo)識(shí)，當(dāng)id重復(fù)將會(huì)報(bào)錯(cuò) | String |
| _titleText | 圖表標(biāo)題 | String |
| _xText | x軸描述 | String |
| _yText | y軸描述 | String |
| _chartData | 圖表數(shù)據(jù) | Array |
| _type | 圖表類型，提供三種(LineAndBar/LineOrBar/Pie) |
調(diào)用示例
//測(cè)試數(shù)據(jù)樣例 [["類別1",10],["類別2",20]]
實(shí)現(xiàn)方式
創(chuàng)建一個(gè)待渲染的dom
繪制函數(shù)
重慶分公司
重慶分公司
function drawPie(chartData,id,titleText,xText,yText) {
var chart = echarts.init(document.getElementById(id))
var xAxisData = chartData.map(function (item) {return item[0]})
var pieData = []
chartData.forEach((v,i)=>{
pieData.push({
name:v[0],
value:v[1]
})
})
chart.setOption({
title : {
text: titleText,
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
: {c} (squ6kqw%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: xAxisData
},
series : [
{
name: xText,
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}掛載結(jié)束、數(shù)據(jù)源改變時(shí)重繪
watch:{
_chartData(val){
switch (this._type){
case "LineAndBar":
drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
break
case "LineOrBar":
drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText);
break
case "Pie":
drawPie(val,this._id,this._titleText,this._xText,this._yText);
break
default:
drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
break
}
}
},
mounted() {
switch (this._type){
case "LineAndBar":
drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
case "LineOrBar":
drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
case "Pie":
drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
default:
drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
}
}總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
