vue項目中封裝echarts的優(yōu)雅方式分享
更新時間：2022年03月19日 14:08:14 作者：liyoro2
在實際項目開發(fā)中,我們會經(jīng)常與圖表打交道,比如?訂單數(shù)量表、商品銷量表、會員數(shù)量表等等,它可能是以折線圖、柱狀圖、餅狀圖等等的方式來展現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue項目中封裝echarts的優(yōu)雅方式的相關(guān)資料,需要的朋友可以參考下
場景
- 1、Echarts使用時，都需要寫一堆的option，如果每個圖表都要寫一個，一個文件里面的代碼量是很大的
- 2、不方便復(fù)用
需求
- 1、方便復(fù)用
- 2、展示類的圖表，數(shù)據(jù)與業(yè)務(wù)、樣式分離，只傳數(shù)據(jù)就行
- 3、項目里需要用到的圖表會有多個，實現(xiàn)少代碼自動化導(dǎo)入，不需要一個個import
- 4、本人圖表用在大屏數(shù)據(jù)可視化的情況比較多，采用的是等比縮放的方式，所以圖表也能根據(jù)界面縮放自動縮放，不需要手動調(diào)用
- 5、圖表可配置
代碼總覽
涉及的文件如下（具體參考代碼）：
|-- src
|-- components
|-- chart
|-- index.vue // 圖表單文件組件，供界面調(diào)用
|-- index.js // 實現(xiàn)自動化導(dǎo)入options里的圖表option
|-- options // 存放各種圖表的option
|-- bar // 隨便一例子
|-- index.js
|-- views
|-- chartTest // 實例所在
|-- index.vue
|-- index.scss
|-- index.js
|-- main.js // 全局引入echarts圖表實現(xiàn)
components--chart--index.vue
這里定義了一個名為ChartView 的組件，開放了4個可配置的屬性：寬度width，高度height， 是否自動調(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'
// 注冊必須的組件
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)入，這樣就不需要在代碼里一個個import了，特別是圖表多的時候。
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官方示例上隨便選了個示例
在options下新建一個bar目錄，bar目錄下新建一個index.js文件。（個人習(xí)慣而已，喜歡每個圖表都獨立文件夾存放。不喜歡這種方式的，可以不放目錄，直接js文件，但是components--chart--index.js要對應(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方法是可以傳參的，具體使用的時候，圖表所需要配置的屬性，如：data數(shù)據(jù)、圖表顏色......等都可以作為參數(shù)傳。
main.js
這里全局引入下封裝的Echarts組件，方便界面調(diào)用。（至于單個引用的方式，就不必多說了）
具體代碼如下：
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: {}
}效果如下
可以嘗試拖動瀏覽器的大小，可以看到，圖表也是隨著瀏覽器的拖動自動縮放的。
代碼
按代碼總覽的目錄去代碼里找著看就行了。
總結(jié)
Echarts用到的各種圖表，基本上都可以在Echarts官方示例和Echarts可視化作品分享（已停服）上找到。
以上，封裝了chart組件，按照上述方式，把圖表的option配置和相關(guān)處理都放options文件夾下面，調(diào)用圖表時傳對應(yīng)的option，也就幾行代碼的事情，算是比較方便了。
chart組件很方便復(fù)用的，直接就可以使用了。
補充
評論里說想動態(tài)修改option里面的屬性，稍微做了個例子，動態(tài)修改pie圖表的data和color屬性，這個是直接生產(chǎn)就可以使用的例子了，直接參考代碼就行了，不詳細說了。想修改什么屬性，直接傳參就行。傳具體參數(shù)可以，想修改的屬性多了就把參數(shù)封裝成一個json傳也可以。懂得在封裝的option里面靈活使用就行。
以下是新增的參考代碼
|-- src
|-- components
|-- chart
|-- options // 存放各種圖表的option
|-- pie // pie例子
|-- index.js
|-- views
|-- chartTest // 實例所在
|-- index.vue
|-- index.scss
|-- index.js代碼使用都是直接一行調(diào)用的
this.chartOpt2 = this.$eChartFn.getPieChart([100, 23, 43, 65], ['#36CBCB', '#FAD337', '#F2637B', '#975FE4'])
效果如下：
補充2：圖表高亮輪詢，dispatchAction使用
效果圖
使用方法
加上:play-highlight="true"屬性就行
<chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" height="100%" /> 復(fù)制代碼
主要實現(xiàn)的代碼在如下文件的playHighlightAction方法里面，參考的echarts 餅圖調(diào)用高亮示例 dispatchAction（見文末）實現(xiàn)的。只是簡單的高亮輪詢，具體各種實現(xiàn)就自己看文檔調(diào)樣式了。
|-- src
|-- components
|-- chart
|-- index.js // 實現(xiàn)自動化導(dǎo)入options里的圖表option附：echarts 餅圖調(diào)用高亮示例 dispatchAction
<!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄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}vvxyksv9kd%'
},
legend:{
orient:'vertical', //圖例列表的布局朝向。'horizontal''vertical'
left:'left',
data:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜素引擎']
},
series:[
{
name:'訪問來源',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[
{value:335,name:'直接訪問'},
{value:310,name:'郵件營銷'},
{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>
補充3：封裝echarts地圖，姐妹篇
vue2項目中封裝echarts地圖比較優(yōu)雅的方式
總結(jié)
到此這篇關(guān)于vue項目中封裝echarts的優(yōu)雅方式的文章就介紹到這了,更多相關(guān)vue封裝echarts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue解決ajax跨域的問題，跨域請求：是指協(xié)議名、主機名、端口號三者有任何一個不一樣，而且跨域請求是請求發(fā)出去了，服務(wù)器接收并返回了結(jié)果，只是瀏覽器沒有接收響應(yīng)結(jié)果。感興趣的同學(xué)可以參考閱讀2023-04-04
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)導(dǎo)出word文檔（包括圖片）,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了vue雙向綁定原理及實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了解決nuxt 自定義全局方法,全局屬性,全局變量的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue3.0在組件外使用VueI18n的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了詳解mpvue開發(fā)小程序小總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要給大家介紹了關(guān)于vue子組件獲取到它父組件數(shù)據(jù)的4種方法,對于vue來說組件之間的消息傳遞是非常重要的,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了使用github部署前端vue項目過程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家詳細介紹了VUE遞歸樹形實現(xiàn)多級列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)上傳圖片添加水印，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09