Vue Echarts實(shí)現(xiàn)圖表輪播圖以及圖表組件封裝和節(jié)流函數(shù)優(yōu)化講解
一、為什么要優(yōu)雅的使用echarts
為了提高代碼的規(guī)范性、復(fù)用性,vue中最常用的就是將具有某些功能的代碼封裝到一個(gè)插件。如果沒有對(duì)插件進(jìn)行封裝,在后期使用插件的時(shí)候效率會(huì)十分低下也不便于后期對(duì)程序的維護(hù)拓展,在優(yōu)雅的使用echarts時(shí),首先,我們考慮到多個(gè)地方需要用到echarts,就需要封裝一個(gè)組件出來,由于每一個(gè)圖中的屬性均由配置項(xiàng)option進(jìn)行控制,所以我們可以將option選項(xiàng)提取出來,在將來用到圖表的時(shí)候從父組件傳進(jìn)來,父組件需要做的就是為圖標(biāo)提供一個(gè)有大小的盒子,以便于將圖表放進(jìn)盒子內(nèi)。當(dāng)然這只是粗略的想法,具體應(yīng)如何做還要向下繼續(xù)看。接下來的幾個(gè)例子均是由App.vue組件承擔(dān)父組件角色,Mycharts.vue承擔(dān)子組件的角色。

二、最初的表格組件
這種方法也是我們?cè)谏弦黄┛椭薪榻B到的,目的就是為了讓大家畫出來一個(gè)表格體驗(yàn)到畫表格的喜悅感。在實(shí)際使用過程中我們并不這么干,這樣只能一個(gè)組件畫出一個(gè)表格,并且后期維護(hù)非常麻煩。我們首先考慮的就是將option選項(xiàng)提取出來,在父組件用到圖表時(shí)將其傳進(jìn)來然后渲染出表格。
MyCharts.vue
<template>
<div class="hello">
</div>
</template>
<script>
import * as echarts from "echarts"
export default {
name: 'HelloWorld',
mounted() {
this.initOneEcharts();
},
methods: {
initOneEcharts() {
const option = {
color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
title: {
text: "Gradient Stacked Area Chart",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
},
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "Line 1",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(128, 255, 165)",
},
{
offset: 1,
color: "rgb(1, 191, 236)",
},
]),
},
emphasis: {
focus: "series",
},
data: [140, 232, 101, 264, 90, 340, 250],
},
{
name: "Line 2",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(0, 221, 255)",
},
{
offset: 1,
color: "rgb(77, 119, 255)",
},
]),
},
emphasis: {
focus: "series",
},
data: [120, 282, 111, 234, 220, 340, 310],
},
{
name: "Line 3",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 162, 255)",
},
{
offset: 1,
color: "rgb(116, 21, 219)",
},
]),
},
emphasis: {
focus: "series",
},
data: [320, 132, 201, 334, 190, 130, 220],
},
{
name: "Line 4",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 0, 135)",
},
{
offset: 1,
color: "rgb(135, 0, 157)",
},
]),
},
emphasis: {
focus: "series",
},
data: [220, 402, 231, 134, 190, 230, 120],
},
{
name: "Line 5",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 191, 0)",
},
{
offset: 1,
color: "rgb(224, 62, 76)",
},
]),
},
emphasis: {
focus: "series",
},
data: [220, 302, 181, 234, 210, 290, 150],
},
],
};
echarts.init(document.getElementById("app")).setOption(option);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#hello{
width: 1000px;
height: 600px;
}
</style>App.vue
<template>
<div id="app"><HelloWorld/></div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
name: "app",
components:{
HelloWorld
}
};
</script>
<style scoped>
#app{
width: 1000px;
height: 600px;
}
</style>
三、初步的封裝
初步的封裝并沒有考慮太多性能方面的東西,而是將組件提取出來,能夠再父組件中使用起來,以下代碼是通過簡(jiǎn)單的算法實(shí)現(xiàn)了一個(gè)echarts圖例輪播圖
當(dāng)然其中有許多不足,大家只需要體會(huì)以下將其封裝的感覺就好。




