欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在Vue3項目中使用如何echarts問題

 更新時間:2023年05月10日 10:37:22   作者:dangfulin  
這篇文章主要介紹了在Vue3項目中使用如何echarts問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

記得第一次使用 echarts 還是2019年的時候,那時做的一個物聯(lián)網(wǎng)項目云平臺的前端需要一些數(shù)據(jù)可視化功能,經(jīng)過一些對比后就使用了 echarts 。上手非常快,專業(yè)性也足夠,因此在后來其他的一些項目中就多次用到它。

echarts 是百度基于 JavaScript 實現(xiàn)的一個開源可視化圖表庫,主要特點就是可視化類型豐富、動畫炫酷、使用簡單。

這個教程就簡單演示如何在 Vue 3 項目中使用 echarts。

一,創(chuàng)建 Vue3 項目并安裝 echarts

npm 創(chuàng)建項目:

npm create useecharts

安裝 echarts:

npm install echarts --save

二,創(chuàng)建數(shù)據(jù)可視化組件

通??蓙碚f,我會把數(shù)據(jù)可視化功能放到單獨的組件中來實現(xiàn):單獨獲取數(shù)據(jù),單獨展示數(shù)據(jù),只從父組件獲取必要的控制字段。

(一)組件內(nèi)容

創(chuàng)建一個組件 BarGraph:

src/components/BarGraph.vue:
<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {onMounted, onUnmounted} from "vue";
export default {
  name: "App",
  props: ["width", "height"],
  setup() {
    let myEcharts = echarts;
    onMounted(() => {
      initChart();
    });
    onUnmounted(() => {
      myEcharts.dispose;
    });
    function initChart() {
      let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      chart.setOption({
        title: {
          text: "2021年各月份銷售量(單位:件)",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
          ]
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [
              606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
            ],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              }
            }
          }
        ]
      });
      window.onresize = function () {
        chart.resize();
      };
    }
    return {
      initChart
    };
  }
};
</script>

(二)使用組件

在父組件中使用上面那個子組件時,只需動態(tài)綁定控制數(shù)據(jù)窗口大小的控制值:

src/App.vue:
<template>
  <bar-graph :width="'900px'" :height="'600px'"></bar-graph>
</template>
<script>
import BarGraph from "@/components/BarGraph";
export default {
  name: "App",
  components: {
    BarGraph
  },
}
</script>
<style>
#app {
}
</style>

效果如下:

(三)程序解釋

1,導(dǎo)入 echarts

import * as echarts from "echarts";

通常來說,在哪里實現(xiàn)就在哪里導(dǎo)入,而不是在 main.js 里面全局引入。

2,接收 props

通過 props 接收父組件傳入的控制值,這種不寫死的方式增加了數(shù)據(jù)展示大小的靈活性,

3,初始化 echarts

首先以調(diào)用 echarts.init() 的方式創(chuàng)建一個 echarts 實例。

這里我們指定了實例容器以及所用的主題。

然后調(diào)用 echartsInstance.setOption() 來設(shè)置圖表實例的配置項以及數(shù)據(jù),詳見配置項手冊。

1,通過 title 設(shè)置了圖表的標(biāo)題。

2,通過 xAxis 設(shè)置了直角坐標(biāo)系中的 x 軸。

3,通過 yAxis 設(shè)置了直角坐標(biāo)系中的 y 軸。

4,通過 tooltip 設(shè)置了提示框組件。

5,通過在 series 內(nèi)部的 type 設(shè)置圖例為柱狀圖,data 填充數(shù)據(jù)內(nèi)容。

初始化工作是在組件的 setup 中完成的。

<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
  </div>
</template>
<script>
// 導(dǎo)入 ECharts
import * as echarts from "echarts";
import {onMounted, onUnmounted} from "vue";
export default {
  name: "App",
  props: ["width", "height"],
  setup() {
    let myEcharts = echarts;
    // 掛載時初始化圖表
    onMounted(() => {
      initChart();
    });
    // 卸載時銷毀圖表
    onUnmounted(() => {
      // 銷毀圖表
      myEcharts.dispose;
    });
    function initChart() {
      // 基于準(zhǔn)備好的dom,初始化echarts實例
      let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      chart.setOption({
        // 設(shè)置圖表的標(biāo)題
        title: {
          // 設(shè)置標(biāo)題文本
          text: "2021年各月份銷售量(單位:件)",
          // title 組件離容器左側(cè)的距離
          left: "center",
        },
        // 設(shè)置圖表的 X 軸
        xAxis: {
          // 數(shù)據(jù)類型為離散的類目數(shù)據(jù)
          type: "category",
          // 設(shè)置 X 軸數(shù)據(jù)
          data: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
          ]
        },
        // 設(shè)置提示框組件
        tooltip: {
          // 設(shè)置提示框的觸發(fā)條件
          trigger: "axis"
        },
        // 設(shè)置圖表的 Y 軸
        yAxis: {
          // 數(shù)據(jù)類型為連續(xù)的數(shù)值數(shù)據(jù)
          type: "value"
        },
        // 設(shè)置圖表的圖例
        series: [
          {
            // 圖例中要展示的數(shù)據(jù)
            data: [
              606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
            ],
            // 設(shè)置圖表的類型為折線圖
            type: "line",
            // 平滑曲線
            smooth: true,
            // 在頂部顯示數(shù)據(jù)
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              }
            }
          }
        ]
      });
      // 大小自適應(yīng)窗口大小變化
      window.onresize = function () {
        // 重置容器高寬
        chart.resize();
      };
    }
    return {
      initChart
    };
  }
};
</script>

三,響應(yīng)式刷新

