Vue Echarts實(shí)現(xiàn)圖表輪播圖以及圖表組件封裝和節(jié)流函數(shù)優(yōu)化講解

更新時(shí)間：2023年01月09日 09:02:15 作者：酷爾。

這篇文章主要介紹了在Vue中優(yōu)雅的使用Echarts實(shí)現(xiàn)圖表輪播圖、Echarts圖表組件封裝、節(jié)流函數(shù)優(yōu)化圖表性能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

一、為什么要優(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: