vue3中使用Apache?ECharts的詳細(xì)方法
首先祝賀Echarts順利的從Apache畢業(yè)，多了個(gè)響亮的名字：Apache ECharts，現(xiàn)在的官網(wǎng)地址在這里：傳送門，首頁相當(dāng)?shù)膰H范，看著比以前舒服多了，但是文檔還是那個(gè)文檔(Ｔ▽Ｔ)
ps：從Apache畢業(yè)的字面意思從一個(gè)國內(nèi)項(xiàng)目變成了一個(gè)國際化開源項(xiàng)目，簡(jiǎn)單說就是從一個(gè)很厲害的項(xiàng)目變成了超厲害的項(xiàng)目
項(xiàng)目效果
前言
最近在做一些數(shù)據(jù)透析的項(xiàng)目需要用到報(bào)表圖，那么報(bào)表圖好用的有老牌的ECharts，比較新意的AntV，思前馬后的想了一下還是用了Echarts，因?yàn)锳ntV的產(chǎn)品線真的是五花八門，比如G2、G6、F2、L7，看得我頭暈眼花，所以決定用Echarts省事多了。
一、安裝
目前安裝自動(dòng)指向的版本是5.4.0
npm install echarts --save
二、測(cè)試運(yùn)行
官方快速入門文檔地址：傳送門，文檔真就是快速，只有使用代碼，連個(gè)框架案例都懶得寫了。。
測(cè)試的話直接用全量引入了，看著簡(jiǎn)潔點(diǎn)。使用的話還是和以前差不多，獲取dom的話可以用id或ref，但我不太喜歡在vue項(xiàng)目中看到原生的東西，所以就用ref了，ref的話取值記得帶上.value；如果進(jìn)入頁面就要顯示圖表，一定要把初始代碼放到onMounted生命周期函數(shù)中，不然會(huì)報(bào)Error: Initialize failed: invalid dom.的錯(cuò)誤；另外高度一定要設(shè)置實(shí)高，不然頁面會(huì)空白。
setup測(cè)試代碼： 隨便拷貝到一個(gè)vue文件，能顯示圖表的話說明echarts能正常運(yùn)行了
<template>
<div class="test">
<h1>setup測(cè)試代碼</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(() => {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
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，接下來我們看一下怎么用著兩種形式去實(shí)現(xiàn)全局化。
小提示
按需引入的話需要在'echarts/core'包里引入自己要使用的圖表，名字為Xxx+Chart，比如折線圖就是LineChart，不知道圖表叫什么名字可以到官方示例的標(biāo)題里看一下，首字母要大寫，之后還需要在echarts.use中注冊(cè)一下。
1. globalProperties形式：
先在main.js中引入echarts，并且把它掛載在app.config.globalProperties，名字風(fēng)格最好用$開頭，如用了路由，也會(huì)自動(dò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';
// 引入提示框，標(biāo)題，直角坐標(biāo)系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 標(biāo)簽自動(dòng)布局，全局過渡動(dòng)畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注冊(cè)必須的組件
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
測(cè)試代碼：
使用的話先在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實(shí)例
const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
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';
// 引入提示框，標(biāo)題，直角坐標(biāo)系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 標(biāo)簽自動(dòng)布局，全局過渡動(dòng)畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注冊(cè)必須的組件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
BarChart,
LineChart
]);
provide('echarts', echarts)
</script>測(cè)試代碼：
接著就可以在子頁面注入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實(shí)例
const echarts = inject("echarts");
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
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>?簡(jiǎn)單封裝
上面的按需引入需要導(dǎo)入的東西太多了，導(dǎo)致main.js/app.vue文件看起來極其骯臟，所以我們可以把它封裝起來，需要使用時(shí)引入一下就好。
本地工作目錄：
Vue3腳手架項(xiàng)目 |-src |-utils |-echarts.js
echarts.js： 文件我放到自己建的utils文件夾了，如果換了位置記得自己改一下引入路徑。
// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core';
// 引入柱狀圖圖表，圖表后綴都為 Chart
import { BarChart, LineChart } from 'echarts/charts';
// 引入提示框，標(biāo)題，直角坐標(biāo)系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 標(biāo)簽自動(dòng)布局，全局過渡動(dòng)畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注冊(cè)必須的組件
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í)候我們要輸出的圖表數(shù)目可能是不確定的，這時(shí)我們要?jiǎng)討B(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) => {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
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>
五、動(dòng)態(tài)更新
在我做的項(xiàng)目中不僅頁面初次加載時(shí)要顯示圖表，還要根據(jù)篩選條件結(jié)果去動(dòng)態(tài)更新圖表，echarts的圖表是用canvas畫出來的，所以想要二次更新需要先在onMounted中初始化圖表，接著用getOption()拿到圖表的option實(shí)例，并且替換更新option里對(duì)應(yīng)的圖表數(shù)據(jù)，再用setOption(option)去二次觸發(fā)更新，否則是不會(huì)生效的；當(dāng)然，強(qiáng)制用v-if去銷毀重建圖表的dom，然后每次都去init初始化圖表也是可以實(shí)現(xiàn)二次更新的，不過那樣圖表會(huì)有閃爍的現(xiàn)象。
代碼演示：
<template>
<div class="update">
<h1>動(dòng)態(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(() => {
// 初始化報(bào)表
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: '暴富' },
]
// 點(diǎn)擊更新報(bào)表
const updateEchart = (id) => {
// 模擬數(shù)據(jù)更新
if (id != undefined) requestData[id].value += 1
// 獲取報(bào)表option實(shí)例
let option = pieChart.getOption()
// 給實(shí)例賦上新的值
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>
獲取項(xiàng)目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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
深入理解Vue的插件機(jī)制與install詳細(xì)
這篇文章主要介紹的是深入理解Vue的插件機(jī)制與install，文章主要是講解install函數(shù)可以做些什么、install內(nèi)部是怎么實(shí)現(xiàn)的、 Vuex，Vue-Router插件在install期間到底干了什么,需要的小伙伴可以參考一下2021-09-09
這篇文章主要介紹了Vue組件中的父子組件使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue百度地圖 + 定位的詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了解決vue中的無限循環(huán)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3中單文件組件<script?setup>實(shí)例詳解
<script?setup>是vue3中新引入的語法糖,目的是簡(jiǎn)化使用Composition?API時(shí)冗長的模板代碼,下面這篇文章主要給大家介紹了關(guān)于vue3中單文件組件<script?setup>的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue綁定設(shè)置屬性的多種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue打印功能實(shí)現(xiàn)的兩種方法總結(jié)
在項(xiàng)目中,有時(shí)需要打印頁面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實(shí)現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下2021-06-06
vue 監(jiān)聽窗口變化對(duì)頁面部分元素重新渲染操作
這篇文章主要介紹了vue 監(jiān)聽窗口變化對(duì)頁面部分元素重新渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法
這篇文章主要介紹了vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新
今天小編就為大家分享一篇vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11