vue3+ts打开echarts的正确方式

实例项目使用 vite5 + vue3 + ts，项目地址 vite-vue3-charts，预览地址 https://weizwz.com/vite-vue3-charts

准备工作

1. 注册为百度地图开发者

官网地址，然后在 应用管理 -> 我的应用 里，创建应用，创建好后复制 AK

2. 在根目录的 index.html 里引入百度地图

在 head 里引入，是为了提前加载进来

3. 安装 echarts

npm i echarts -S

封装

1. 增加ts对百度地图的支持

修改 .eslintrc.cjs，加入对百度地图的支持

module.exports = {
  // 其他省略
  globals: {
    BMap: true
  }
}

2. 全局注册 echarts

修改 main.ts

// 引入 echarts
import * as echarts from 'echarts'
import themeJSON from '@/assets/weizwz.json'
echarts.registerTheme('weizwz', themeJSON)
 
const app = createApp(App)
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts

3. 封装 echarts

src/components 下新建 chart 文件夹，并在其下新建 index.vue，封装如下

使用

1. 使用 echarts 普通图表

示例：使用玫瑰环形图

2. 结合百度地图

示例：西安热力图

文章转载自：唯之为之

原文链接：https://www.cnblogs.com/weizwz/p/17933635.html

体验地址：引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构