vue3中使用Apache?ECharts的詳細(xì)方法
首先祝賀Echarts順利的從Apache畢業(yè),多了個(gè)響亮的名字:Apache ECharts
,現(xiàn)在的官網(wǎng)地址在這里:傳送門,首頁相當(dāng)?shù)膰H范,看著比以前舒服多了,但是文檔還是那個(gè)文檔(T▽T)
ps:從Apache畢業(yè)的字面意思從一個(gè)國內(nèi)項(xiàng)目變成了一個(gè)國際化開源項(xiàng)目,簡單說就是從一個(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省事多了。
一、安裝
目前安裝自動指向的版本是5.4.0
npm install echarts --save
二、測試運(yùn)行
官方快速入門文檔地址:傳送門,文檔真就是快速,只有使用代碼,連個(gè)框架案例都懶得寫了。。
測試的話直接用全量引入了,看著簡潔點(diǎn)。使用的話還是和以前差不多,獲取dom的話可以用id
或ref
,但我不太喜歡在vue項(xiàng)目中看到原生的東西,所以就用ref了,ref的話取值記得帶上.value
;如果進(jìn)入頁面就要顯示圖表,一定要把初始代碼放到onMounted
生命周期函數(shù)中,不然會報(bào)Error: Initialize failed: invalid dom.
的錯(cuò)誤;另外高度一定要設(shè)置實(shí)高,不然頁面會空白。
setup測試代碼: 隨便拷貝到一個(gè)vue文件,能顯示圖表的話說明echarts能正常運(yùn)行了
<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(() => { // 基于準(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
中注冊一下。
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'; // 引入提示框,標(biāo)題,直角坐標(biāo)系,數(shù)據(jù)集,內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件,組件后綴都為 Component import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent } from 'echarts/components'; // 標(biāo)簽自動布局,全局過渡動畫等特性 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實(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)簽自動布局,全局過渡動畫等特性 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實(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>
?簡單封裝
上面的按需引入需要導(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)簽自動布局,全局過渡動畫等特性 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í)候我們要輸出的圖表數(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>
五、動態(tài)更新
在我做的項(xiàng)目中不僅頁面初次加載時(shí)要顯示圖表,還要根據(jù)篩選條件結(jié)果去動態(tài)更新圖表,echarts的圖表是用canvas
畫出來的,所以想要二次更新需要先在onMounted
中初始化圖表,接著用getOption()
拿到圖表的option
實(shí)例,并且替換更新option里對應(yīng)的圖表數(shù)據(jù),再用setOption(option)
去二次觸發(fā)更新,否則是不會生效的;當(dāng)然,強(qiáng)制用v-if
去銷毀重建圖表的dom,然后每次都去init
初始化圖表也是可以實(shí)現(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(() => { // 初始化報(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-awesome-swiper 基于vue實(shí)現(xiàn)h5滑動翻頁效果【推薦】
說到h5的翻頁,很定第一時(shí)間想到的是swiper。但是我當(dāng)時(shí)想到的卻是,vue里邊怎么用swiper。這篇文章主要介紹了vue-awesome-swiper - 基于vue實(shí)現(xiàn)h5滑動翻頁效果 ,需要的朋友可以參考下2018-11-11Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法
Vue 3 引入了一個(gè)全新的響應(yīng)式系統(tǒng),其中最核心的就是 reactive 和 ref,它們是實(shí)現(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)圖片的路徑問題解決方案,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09vue中使用echarts并根據(jù)選擇條件動態(tài)展示echarts圖表
雖然老早就看過很多echarts的例子, 但自己接觸的項(xiàng)目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts并根據(jù)選擇條件動態(tài)展示echarts圖表的相關(guān)資料,需要的朋友可以參考下2023-12-12Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄功能
這篇文章主要介紹了Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06