vue3中使用Apache?ECharts的詳細方法
更新時間：2022年11月04日 14:16:04 作者：愛唱歌的前端
最近在做一些數(shù)據(jù)透析的項目需要用到報表圖，那么報表圖好用的有老牌的ECharts，比較新意的AntV，思前馬后的想了一下還是用了Echarts，這篇文章主要介紹了vue3中使用Apache?ECharts,需要的朋友可以參考下
首先祝賀Echarts順利的從Apache畢業(yè)，多了個響亮的名字：Apache ECharts，現(xiàn)在的官網(wǎng)地址在這里：傳送門，首頁相當?shù)膰H范，看著比以前舒服多了，但是文檔還是那個文檔(Ｔ▽Ｔ)
ps：從Apache畢業(yè)的字面意思從一個國內(nèi)項目變成了一個國際化開源項目，簡單說就是從一個很厲害的項目變成了超厲害的項目
項目效果
前言
最近在做一些數(shù)據(jù)透析的項目需要用到報表圖，那么報表圖好用的有老牌的ECharts，比較新意的AntV，思前馬后的想了一下還是用了Echarts，因為AntV的產(chǎn)品線真的是五花八門，比如G2、G6、F2、L7，看得我頭暈眼花，所以決定用Echarts省事多了。
一、安裝
目前安裝自動指向的版本是5.4.0
npm install echarts --save
二、測試運行
官方快速入門文檔地址：傳送門，文檔真就是快速，只有使用代碼，連個框架案例都懶得寫了。。
測試的話直接用全量引入了，看著簡潔點。使用的話還是和以前差不多，獲取dom的話可以用id或ref，但我不太喜歡在vue項目中看到原生的東西，所以就用ref了，ref的話取值記得帶上.value；如果進入頁面就要顯示圖表，一定要把初始代碼放到onMounted生命周期函數(shù)中，不然會報Error: Initialize failed: invalid dom.的錯誤；另外高度一定要設(shè)置實高，不然頁面會空白。
setup測試代碼： 隨便拷貝到一個vue文件，能顯示圖表的話說明echarts能正常運行了
<template>
<div class="test">
<h1>setup測試代碼</h1>
<div ref="echartRef" class="echart"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const echartRef = ref()
onMounted(() => {
// 基于準備好的dom，初始化echarts實例
const myChart = echarts.init(echartRef.value);
// 繪制圖表
myChart.setOption({
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
})
</script>
<style lang="scss" scoped>
.test {
margin: auto;
max-width: 60vw;
.echart {
width: 100%;
height: 500px;
}
}
</style>三、全局配置
為了不讓使用到的頁面重復(fù)導(dǎo)入echarts，我們得把它設(shè)置成全局模塊，而vue3現(xiàn)在提供全局化的形式有兩種：globalProperties和provide/inject，接下來我們看一下怎么用著兩種形式去實現(xiàn)全局化。
小提示
按需引入的話需要在'echarts/core'包里引入自己要使用的圖表，名字為Xxx+Chart，比如折線圖就是LineChart，不知道圖表叫什么名字可以到官方示例的標題里看一下，首字母要大寫，之后還需要在echarts.use中注冊一下。
1. globalProperties形式：
先在main.js中引入echarts，并且把它掛載在app.config.globalProperties，名字風(fēng)格最好用$開頭，如用了路由，也會自動在這上面掛載$router和$route。
①全量引入：
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import * as echarts from 'echarts';
const app = createApp(App)
app.use(router)
app.mount('#app')
app.config.globalProperties.$echarts = echarts②按需引入：
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core';
// 引入柱狀圖圖表，圖表后綴都為 Chart
import { LineChart } from 'echarts/charts';
// 引入提示框，標題，直角坐標系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 標簽自動布局，全局過渡動畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注冊必須的組件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LineChart
]);
const app = createApp(App)
app.use(router)
app.mount('#app')
app.config.globalProperties.$echarts = echarts
測試代碼：
使用的話先在vue中引入getCurrentInstance模塊，之后就可以在appContext.config.globalProperties中找到我們掛載的$echarts了。
xxx.vue
<template>
<div class="global-properties">
<h1>globalProperties</h1>
<div ref="LineChartRef" class="echart"></div>
</div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
const LineChartRef = ref()
onMounted(() => {
// 獲取全局echarts實例
const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts
// 基于準備好的dom，初始化echarts實例
const lineChar = echarts.init(LineChartRef.value);
// 繪制圖表
lineChar.setOption({
title: {
text: '折線圖'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
});
})
</script>
<style lang="scss" scoped>
.global-properties {
margin: auto;
max-width: 60vw;
.echart {
width: 100%;
height: 500px;
}
}
</style>
2. provide / inject 形式：
由于provide和inject必須在setup中使用，所以我們得在app里提供echarts
①全量引入：
app.vue:
<script setup>
import * as echarts from 'echarts';
import { provide } from 'vue'
provide('echarts', echarts)
</script>②按需引入：
app.vue:
<script setup>
import { provide } from 'vue'
// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core';
// 引入柱狀圖圖表，圖表后綴都為 Chart
import { BarChart, LineChart } from 'echarts/charts';
// 引入提示框，標題，直角坐標系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 標簽自動布局，全局過渡動畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注冊必須的組件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
BarChart,
LineChart
]);
provide('echarts', echarts)
</script>測試代碼：
接著就可以在子頁面注入echarts去使用了
xxx.vue：
<template>
<div class="provide-inject">
<h1>provide / inject</h1>
<div ref="BarChartRef" class="echart"></div>
</div>
</template>
<script setup>
import { ref, onMounted, inject } from 'vue'
const BarChartRef = ref()
onMounted(() => {
// 注入echarts實例
const echarts = inject("echarts");
// 基于準備好的dom，初始化echarts實例
const BarChart = echarts.init(BarChartRef.value);
// 繪制圖表
BarChart.setOption({
title: {
text: '柱狀圖'
},
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
})
</script>
<style lang="scss" scoped>
.provide-inject {
margin: auto;
max-width: 60vw;
.echart {
width: 100%;
height: 500px;
}
}
</style>?簡單封裝
上面的按需引入需要導(dǎo)入的東西太多了，導(dǎo)致main.js/app.vue文件看起來極其骯臟，所以我們可以把它封裝起來，需要使用時引入一下就好。
本地工作目錄：
Vue3腳手架項目 |-src |-utils |-echarts.js
echarts.js： 文件我放到自己建的utils文件夾了，如果換了位置記得自己改一下引入路徑。
// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core';
// 引入柱狀圖圖表，圖表后綴都為 Chart
import { BarChart, LineChart } from 'echarts/charts';
// 引入提示框，標題，直角坐標系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 標簽自動布局，全局過渡動畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注冊必須的組件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
BarChart,
LineChart
]);
export {
echarts
}
如果你選擇globalProperties形式，在main.js這樣引入一下就好了：（使用方式不變）
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { echarts } from '@/utils/echarts' // 按需引入echarts
const app = createApp(App)
app.use(router)
app.mount('#app')
app.config.globalProperties.$echarts = echarts // 掛載全局使用而如果你選擇provide / inject形式，則在app.vue這樣引入一下就好了：（使用方式不變）
<script setup>
import { provide } from 'vue'
import { echarts } from '@/utils/echarts' // 按需引入echarts
provide('echarts', echarts) // 提供全局使用
</script>四、循環(huán)輸出
有時候我們要輸出的圖表數(shù)目可能是不確定的，這時我們要動態(tài)的綁定ref來獲取dom，不知道的可以看官方文檔的示例：傳送門，接著假設(shè)拿到后端數(shù)據(jù)后并且頁面也更新完了，我們就可以循環(huán)的去生成圖表了，具體看下的案例。
代碼演示：
<template>
<div class="loop-output">
<h1>循環(huán)輸出</h1>
<div class="box">
<div v-for="item in echartsData.value" :key="item.id" ref="refList" class="echart"></div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';
onMounted(() => {
loadData()
})
const refList = ref([])
const echartsData = reactive({ value: [] })
// 模擬加載后端數(shù)據(jù)
const loadData = () => {
echartsData.value = [
{
id: '1',
value: 30,
name: '藤原拓海'
},
{
id: '2',
value: 60,
name: '高橋涼介'
},
{
id: '3',
value: 90,
name: '奔馳上樹'
}
]
// 需要等頁面再次更新完，不然拿不到dom
nextTick(() => {
echartsData.value.forEach((e, i) => {
initEcharts(e, refList.value[i])
})
})
}
const initEcharts = (data, echartRef) => {
// 基于準備好的dom，初始化echarts實例
const chart = echarts.init(echartRef);
let option = {
tooltip: {
formatter: '{a} <br/> : {c}%'
},
series: [
{
name: 'Pressure',
type: 'gauge',
detail: {
formatter: '{value}'
},
data: [data]
}
]
};
// 繪制圖表
chart.setOption(option);
}
</script>
<style lang="scss" scoped>
.loop-output {
margin: auto;
max-width: 60vw;
overflow: hidden;
.box {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.echart {
width: 50%;
height: 280px;
}
}
</style>
五、動態(tài)更新
在我做的項目中不僅頁面初次加載時要顯示圖表，還要根據(jù)篩選條件結(jié)果去動態(tài)更新圖表，echarts的圖表是用canvas畫出來的，所以想要二次更新需要先在onMounted中初始化圖表，接著用getOption()拿到圖表的option實例，并且替換更新option里對應(yīng)的圖表數(shù)據(jù)，再用setOption(option)去二次觸發(fā)更新，否則是不會生效的；當然，強制用v-if去銷毀重建圖表的dom，然后每次都去init初始化圖表也是可以實現(xiàn)二次更新的，不過那樣圖表會有閃爍的現(xiàn)象。
代碼演示：
<template>
<div class="update">
<h1>動態(tài)更新</h1>
<div ref="echartRef" class="echart"></div>
<h3>集齊七天不洗頭你的愿望是什么？</h3>
<button @click="updateEchart(0)" class="blue">脫單</button>
<button @click="updateEchart(1)" class="green">雙休</button>
<button @click="updateEchart(2)" class="orange">暴富</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
onMounted(() => {
// 初始化報表
pieChart = echarts.init(echartRef.value)
option_pie.series[0].data = requestData
pieChart.setOption(option_pie)
})
const echartRef = ref()
let pieChart
const option_pie = {
title: {
text: '餅圖',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '',
type: 'pie',
radius: '50%',
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
// 模擬服務(wù)器獲取的數(shù)據(jù)
let requestData = [
{ value: 1, name: '脫單' },
{ value: 1, name: '雙休' },
{ value: 1, name: '暴富' },
]
// 點擊更新報表
const updateEchart = (id) => {
// 模擬數(shù)據(jù)更新
if (id != undefined) requestData[id].value += 1
// 獲取報表option實例
let option = pieChart.getOption()
// 給實例賦上新的值
option.series[0].data = requestData
// 二次更新圖表
pieChart.setOption(option)
}
</script>
<style lang="scss" scoped>
.update {
margin: auto;
max-width: 60vw;
.echart {
width: 100%;
height: 450px;
}
button {
margin: 0 10px;
color: white;
cursor: cell;
}
.blue {
background: #5470C6;
}
.green {
background: #95D178;
}
.orange {
background: #FAC858;
}
}
</style>
獲取項目Demo
有積分的交一下公糧，沒有的話到Gitee下載就好
?CSDN:
vue3-echarts（js原味）：傳送門
vue3-echarts-ts（ts風(fēng)味）：傳送門
?Gitee:
vue3-echarts（js原味）：傳送門
vue3-echarts-ts（ts風(fēng)味）：傳送門
到此這篇關(guān)于vue3中使用Apache ECharts的文章就介紹到這了,更多相關(guān)vue使用Apache ECharts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
本文主要介紹了vue3中toRef、toRefs和toRaw的使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
在封裝第三方組件中,經(jīng)常會遇到一個問題,下面這篇文章主要給大家介紹了關(guān)于如何在vue中更優(yōu)雅的封裝第三方組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
vue-awesome-swiper 基于vue實現(xiàn)h5滑動翻頁效果【推薦】
說到h5的翻頁，很定第一時間想到的是swiper。但是我當時想到的卻是，vue里邊怎么用swiper。這篇文章主要介紹了vue-awesome-swiper - 基于vue實現(xiàn)h5滑動翻頁效果 ,需要的朋友可以參考下2018-11-11
Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法
Vue 3 引入了一個全新的響應(yīng)式系統(tǒng),其中最核心的就是 reactive 和 ref,它們是實現(xiàn)響應(yīng)式數(shù)據(jù)的基礎(chǔ),用于創(chuàng)建可以自動跟蹤變化并更新視圖的對象和變量,本文介紹了Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法,需要的朋友可以參考下2024-08-08
詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案
這篇文章主要介紹了詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案，非常具有實用價值，需要的朋友可以參考下2017-09-09
vue中使用echarts并根據(jù)選擇條件動態(tài)展示echarts圖表
雖然老早就看過很多echarts的例子, 但自己接觸的項目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts并根據(jù)選擇條件動態(tài)展示echarts圖表的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關(guān)于Vue腳手架創(chuàng)建的相關(guān)資料,Vue腳手架是vue官方提供的標準化開發(fā)工具(平臺),文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2024-01-01
在Vue中,渲染函數(shù)是一種用于動態(tài)生成組件的函數(shù),可以將組件的模板代碼編寫為JavaScript代碼,并在運行時進行渲染,下面我們就來看看它的具體用法吧2023-08-08
這篇文章主要介紹了Vue結(jié)合路由配置遞歸實現(xiàn)菜單欄,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue-router的基本使用和配置教程，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧,需要的朋友可以參考下2018-11-11