vue3使用echart的兩種引入方式以及註意事項說明

Posted on by

創建好vue3項目後安裝echarts

終端輸入：

npm i echarts --save

安裝好後：

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>

註意！！！vue掛載 、echarts渲染 、數據獲取三者的時間順序

1.先講vue掛載和echarts渲染

拿掛網的入門例子來說。（vue3 版本）

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

開始我是這麼寫的，開起來好像沒有問題。但是你一打開頁面就會發現數據沒有渲染上去。因為此時vue還沒有掛載到dom元素上去，所以獲取不到dom元素，數據當然不能渲染。

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

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

vue3：你可以通過在生命周期鉤子前面加上 “on” 來訪問組件的生命周期鉤子。

我在<script setup>上加瞭setup，就等於在setup內部.

下表包含如何在 setup () 內部調用生命周期鉤子： 

選項式 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：

因為 setup 是圍繞 beforeCreate 和 created 生命周期鉤子運行的，所以不需要顯式地定義它們。換句話說，在這些鉤子中編寫的任何代碼都應該直接在 setup 函數中編寫。

這些函數接受一個回調函數，當鉤子被組件調用時將會被執行:

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

2.echarts渲染和數據獲取

通過axios獲取數據然後通過echarts渲染到頁面

如果是用的異步請求就要非常註意瞭！

簡單介紹一下異步請求：異步請求在執行過程中是不會影響後面程序執行的，好比如在主線程開辟瞭一個子線程。

如過異步獲取數據，還在獲取中，echart已經把dom元素渲染瞭，但是i請求的數據還沒返回回來，此時渲染的就是空數據。

所以用異步請求，可以把echart渲染和初始化放到axios.then()裡面，這樣就不會出現渲染空數據瞭。

如下面： 

<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: '常用詞統計',
                subtext: '通過常用詞統計分析盲人需求',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            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>

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：