vue項(xiàng)目中封裝echarts的優(yōu)雅方式分享
場(chǎng)景
- 1、Echarts使用時(shí)，都需要寫一堆的option，如果每個(gè)圖表都要寫一個(gè)，一個(gè)文件里面的代碼量是很大的
- 2、不方便復(fù)用
需求
- 1、方便復(fù)用
- 2、展示類的圖表，數(shù)據(jù)與業(yè)務(wù)、樣式分離，只傳數(shù)據(jù)就行
- 3、項(xiàng)目里需要用到的圖表會(huì)有多個(gè)，實(shí)現(xiàn)少代碼自動(dòng)化導(dǎo)入，不需要一個(gè)個(gè)import
- 4、本人圖表用在大屏數(shù)據(jù)可視化的情況比較多，采用的是等比縮放的方式，所以圖表也能根據(jù)界面縮放自動(dòng)縮放，不需要手動(dòng)調(diào)用
- 5、圖表可配置
代碼總覽
涉及的文件如下（具體參考代碼）：
|-- src
|-- components
|-- chart
|-- index.vue // 圖表單文件組件，供界面調(diào)用
|-- index.js // 實(shí)現(xiàn)自動(dòng)化導(dǎo)入options里的圖表option
|-- options // 存放各種圖表的option
|-- bar // 隨便一例子
|-- index.js
|-- views
|-- chartTest // 實(shí)例所在
|-- index.vue
|-- index.scss
|-- index.js
|-- main.js // 全局引入echarts圖表實(shí)現(xiàn)
components--chart--index.vue
這里定義了一個(gè)名為ChartView 的組件，開(kāi)放了4個(gè)可配置的屬性：寬度width，高度height， 是否自動(dòng)調(diào)整大小autoResize（默認(rèn)是）， 圖表的配置chartOption。
這里默認(rèn)用Canvas 渲染圖表了，也可以用SVG的，自選吧
具體代碼如下
<template>
<div class="chart">
<div ref="chart" :style="{ height: height, width: width }" />
</div>
</template>
<script>
// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core'
// 引入柱狀圖圖表，圖表后綴都為 Chart
import {
BarChart
} from 'echarts/charts'
// 引入提示框，標(biāo)題，直角坐標(biāo)系組件，組件后綴都為 Component
import {
TitleComponent,
TooltipComponent,
GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import {
CanvasRenderer
} from 'echarts/renderers'
// 注冊(cè)必須的組件
echarts.use(
[TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
)
export default {
name: 'ChartView',
props: {
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartOption: {
type: Object,
required: true
},
type: {
type: String,
default: 'canvas'
}
},
data() {
return {
chart: null
}
},
watch: {
chartOption: {
deep: true,
handler(newVal) {
this.setOptions(newVal)
}
}
},
mounted() {
this.initChart()
if (this.autoResize) {
window.addEventListener('resize', this.resizeHandler)
}
},
beforeDestroy() {
if (!this.chart) {
return
}
if (this.autoResize) {
window.removeEventListener('resize', this.resizeHandler)
}
this.chart.dispose()
this.chart = null
},
methods: {
resizeHandler() {
this.chart.resize()
},
initChart() {
this.chart = echarts.init(this.$refs.chart, '', {
renderer: this.type
})
this.chart.setOption(this.chartOption)
this.chart.on('click', this.handleClick)
},
handleClick(params) {
this.$emit('click', params)
},
setOptions(option) {
this.clearChart()
this.resizeHandler()
if (this.chart) {
this.chart.setOption(option)
}
},
refresh() {
this.setOptions(this.chartOption)
},
clearChart() {
this.chart && this.chart.clear()
}
}
}
</script>components--chart--index.js
這里主要利用require.context，把options里面定義的圖表遍歷導(dǎo)入，這樣就不需要在代碼里一個(gè)個(gè)import了，特別是圖表多的時(shí)候。
const modulesFiles = require.context('./options', true, /index.js$/)
let modules = {}
modulesFiles.keys().forEach(item => {
modules = Object.assign({}, modules, modulesFiles(item).default)
})
export default modulescomponents--chart--options
這里展示下如何封裝自己想要的圖表
在Echarts官方示例上隨便選了個(gè)示例
在options下新建一個(gè)bar目錄，bar目錄下新建一個(gè)index.js文件。（個(gè)人習(xí)慣而已，喜歡每個(gè)圖表都獨(dú)立文件夾存放。不喜歡這種方式的，可以不放目錄，直接js文件，但是components--chart--index.js要對(duì)應(yīng)修改下）
直接復(fù)制示例的option代碼
index.js具體代碼如下
const testBar = (data) => {
const defaultConfig = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
}
const opt = Object.assign({}, defaultConfig)
return opt
}
export default {
testBar
}testBar方法是可以傳參的，具體使用的時(shí)候，圖表所需要配置的屬性，如：data數(shù)據(jù)、圖表顏色......等都可以作為參數(shù)傳。
main.js
這里全局引入下封裝的Echarts組件，方便界面調(diào)用。（至于單個(gè)引用的方式，就不必多說(shuō)了）
具體代碼如下：
import eChartFn from '@/components/chart/index.js' import ChartPanel from '@/components/chart/index.vue' Vue.component(ChartPanel.name, ChartPanel) Vue.prototype.$eChartFn = eChartFn
chartTest
這里展示下如何調(diào)用封裝的bar圖表，主要代碼如下
index.vue
<chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" height="100%" />
index.js
export default {
name: 'chartTestView',
data() {
return {
chartOpt: {}
}
},
mounted() {},
created() {
this.chartOpt = this.$eChartFn.testBar()
},
methods: {
},
watch: {}
}效果如下
可以嘗試拖動(dòng)瀏覽器的大小，可以看到，圖表也是隨著瀏覽器的拖動(dòng)自動(dòng)縮放的。
代碼
按代碼總覽的目錄去代碼里找著看就行了。
總結(jié)
Echarts用到的各種圖表，基本上都可以在Echarts官方示例和Echarts可視化作品分享（已停服）上找到。
以上，封裝了chart組件，按照上述方式，把圖表的option配置和相關(guān)處理都放options文件夾下面，調(diào)用圖表時(shí)傳對(duì)應(yīng)的option，也就幾行代碼的事情，算是比較方便了。
chart組件很方便復(fù)用的，直接就可以使用了。
補(bǔ)充
評(píng)論里說(shuō)想動(dòng)態(tài)修改option里面的屬性，稍微做了個(gè)例子，動(dòng)態(tài)修改pie圖表的data和color屬性，這個(gè)是直接生產(chǎn)就可以使用的例子了，直接參考代碼就行了，不詳細(xì)說(shuō)了。想修改什么屬性，直接傳參就行。傳具體參數(shù)可以，想修改的屬性多了就把參數(shù)封裝成一個(gè)json傳也可以。懂得在封裝的option里面靈活使用就行。
以下是新增的參考代碼
|-- src
|-- components
|-- chart
|-- options // 存放各種圖表的option
|-- pie // pie例子
|-- index.js
|-- views
|-- chartTest // 實(shí)例所在
|-- index.vue
|-- index.scss
|-- index.js代碼使用都是直接一行調(diào)用的
this.chartOpt2 = this.$eChartFn.getPieChart([100, 23, 43, 65], ['#36CBCB', '#FAD337', '#F2637B', '#975FE4'])
效果如下：
補(bǔ)充2：圖表高亮輪詢，dispatchAction使用
效果圖
使用方法
加上:play-highlight="true"屬性就行
<chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" height="100%" /> 復(fù)制代碼
主要實(shí)現(xiàn)的代碼在如下文件的playHighlightAction方法里面，參考的echarts 餅圖調(diào)用高亮示例 dispatchAction（見(jiàn)文末）實(shí)現(xiàn)的。只是簡(jiǎn)單的高亮輪詢，具體各種實(shí)現(xiàn)就自己看文檔調(diào)樣式了。
|-- src
|-- components
|-- chart
|-- index.js // 實(shí)現(xiàn)自動(dòng)化導(dǎo)入options里的圖表option附：echarts 餅圖調(diào)用高亮示例 dispatchAction
<!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var app = {};
option = {
title:{
text:'餅圖程序調(diào)用高亮示例',
left:'center'
},
tooltip:{
trigger:'item',
formatter:'{a}
:{c}wppm3vysvbp%'
},
legend:{
orient:'vertical', //圖例列表的布局朝向。'horizontal''vertical'
left:'left',
data:['直接訪問(wèn)','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告','搜素引擎']
},
series:[
{
name:'訪問(wèn)來(lái)源',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[
{value:335,name:'直接訪問(wèn)'},
{value:310,name:'郵件營(yíng)銷'},
{value:234,name:'聯(lián)盟廣告'},
{value:135,name:'視頻廣告'},
{value:1548,name:'搜索引擎'},
],
emphasis:{
itemStyle:{
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
}
}
}
]
};
app.currentIndex = -1;
setInterval(() => {
var dataLen = option.series[0].data.length;
//取消之前高亮的圖形
myChart.dispatchAction({
type:'downplay',
seriesIndex:0,
dataIndex:app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//高亮當(dāng)前圖形
myChart.dispatchAction({
type:'highlight',
seriesIndex:0,
dataIndex:app.currentIndex
});
//顯示tooltip
myChart.dispatchAction({
type:'showTip',
seriesIndex:0,
dataIndex:app.currentIndex
})
}, 1000);
option && myChart.setOption(option);
</script>
補(bǔ)充3：封裝echarts地圖，姐妹篇
vue2項(xiàng)目中封裝echarts地圖比較優(yōu)雅的方式
總結(jié)
到此這篇關(guān)于vue項(xiàng)目中封裝echarts的優(yōu)雅方式的文章就介紹到這了,更多相關(guān)vue封裝echarts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3?vite配置css?的sourceMap及文件引用配置別名的過(guò)程
這篇文章主要介紹了Vue3 vite配置css的sourceMap,及文件引用配置別名的過(guò)程，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
Vue如何實(shí)現(xiàn)監(jiān)聽(tīng)組件原生事件
這篇文章主要介紹了Vue如何實(shí)現(xiàn)監(jiān)聽(tīng)組件原生事件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue.js開(kāi)發(fā)環(huán)境的搭建教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了用Vue.js遞歸組件構(gòu)建一個(gè)可折疊的樹(shù)形菜單的教學(xué)內(nèi)容，有興趣的朋友跟著學(xué)習(xí)下。2017-12-12
這篇文章主要介紹了ElementUI radio組件選中小改造，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue時(shí)間選擇控件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue前端框架—Mint UI詳解（更適用于移動(dòng)端）
這篇文章主要介紹了vue前端框架—Mint UI的詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)帶小數(shù)點(diǎn)的星星評(píng)分
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶小數(shù)點(diǎn)的星星評(píng)分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue工程師必會(huì)封裝的埋點(diǎn)指令思路知識(shí)總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue工程師必會(huì)封裝的埋點(diǎn)指令思路知識(shí),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue獲取參數(shù)的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08