基于Vue簡(jiǎn)易封裝的快速構(gòu)建Echarts組件 -- fx67llQuickEcharts

fx67llQuickEcharts

A tool to help you use Echarts quickly!

npm

組件說(shuō)明

  1. 這本來(lái)是一個(gè)測(cè)試如何發(fā)布Vue組件至npm庫(kù)的測(cè)試項(xiàng)目
  2. 做完之后發(fā)現(xiàn)很有意思,就稍微完善了一下成為一個(gè)簡(jiǎn)易快速構(gòu)建Echarts圖表的組件
  3. 基本上消滅了我之前關(guān)于Echarts渲染DOM的一堆冗余代碼
  4. 功能不多后續(xù)有想法的話再考慮繼續(xù)封裝,github源碼地址在底部,各位自行取用

使用步驟

  1. 安裝 -> npm install fx67ll-quick-echarts --save
  2. 注冊(cè) -> main.js
import fx67llQuickEcharts from 'fx67ll-quick-echarts'
Vue.use(fx67llQuickEcharts)
  1. 使用 -> .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>

好用之處

  1. 新手能非常快速的上手Echarts,只需要去echarts官網(wǎng)查找需要的option即可,三步即可使用
  2. 對(duì)于不需要過(guò)多復(fù)雜操作,僅做展示的圖表,可以直接使用,只需要組裝好需要的option傳入即可
  3. 封裝了自動(dòng)監(jiān)聽(tīng)數(shù)據(jù)變化,圖表大小變化自動(dòng)適應(yīng),以及監(jiān)聽(tīng)了圖表點(diǎn)擊事件,可用于相關(guān)的聯(lián)動(dòng)交互

不足之處

  1. 目前只有一個(gè)最基礎(chǔ)的Echarts使用組件,對(duì)于一些復(fù)雜的圖表交互操作和事件監(jiān)聽(tīng)沒(méi)有封裝,未來(lái)會(huì)逐步添加
  2. 對(duì)于一些特定復(fù)雜樣式?jīng)]有作出封裝,常用的線圖柱圖餅圖會(huì)優(yōu)先做出一定封裝,并允許添加復(fù)合的樣式
  3. 目前是整體組件引用,后續(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)注明參考文章地址,非常感謝!!!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容