前言

注意：是echarts4.x版本哦！echarts5戳这里！！！
echarts4官网，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)
   	}
   }
   

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