快捷導(dǎo)航

vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明

更新時(shí)間：2022年10月19日 15:18:04 作者：No?Bug

這篇文章主要介紹了vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1.直接在組件中引用echarts

<script setup>
? ? ? ? import * as echarts from 'echarts' ?
</script>

2.全局引入，一般在app.vue

app.vue (provide 和 inject的使用)

<script setup>
? ? ? ? import * as echarts from 'echarts' ?
? ? ? ? provide('echarts',echarts)
</script>

在需要用echarts的組件中用inject獲取

<script setup>
? ? ? ? const echarts ?= inject('echarts')
</script>

注意?。。ue掛載、echarts渲染、數(shù)據(jù)獲取三者的時(shí)間順序

1.先講vue掛載和echarts渲染

拿掛網(wǎng)的入門(mén)例子來(lái)說(shuō)。（vue3 版本）

<script setup>
import * as echarts from 'echarts';
const myCharts = ref(null)
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(mycharts.value);
// 繪制圖表
myChart.setOption({
? title: {
? ? text: 'ECharts 入門(mén)示例'
? },
? tooltip: {},
? xAxis: {
? ? data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
? },
? yAxis: {},
? series: [
? ? {
? ? ? name: '銷(xiāo)量',
? ? ? type: 'bar',
? ? ? data: [5, 20, 36, 10, 10, 20]
? ? }
? ]
});
<script>

開(kāi)始我是這么寫(xiě)的，開(kāi)起來(lái)好像沒(méi)有問(wèn)題。但是你一打開(kāi)頁(yè)面就會(huì)發(fā)現(xiàn)數(shù)據(jù)沒(méi)有渲染上去。因?yàn)榇藭r(shí)vue還沒(méi)有掛載到dom元素上去，所以獲取不到dom元素，數(shù)據(jù)當(dāng)然不能渲染。

需要這么寫(xiě)，把獲取dom元素和初始化myecharts的動(dòng)作放到onMounted(()=>{})中

<script setup>
import * as echarts from 'echarts';
onMounted(()=>{
const myCharts = ref(null)
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(mycharts.value);
// 繪制圖表
myChart.setOption({
? title: {
? ? text: 'ECharts 入門(mén)示例'
? },
? tooltip: {},
? xAxis: {
? ? data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
? },
? yAxis: {},
? series: [
? ? {
? ? ? name: '銷(xiāo)量',
? ? ? type: 'bar',
? ? ? data: [5, 20, 36, 10, 10, 20]
? ? }
? ]
});
})
<script>

vue3：你可以通過(guò)在生命周期鉤子前面加上 “on” 來(lái)訪(fǎng)問(wèn)組件的生命周期鉤子。

我在<script setup>上加了setup，就等于在setup內(nèi)部.

下表包含如何在 setup () 內(nèi)部調(diào)用生命周期鉤子：

選項(xiàng)式 API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

TIP：

因?yàn)?setup 是圍繞 beforeCreate 和 created 生命周期鉤子運(yùn)行的，所以不需要顯式地定義它們。換句話(huà)說(shuō)，在這些鉤子中編寫(xiě)的任何代碼都應(yīng)該直接在 setup 函數(shù)中編寫(xiě)。

這些函數(shù)接受一個(gè)回調(diào)函數(shù)，當(dāng)鉤子被組件調(diào)用時(shí)將會(huì)被執(zhí)行:

// MyBook.vue
?
export default {
? setup() {
? ? // mounted
? ? onMounted(() => {
? ? ? console.log('Component is mounted!')
? ? })
? }
}

2.echarts渲染和數(shù)據(jù)獲取

通過(guò)axios獲取數(shù)據(jù)然后通過(guò)echarts渲染到頁(yè)面

如果是用的異步請(qǐng)求就要非常注意了！

簡(jiǎn)單介紹一下異步請(qǐng)求：異步請(qǐng)求在執(zhí)行過(guò)程中是不會(huì)影響后面程序執(zhí)行的，好比如在主線(xiàn)程開(kāi)辟了一個(gè)子線(xiàn)程。

如過(guò)異步獲取數(shù)據(jù)，還在獲取中，echart已經(jīng)把dom元素渲染了，但是i請(qǐng)求的數(shù)據(jù)還沒(méi)返回回來(lái)，此時(shí)渲染的就是空數(shù)據(jù)。

所以用異步請(qǐng)求，可以把echart渲染和初始化放到axios.then()里面，這樣就不會(huì)出現(xiàn)渲染空數(shù)據(jù)了。

如下面：

<script setup>
import api from '@/api/index'
var keydata = []
var valuedata = []
const resdata = []
const wordsChartsBox = ref(null)
const echarts = inject('echarts')
function getf() {
    api.get('/backstage').then(res => {
        for (const key in res.data) {
            var element = res.data[key]
            if (key == 1) {
                keydata = element
            } else {
                valuedata = element
            }
        }
        for (let index = 0; index < keydata.length; index++) {
            resdata.push(
                {
                    value: parseInt(valuedata[index]),
                    name: keydata[index]
                }
            )
        }
        const wordsChartsOption = {
            title: {
                text: '常用詞統(tǒng)計(jì)',
                subtext: '通過(guò)常用詞統(tǒng)計(jì)分析盲人需求',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/> : {c} (wppm3vysvbp%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: keydata
            },
            series: [
                {
                    name: '姓名',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: resdata,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        const wordsCharts = echarts.init(wordsChartsBox.value)
        wordsCharts.setOption(wordsChartsOption)
    })
    console.log(resdata)
}
onMounted(() => {
    getf()
})
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: