fx67llQuickEcharts
A tool to help you use Echarts quickly!
組件說(shuō)明
- 這本來(lái)是一個(gè)測(cè)試如何發(fā)布Vue組件至npm庫(kù)的測(cè)試項(xiàng)目
- 做完之后發(fā)現(xiàn)很有意思,就稍微完善了一下成為一個(gè)簡(jiǎn)易快速構(gòu)建Echarts圖表的組件
- 基本上消滅了我之前關(guān)于Echarts渲染DOM的一堆冗余代碼
- 功能不多后續(xù)有想法的話再考慮繼續(xù)封裝,github源碼地址在底部,各位自行取用
使用步驟
- 安裝 ->
npm install fx67ll-quick-echarts --save
- 注冊(cè) ->
main.js
import fx67llQuickEcharts from 'fx67ll-quick-echarts'
Vue.use(fx67llQuickEcharts)
- 使用 ->
.vue
,可在 Echarts官網(wǎng) 查詢相關(guān)option配置
// 屬性 chartOption: Echarts option 圖表配置項(xiàng)
// 事件 @nodeClick: 圖表中節(jié)點(diǎn)的點(diǎn)擊事件,返回值 chartParams 當(dāng)前節(jié)點(diǎn)的具體信息
// 事件 @nodeClick: 如果沒(méi)有點(diǎn)擊到節(jié)點(diǎn),返回值為null,可以用來(lái)判斷是否點(diǎn)擊到空白處了
// 方法 setHLByDataIndex(dataIndex):指定圖表節(jié)點(diǎn)高亮的方法,傳入?yún)?shù) dataIndex 需要高亮的節(jié)點(diǎn)下標(biāo)或下標(biāo)數(shù)組,number/number[]
// 方法 setDPByDataIndex(dataIndex):指定圖表節(jié)點(diǎn)取消高亮的方法,傳入?yún)?shù) dataIndex 需要取消高亮的節(jié)點(diǎn)下標(biāo)或下標(biāo)數(shù)組,number/number[]
<quick-echarts ref="qe" :chartOption="chartOption" @nodeClick="nodeClick"></quick-echarts>
methods{
this.$refs.qe.setHLByDataIndex([0, 1]);
this.$refs.qe.setDPByDataIndex([0, 1]);
}
// 返回值 chartParams 的各項(xiàng)屬性詳細(xì)說(shuō)明
{
// 當(dāng)前點(diǎn)擊的圖形元素所屬的組件名稱,
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列類型。值可能為:'line'、'bar'、'pie' 等。當(dāng) componentType 為 'series' 時(shí)有意義。
seriesType: string,
// 系列在傳入的 option.series 中的 index。當(dāng) componentType 為 'series' 時(shí)有意義。
seriesIndex: number,
// 系列名稱。當(dāng) componentType 為 'series' 時(shí)有意義。
seriesName: string,
// 數(shù)據(jù)名,類目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項(xiàng)
data: Object,
// sankey、graph 等圖表同時(shí)含有 nodeData 和 edgeData 兩種 data,
// dataType 的值會(huì)是 'node' 或者 'edge',表示當(dāng)前點(diǎn)擊在 node 還是 edge 上。
// 其他大部分圖表中只有一種 data,dataType 無(wú)意義。
dataType: string,
// 傳入的數(shù)據(jù)值
value: number|Array,
// 數(shù)據(jù)圖形的顏色。當(dāng) componentType 為 'series' 時(shí)有意義。
color: string,
// 用戶自定義的數(shù)據(jù)。只在 graphic component 和自定義系列(custom series)
// 中生效,如果節(jié)點(diǎn)定義上設(shè)置了如:{type: 'circle', info: {some: 123}}。
info: *
}
簡(jiǎn)易示例
<template>
<quick-echarts :chartOption="option" @nodeClick="nodeClick"></quick-echarts>
</template>
<script>
export default {
data() {
return {
option: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
};
},
methods: {
nodeClick(chartParams) {
console.log(chartParams);
}
}
};
</script>
好用之處
- 新手能非常快速的上手Echarts,只需要去echarts官網(wǎng)查找需要的option即可,三步即可使用
- 對(duì)于不需要過(guò)多復(fù)雜操作,僅做展示的圖表,可以直接使用,只需要組裝好需要的option傳入即可
- 封裝了自動(dòng)監(jiān)聽(tīng)數(shù)據(jù)變化,圖表大小變化自動(dòng)適應(yīng),以及監(jiān)聽(tīng)了圖表點(diǎn)擊事件,可用于相關(guān)的聯(lián)動(dòng)交互
不足之處
- 目前只有一個(gè)最基礎(chǔ)的Echarts使用組件,對(duì)于一些復(fù)雜的圖表交互操作和事件監(jiān)聽(tīng)沒(méi)有封裝,未來(lái)會(huì)逐步添加
- 對(duì)于一些特定復(fù)雜樣式?jīng)]有作出封裝,常用的線圖柱圖餅圖會(huì)優(yōu)先做出一定封裝,并允許添加復(fù)合的樣式
- 目前是整體組件引用,后續(xù)會(huì)添加按需加載的支持,提升項(xiàng)目性能
使用版本
Vue2.6 + Echarts5.1
我是 fx67ll.com,如果您發(fā)現(xiàn)本文有什么錯(cuò)誤,歡迎在評(píng)論區(qū)討論指正,感謝您的閱讀!
如果您喜歡這篇文章,歡迎訪問(wèn)我的 本文github倉(cāng)庫(kù)地址,為我點(diǎn)一顆Star,Thanks~ :)
轉(zhuǎn)發(fā)請(qǐng)注明參考文章地址,非常感謝!!!