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)

3. 使用 -> .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)注明參考文章地址，非常感謝！！！