vue3中使用echarts4.x（超詳細），内附代碼

前言

echarts官網

，echarts下載下傳安裝

npm install echarts --save           

echart在頁面切換時，不會進行銷毀，在伺服器上可能會不顯示

解決方法可以看：

echart路由切換消失bug解決

全局引用

适合多個頁面使用eachrts的網站

1. 在mian.js中挂載

   app.config.globalProperties.xxx= xxx ：Vue3中的元件挂載方式

   // 引入echarts
   import echarts from 'echarts'
   // createApp(App)預設是沒有指派，需要指派出去
   const app = createApp(App)
   app.use(router)
   app.mount("#app")
   // 進行挂載，類似Vue.prototype.xxx=xxx
   app.config.globalProperties.$echarts = echarts           

2. 頁面中引入

   getCurrentInstance ：擷取元件執行個體

   // 先引入
   import { getCurrentInstance } from vue
   setup() {
       const internalInstance = getCurrentInstance();
       // 擷取挂載的元件執行個體
       const echarts = internalInstance.appContext.config.globalProperties.$echarts;
   }           

3. 頁面使用

   onMounted() {
       // 擷取DOM元素
       const myChart = echarts.init(document.getElementById('zhouzhou'))
       const option = {
           tooltip: {
               trigger: 'item'
           },
           color: ['#ffd666', '#ffa39e', '#409EFF', '#69cbc2', '#d3adf7'],
           series: [
               {
                   name: '通路來源',
                   type: 'pie',
                   radius: '70%',
                   data: [
                       {value: 1048, name: '清潔能源發電區'},
                       {value: 735, name: '公共娛樂區域'},
                       {value: 580, name: '生活區域'},
                       {value: 484, name: '辦公區域'},
                       {value: 300, name: '綠植空地'}
                 ],
                   emphasis: {
                       itemStyle: {
                           shadowBlur: 10,
                           shadowOffsetX: 0,
                           shadowColor: 'rgba(0, 0, 0, 0.5)'
                       }
                   }
               }
           ]
       };
       myChart.setOption(option)
   }           

局部引用

适合少量頁面使用

1. 引入echats

   import echarts from 'echarts'
   // 挂載
     components: {
       echarts
     },           

2. 使用

   import{ onMounted } from 'vue'
   setup() {
       onMounted() {
           // 擷取DOM元素
           const myChart = echarts.init(document.getElementById('zhouzhou'))
           const option = {
               tooltip: {
                   trigger: 'item'
               },
               color: ['#ffd666', '#ffa39e', '#409EFF', '#69cbc2', '#d3adf7'],
               series: [
                   {
                       name: '通路來源',
                       type: 'pie',
                       radius: '70%',
                       data: [
                           {value: 1048, name: '清潔能源發電區'},
                           {value: 735, name: '公共娛樂區域'},
                           {value: 580, name: '生活區域'},
                           {value: 484, name: '辦公區域'},
                           {value: 300, name: '綠植空地'}
                     ],
                       emphasis: {
                           itemStyle: {
                               shadowBlur: 10,
                               shadowOffsetX: 0,
                               shadowColor: 'rgba(0, 0, 0, 0.5)'
                           }
                       }
                   }
               ]
           };
           myChart.setOption(option)
       }
   }           

好啦！本篇文章就到此結束了，喜歡可以轉發關注哦~