data property 中的數(shù)據(jù)本身就是響應(yīng)式的,但有時其中數(shù)據(jù)發(fā)生變化時,圖表并不跟隨變化。

通常來說,data property 中要展示的數(shù)據(jù)都是從后臺服務(wù)器中獲取的,而這些數(shù)據(jù)通常是不斷變化的,因此需要為圖表添加一個響應(yīng)式刷新的功能,

最簡單的方式,就是使用 watch property 監(jiān)聽數(shù)據(jù)源變化,Echarts是數(shù)據(jù)驅(qū)動的,這意味著只要我們重新設(shè)置數(shù)據(jù),圖表就會重新渲染,

<script>
// 導(dǎo)入 ECharts
import * as echarts from "echarts";
export default {
  name: "App",
  props: ["width", "height"],
  data() {
    return {
      // 數(shù)據(jù)源一,從服務(wù)器獲得
      postTitle: [...],
      // 數(shù)據(jù)源二,從服務(wù)器獲得
      postLikes: [...],
      myEcharts: {},
      option: {
        // 設(shè)置圖表的 X 軸
        xAxis: {
          // 數(shù)據(jù)類型為離散的類目數(shù)據(jù)
          type: "category",
          // 設(shè)置 X 軸數(shù)據(jù)
          data: this.postTitle,
        },
        // 設(shè)置圖表的 Y 軸
        yAxis: {
          // 數(shù)據(jù)類型為連續(xù)的數(shù)值數(shù)據(jù)
          type: "value",
        },
        // 設(shè)置圖表的圖例
        series: [
          {
            // 圖例中要展示的數(shù)據(jù)
            data: this.postLikes,
            // 設(shè)置圖表的類型為柱狀圖
            type: "bar",
          }
        ]
      },
    }
  },
  ...
  watch: {
    // 如果 postTitle 發(fā)生變化,則重新渲染圖表
    postTitle: {
      handler: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.option.xAxis.data = this.postTitle;
          // 橫坐標(biāo)變化,縱坐標(biāo)也相應(yīng)變化
          this.option.series[0].data = this.postLikes;
          // 重新渲染圖表
          this.myEcharts.setOption(this.option);
        }
      },
      deep: true
    },
    postLikes: {
      handler: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.option.series[0].data = this.postLikes;
          this.myEcharts.setOption(this.option);
        }
      },
      deep: true
    }
  }
};
</script>

更進一步,對于有實時性要求的數(shù)據(jù),比如物聯(lián)網(wǎng)傳感器數(shù)據(jù),自然要實時動態(tài)刷新才行。

有兩種方法:

  • 前端定時向后端請求數(shù)據(jù)。
  • 后端通過長連接定時向前端發(fā)送數(shù)據(jù)。

這里簡單說說如何使用第一種方法。說來也簡單,就是使用定時器周期性請求數(shù)據(jù)。

只不過有一個小坑坑(如果明白Echarts是數(shù)據(jù)驅(qū)動的,就不算):不正確地填充數(shù)據(jù)將導(dǎo)致數(shù)據(jù)堆疊,比如:

只需要在刷新數(shù)據(jù)之前清空數(shù)據(jù)源和圖表中的 data 就行。

更多功能可擴展

1.多 X 軸軸切換:

2.數(shù)據(jù)區(qū)域縮放:

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配

    詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配

    這篇文章主要介紹了詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Vue?監(jiān)視屬性之天氣案例實現(xiàn)

    Vue?監(jiān)視屬性之天氣案例實現(xiàn)

    這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實現(xiàn),文章以天氣為例展開介紹Vue?監(jiān)視屬性?的相關(guān)內(nèi)容,需要的小伙伴可以參考一下
    2022-05-05
  • vue+iview的菜單與頁簽的聯(lián)動方式

    vue+iview的菜單與頁簽的聯(lián)動方式

    這篇文章主要介紹了vue+iview的菜單與頁簽的聯(lián)動方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-07-07
  • Vue3中watch的最佳用法

    Vue3中watch的最佳用法

    這篇文章主要給大家介紹了關(guān)于Vue3中watch用法的相關(guān)資料,文章中有詳細的代碼示例,需要的朋友可以參考下
    2023-04-04
  • vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件

    vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件

    這篇文章主要介紹了vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • 在vue項目中優(yōu)雅的使用SVG的方法實例詳解

    在vue項目中優(yōu)雅的使用SVG的方法實例詳解

    本文旨在介紹如何在項目中配置和方便的使用svg圖標(biāo)。本文以vue項目為例給大家介紹在vue項目中優(yōu)雅的使用SVG的方法,需要的朋友參考下吧
    2018-12-12
  • 基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果

    基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果

    在vue項目中,我們通常會使用Axios來與后臺進行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請求時,常常需要在頁面上顯示一個加載框(Loading),然后等數(shù)據(jù)返回后自動將其隱藏,本文介紹了基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果,需要的朋友可以參考下
    2024-03-03
  • 使用vue-cli webpack 快速搭建項目的代碼

    使用vue-cli webpack 快速搭建項目的代碼

    這篇文章主要介紹了vue-cli webpack 快速搭建項目的教程詳解,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-11
  • Vue3配置路由ERROR in [eslint]報錯問題及解決

    Vue3配置路由ERROR in [eslint]報錯問題及解決

    這篇文章主要介紹了Vue3配置路由ERROR in [eslint]報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue+Echarts實現(xiàn)繪制動態(tài)折線圖

    Vue+Echarts實現(xiàn)繪制動態(tài)折線圖

    這篇文章主要為大家詳細介紹了如何利用Vue和Echarts實現(xiàn)繪制動態(tài)折線圖,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-03-03

最新評論