在Vue3項(xiàng)目中使用如何echarts問題
記得第一次使用 echarts 還是2019年的時(shí)候，那時(shí)做的一個(gè)物聯(lián)網(wǎng)項(xiàng)目云平臺(tái)的前端需要一些數(shù)據(jù)可視化功能，經(jīng)過一些對(duì)比后就使用了 echarts 。上手非?？欤瑢I(yè)性也足夠，因此在后來其他的一些項(xiàng)目中就多次用到它。
echarts 是百度基于 JavaScript 實(shí)現(xiàn)的一個(gè)開源可視化圖表庫(kù)，主要特點(diǎn)就是可視化類型豐富、動(dòng)畫炫酷、使用簡(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ù)可視化組件
通常可來說，我會(huì)把數(shù)據(jù)可視化功能放到單獨(dú)的組件中來實(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";
通常來說，在哪里實(shí)現(xiàn)就在哪里導(dǎo)入，而不是在 main.js 里面全局引入。
2，接收 props
通過 props 接收父組件傳入的控制值，這種不寫死的方式增加了數(shù)據(jù)展示大小的靈活性，
3，初始化 echarts
首先以調(diào)用 echarts.init() 的方式創(chuàng)建一個(gè) echarts 實(shí)例。
這里我們指定了實(shí)例容器以及所用的主題。
然后調(diào)用 echartsInstance.setOption() 來設(shè)置圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù)，詳見配置項(xiàng)手冊(cè)。
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;
// 掛載時(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í)，圖表并不跟隨變化。
通常來說，data property 中要展示的數(shù)據(jù)都是從后臺(tái)服務(wù)器中獲取的，而這些數(shù)據(jù)通常是不斷變化的，因此需要為圖表添加一個(gè)響應(yīng)式刷新的功能，
最簡(jiǎn)單的方式，就是使用 watch property 監(jiān)聽數(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ù)。
- 后端通過長(zhǎng)連接定時(shí)向前端發(fā)送數(shù)據(jù)。
這里簡(jiǎn)單說說如何使用第一種方法。說來也簡(jiǎn)單，就是使用定時(shí)器周期性請(qǐng)求數(shù)據(jù)。
只不過有一個(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)文章
vue 組件使用中的一些細(xì)節(jié)點(diǎn)
這篇文章主要介紹了vue 組件使用中的一些細(xì)節(jié)點(diǎn)，大概有兩大細(xì)節(jié)點(diǎn)，本文通過基礎(chǔ)實(shí)例給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-04-04
Vue響應(yīng)式原理與虛擬DOM實(shí)現(xiàn)步驟詳細(xì)講解
在Vue中最重要、最核心的概念之一就是響應(yīng)式系統(tǒng)。這個(gè)系統(tǒng)使得Vue能夠自動(dòng)追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時(shí)自動(dòng)更新相關(guān)的DOM元素。本文將會(huì)探討Vue響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理及其底層實(shí)現(xiàn)2023-03-03
vue.js引用背景圖background無效的3種解決方案
這篇文章主要介紹了vue.js引用背景圖background無效的3種解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue+ElementUI table實(shí)現(xiàn)表格分頁
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI table實(shí)現(xiàn)表格分頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)
這篇文章主要介紹了Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了詳解mpvue開發(fā)小程序小總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue3?使用defineExpose的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
Vuejs 用$emit與$on來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸通信
本篇文章主要介紹了Vuejs 用$emit 與 $on 來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-02-02
Vue頁面刷新記住頁面狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了Vue頁面刷新記住頁面狀態(tài)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-12-12
BuildAdmin elementPlus自定義表頭添加tooltip方法示例
這篇文章主要介紹了BuildAdmin elementPlus 自定義表頭,添加tooltip實(shí)現(xiàn)方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09