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)
       }
   }

好啦！本篇文章就到此结束了，喜欢可以转发关注哦~