MyCharts.vue 封裝好的圖表組件
<template>
<div id="mycharts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
if (this.option) {
this.initOneEcharts();
}
},
data() {
return {
mycharts: null,
};
},
props: {
option: {
Object,
},
},
methods: {
initOneEcharts() {
this.mycharts = echarts.init(document.getElementById("mycharts"));
this.mycharts.setOption(this.option);
},
},
watch: {
option() {
// 不為空的話先銷毀,然后再初始化新的
if (this.mycharts) {
this.mycharts.dispose();
}
this.initOneEcharts();
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#mycharts {
width: 100%;
height: 100%;
}
</style>
App.vue 將數(shù)據(jù)傳向圖表組件,并渲染
<template>
<div id="app">
<div class="charts">
<my-charts :option="option"></my-charts>
</div>
<div class="footer">
<button class="b1" @click="b1">上一個(gè)</button>
<button class="b2" @click="b2">下一個(gè)</button>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import MyCharts from "./components/MyEcharts.vue";
export default {
name: "app",
components: {
MyCharts,
},
data() {
return {
// 指向目前指向的是哪個(gè)圖表
pointer: 0,
option: null,
chartsList: [這里存放option對(duì)象],
};
},
mounted() {
this.option = this.chartsList[0];
},
methods: {
b1() {
console.log("后退!!");
if (this.pointer == 0) {
this.pointer = this.chartsList.length;
}
this.pointer--;
this.option = this.chartsList[this.pointer];
},
b2() {
console.log("前進(jìn)??!", this.chartsList.length + 1, this.pointer);
this.pointer = (this.pointer + 1) % this.chartsList.length;
this.option = this.chartsList[this.pointer];
},
},
};
</script>
<style scoped>
#app {
background-color: #ddd;
text-align: center;
width: 100%;
height: 800px;
}
.charts {
width: 100%;
height: 90%;
/* background-color: blue; */
}
.footer {
margin-top: 20px;
/* background-color: red; */
}
.b1 {
margin: 0 50px;
}
</style>
四、性能優(yōu)化
截止目前,我們的mycharts插件具備的以下功能:
- 數(shù)據(jù)源與展示的模板進(jìn)行了分離
- mycharts插件可以在多個(gè)插件中使用(只需傳入option配置即可)
- 數(shù)據(jù)源發(fā)生改變時(shí)插件可以感知到然后重新渲染模板(如果是內(nèi)部數(shù)據(jù)改變可以在watch中加入deep:true)
看似已經(jīng)齊活了,但是從性能方面來說還有很大的差距:
- 沒有進(jìn)行全局注冊(cè)(哪里用到哪里引入,使用頻繁就需要進(jìn)行全局注冊(cè))
- 窗口大小適配能力差,傳統(tǒng)適配方案效率低下
- option內(nèi)容豐富,聲明在data中性能差需要聲明在外部
于是可以做以下調(diào)整
將封裝好的插件注冊(cè)為全局插件
import MyEcharts from "./components/MyEcharts"
Vue.component("MyEcharts",MyEcharts)
添加窗口改變監(jiān)聽事件
this.mychart.__resize = function(){
chart.resize();
};
setTimeout(() => {
window.addEventListener('resize',this.chart.__resize);
}, 200);
移除窗口改變監(jiān)聽事件
beforeDestroy() {
// 移除窗口改變監(jiān)聽
window.removeEventListener('resize',this.chart.__resize);
}
頻繁的窗口改變會(huì)降低效率(使用節(jié)流函數(shù))
mounted(){
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption(this.option);
// 節(jié)流函數(shù),來自Lodash,這里可以自己寫一個(gè)簡(jiǎn)單點(diǎn)的
// 如果有多個(gè)地方用到,也可以使用引入的方式
function throttle(func, wait, options) {
let time, context, args, result;
let previous = 0;
if (!options) options = {};
let later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
time = null;
func.apply(context, args);
if (!time) context = args = null;
};
let throttled = function() {
let now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
let remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (time) {
clearTimeout(time);
time = null;
}
previous = now;
func.apply(context, args);
if (!time) context = args = null;
} else if (!time && options.trailing !== false) {
time = setTimeout(later, remaining);
}
};
return throttled;
};
var chart = this.chart;
this.chart.__resize = throttle(function(){
chart.resize();
},200);
setTimeout(() => {
window.addEventListener('resize',this.chart.__resize);
}, 200);
},將數(shù)據(jù)源提出去(與vue對(duì)象分離)
<template>
<div id="mycharts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "MyEcharts",
beforeDestroy() {
// 移除窗口改變監(jiān)聽
window.removeEventListener("resize", this.mycharts.resize);
},
data() {
return {
mycharts: null,
};
},
methods: {
//當(dāng)數(shù)據(jù)變化的時(shí)候調(diào)用這個(gè)接口即可
setOption(option) {
if (this.mycharts){
this.mycharts.dispose()
}
this.mycharts = echarts.init(document.getElementById("mycharts"));
this.mycharts.setOption(option);
window.addEventListener("resize", this.mycharts.resize);
},
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#mycharts {
width: 100%;
height: 100%;
}
</style>
修改后完整的代碼如下:
main.js
import Vue from 'vue'
import App from './App.vue'
import * as echarts from "echarts"
// 綁定在vue的原型對(duì)象上
Vue.prototype.$echarts=echarts
import MyEcharts from "./components/MyEcharts"
Vue.component("MyEcharts",MyEcharts)
// 關(guān)閉生產(chǎn)提示
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#root')
App.vue
<template>
<div id="app">
<div class="charts">
<my-echarts ref="chart1" :option="option"></my-echarts>
</div>
<div class="footer">
<button class="b1" @click="b1">上一個(gè)</button>
<button class="b2" @click="b2">下一個(gè)</button>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
let chartsList=[這里存放圖標(biāo)配置項(xiàng)option]
export default {
name: "app",
components:{},
data() {
return {
// 指向目前指向的是哪個(gè)圖表
pointer: 0,
option: null,
};
},
mounted() {
this.$refs.chart1.setOption(chartsList[0])
},
methods: {
b1() {
console.log("后退?。?);
if (this.pointer == 0) {
this.pointer = chartsList.length;
}
this.pointer--;
// this.option = chartsList[this.pointer];
this.$refs.chart1.setOption(chartsList[this.pointer])
},
b2() {
console.log("前進(jìn)??!", chartsList.length + 1, this.pointer);
this.pointer = (this.pointer + 1) % chartsList.length;
// this.option = chartsList[this.pointer];
this.$refs.chart1.setOption(chartsList[this.pointer])
},
},
};
</script>
<style scoped>
#app {
background-color: #ddd;
text-align: center;
width: 100%;
height: 800px;
}
.charts {
width: 100%;
height: 90%;
/* background-color: blue; */
}
.footer {
margin-top: 20px;
/* background-color: red; */
}
.b1 {
margin: 0 50px;
}
</style>
MyEcharts.vue
<template>
<div id="mycharts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "MyEcharts",
beforeDestroy() {
// 移除窗口改變監(jiān)聽
window.removeEventListener("resize", this.mycharts.resize);
},
data() {
return {
mycharts: null,
};
},
methods: {
setOption(option) {
if (this.mycharts){
this.mycharts.dispose()
}
this.mycharts = echarts.init(document.getElementById("mycharts"));
this.mycharts.setOption(option);
window.addEventListener("resize", this.mycharts.resize);
},
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#mycharts {
width: 100%;
height: 100%;
}
</style>
程序到目前為止已經(jīng)該有的都有了但是還是不夠完善,如果大家有什么好的介意或者意見歡迎共同探討。
到此這篇關(guān)于Vue Echarts實(shí)現(xiàn)圖表輪播圖以及圖表組件封裝和節(jié)流函數(shù)優(yōu)化講解的文章就介紹到這了,更多相關(guān)Vue Echarts圖表輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue的el-select綁定的值無法選中el-option問題及解決
這篇文章主要介紹了vue的el-select綁定的值無法選中el-option問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
windows下vue-cli導(dǎo)入bootstrap樣式
這篇文章主要介紹了windows下vue-cli導(dǎo)入bootstrap樣式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
關(guān)于對(duì)keep-alive的理解,使用場(chǎng)景以及存在的問題解讀
這篇文章主要介紹了關(guān)于對(duì)keep-alive的理解,使用場(chǎng)景以及存在的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫
這篇文章主要介紹了?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫,我們通過考慮其功能、工作原理以及如何開始使用它來了解?Vue?Demi,下面我們一起進(jìn)入文章學(xué)起來吧2022-02-02
vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解
這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解,本文大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-09-09
elementui源碼學(xué)習(xí)仿寫一個(gè)el-tooltip示例
本篇文章記錄仿寫一個(gè)el-tooltip組件細(xì)節(jié),從而有助于大家更好理解餓了么ui對(duì)應(yīng)組件具體工作細(xì)節(jié),本文是elementui源碼學(xué)習(xí)仿寫系列的又一篇文章,后續(xù)空閑了會(huì)不斷更新并仿寫其他組件2023-07-07

