vue3中使用echarts（超详细），内附代码

前言

echarts官网，echarts下载安装

npm install echarts --save

echart在页面切换时，不会进行销毁，在服务器上可能会不显示
解决方法可以看：echart路由切换消失bug解决

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

全局引用

适合多个页面使用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. 页面使用

   mounted() {     // 获取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)     } }

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

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏

[[email protected]]

分享 (0)