在Vue3項(xiàng)目中使用如何echarts問(wèn)題
記得第一次使用 echarts 還是2019年的時(shí)候,那時(shí)做的一個(gè)物聯(lián)網(wǎng)項(xiàng)目云平臺(tái)的前端需要一些數(shù)據(jù)可視化功能,經(jīng)過(guò)一些對(duì)比后就使用了 echarts 。上手非??欤瑢I(yè)性也足夠,因此在后來(lái)其他的一些項(xiàng)目中就多次用到它。
echarts 是百度基于 JavaScript 實(shí)現(xiàn)的一個(gè)開(kāi)源可視化圖表庫(kù),主要特點(diǎn)就是可視化類型豐富、動(dòng)畫(huà)炫酷、使用簡(jiǎn)單。
這個(gè)教程就簡(jiǎn)單演示如何在 Vue 3 項(xiàng)目中使用 echarts。
一,創(chuàng)建 Vue3 項(xiàng)目并安裝 echarts
npm 創(chuàng)建項(xiàng)目:
npm create useecharts
安裝 echarts:
npm install echarts --save
二,創(chuàng)建數(shù)據(jù)可視化組件
通常可來(lái)說(shuō),我會(huì)把數(shù)據(jù)可視化功能放到單獨(dú)的組件中來(lái)實(shí)現(xiàn):?jiǎn)为?dú)獲取數(shù)據(jù),單獨(dú)展示數(shù)據(jù),只從父組件獲取必要的控制字段。
(一)組件內(nèi)容
創(chuàng)建一個(gè)組件 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>
(二)使用組件
在父組件中使用上面那個(gè)子組件時(shí),只需動(dòng)態(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";
通常來(lái)說(shuō),在哪里實(shí)現(xiàn)就在哪里導(dǎo)入,而不是在 main.js 里面全局引入。
2,接收 props
通過(guò) props 接收父組件傳入的控制值,這種不寫死的方式增加了數(shù)據(jù)展示大小的靈活性,
3,初始化 echarts
首先以調(diào)用 echarts.init()
的方式創(chuàng)建一個(gè) echarts 實(shí)例。
這里我們指定了實(shí)例容器以及所用的主題。
然后調(diào)用 echartsInstance.setOption()
來(lái)設(shè)置圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù),詳見(jiàn)配置項(xiàng)手冊(cè)。
1,通過(guò) title
設(shè)置了圖表的標(biāo)題。
2,通過(guò) xAxis
設(shè)置了直角坐標(biāo)系中的 x 軸。
3,通過(guò) yAxis
設(shè)置了直角坐標(biāo)系中的 y 軸。
4,通過(guò) tooltip
設(shè)置了提示框組件。
5,通過(guò)在 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; // 掛載時(shí)初始化圖表 onMounted(() => { initChart(); }); // 卸載時(shí)銷毀圖表 onUnmounted(() => { // 銷毀圖表 myEcharts.dispose; }); function initChart() { // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 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í)其中數(shù)據(jù)發(fā)生變化時(shí),圖表并不跟隨變化。
通常來(lái)說(shuō),data
property 中要展示的數(shù)據(jù)都是從后臺(tái)服務(wù)器中獲取的,而這些數(shù)據(jù)通常是不斷變化的,因此需要為圖表添加一個(gè)響應(yīng)式刷新的功能,
最簡(jiǎn)單的方式,就是使用 watch
property 監(jiān)聽(tīng)數(shù)據(jù)源變化,Echarts是數(shù)據(jù)驅(qū)動(dòng)的,這意味著只要我們重新設(shè)置數(shù)據(jù),圖表就會(huì)重新渲染,
<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>
更進(jìn)一步,對(duì)于有實(shí)時(shí)性要求的數(shù)據(jù),比如物聯(lián)網(wǎng)傳感器數(shù)據(jù),自然要實(shí)時(shí)動(dòng)態(tài)刷新才行。
有兩種方法:
- 前端定時(shí)向后端請(qǐng)求數(shù)據(jù)。
- 后端通過(guò)長(zhǎng)連接定時(shí)向前端發(fā)送數(shù)據(jù)。
這里簡(jiǎn)單說(shuō)說(shuō)如何使用第一種方法。說(shuō)來(lái)也簡(jiǎn)單,就是使用定時(shí)器周期性請(qǐng)求數(shù)據(jù)。
只不過(guò)有一個(gè)小坑坑(如果明白Echarts是數(shù)據(jù)驅(qū)動(dòng)的,就不算):不正確地填充數(shù)據(jù)將導(dǎo)致數(shù)據(jù)堆疊,比如:
只需要在刷新數(shù)據(jù)之前清空數(shù)據(jù)源和圖表中的 data 就行。
更多功能可擴(kuò)展
1.多 X 軸軸切換:
2.數(shù)據(jù)區(qū)域縮放:
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)
這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn),文章以天氣為例展開(kāi)介紹Vue?監(jiān)視屬性?的相關(guān)內(nèi)容,需要的小伙伴可以參考一下2022-05-05vue+iview的菜單與頁(yè)簽的聯(lián)動(dòng)方式
這篇文章主要介紹了vue+iview的菜單與頁(yè)簽的聯(lián)動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件
這篇文章主要介紹了vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02在vue項(xiàng)目中優(yōu)雅的使用SVG的方法實(shí)例詳解
本文旨在介紹如何在項(xiàng)目中配置和方便的使用svg圖標(biāo)。本文以vue項(xiàng)目為例給大家介紹在vue項(xiàng)目中優(yōu)雅的使用SVG的方法,需要的朋友參考下吧2018-12-12基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果
在vue項(xiàng)目中,我們通常會(huì)使用Axios來(lái)與后臺(tái)進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請(qǐng)求時(shí),常常需要在頁(yè)面上顯示一個(gè)加載框(Loading),然后等數(shù)據(jù)返回后自動(dòng)將其隱藏,本文介紹了基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03使用vue-cli webpack 快速搭建項(xiàng)目的代碼
這篇文章主要介紹了vue-cli webpack 快速搭建項(xiàng)目的教程詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11Vue3配置路由ERROR in [eslint]報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vue3配置路由ERROR in [eslint]報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue+Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線圖
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03