使用vue3+ts打开echarts的正确方式

更新时间：2023年12月29日 11:28:54 作者：唯之为之

这篇文章主要给大家介绍了关于使用vue3+ts打开echarts的正确方式,在Vue3中使用ECharts组件可以方便地创建各种数据可视化图表,文中通过代码介绍的非常详细,需要的朋友可以参考下

准备工作

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

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

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

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow"  />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>xxx</title>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你复制好的AK"></script>
</head>

在 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，封装如下

<script setup lang="ts">
import { onMounted, getCurrentInstance, defineExpose, ref } from 'vue'
 
defineOptions({
  name: 'WChart'
})
// defineExpose 让父组件可调用此方法
defineExpose({
  setData
})
 
// 组件传参
const props = defineProps({
  width: {
    type: String, //参数类型
    default: '100%', //默认值
    required: false //是否必须传递
  },
  height: {
    type: String,
    default: '10rem',
    required: true
  },
  option: {
    type: Object,
    default: () => {
      return {}
    },
    required: true
  },
  // 初始化之前的工作，比如加载百度地图相关数据
  initBefore: {
    type: Function,
    required: false
  },
  // 初始化之后的工作，比如添加百度地址控件
  initAfter: {
    type: Function,
    required: false
  }
})
 
let chart: { setOption: (arg0: Record<string, any>) => void; resize: () => void }
const wchart = ref(null)
 
//声明周期函数，自动执行初始化
onMounted(() => {
  init()
  // 监控窗口大小，自动适应界面
  window.addEventListener('resize', resize, false)
})
 
//初始化函数
function init() {
  // 基于准备好的dom，初始化echarts实例
  const dom = wchart.value
  // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
  let internalInstance = getCurrentInstance()
  let echarts = internalInstance?.appContext.config.globalProperties.$echarts
 
  chart = echarts.init(dom, 'weizwz')
  // 渲染图表
  if (props.initBefore) {
    props.initBefore(chart).then((data: Record<string, any>) => {
      setData(data)
      if (props.initAfter) props.initAfter(chart)
    })
  } else {
    chart.setOption(props.option)
    if (props.initAfter) props.initAfter(chart)
  }
}
 
function resize() {
  chart.resize()
}
// 父组件可调用，设置动态数据
function setData(option: Record<string, any>) {
  chart.setOption(option)
}
</script>
 
<template>
  <div ref="wchart" :style="`width: ${props.width} ; height: ${props.height}`" />
</template>
 
<style lang="scss" scoped></style>

使用

1. 使用 echarts 普通图表

示例：使用玫瑰环形图

<script setup lang="ts">
import WChart from '@comp/chart/index.vue'
 
defineOptions({
  name: 'ChartLoop'
})
// 正常 echarts 参数
const option = {
  grid: {
    top: '20',
    left: '10',
    right: '10',
    bottom: '20',
    containLabel: true
  },
  series: [
    {
      name: '人口统计',
      type: 'pie',
      radius: [50, 120],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      label: {
        formatter: '{b}\n{c} 万人'
      },
      data: [
        { value: 2189.31, name: '北京' },
        { value: 1299.59, name: '西安' },
        { value: 1004.79, name: '长沙' }
      ]
    }
  ]
}
</script>
 
<template>
  <WChart width="100%" height="300px" :option="option" />
</template>
 
<style lang="scss" scoped></style>

2. 结合百度地图

示例：西安热力图

<script setup lang="ts">
import { reactive } from 'vue'
import WChart from '@comp/chart/index.vue'
// 注意需要引入 bmap，即 echarts 对百度地图的支持扩展
import 'echarts/extension/bmap/bmap'
// 热力数据，内容如：{ features: [ { geometry: { coordinates: [ [ [x, y] ] ] } } ]}
// 为什么这么复杂，因为是我从阿里地理数据下载的，地址 https://datav.aliyun.com/portal/school/atlas/area_selector
import xianJson from '@/assets/xian.json'
 
defineOptions({
  name: 'ChartMap'
})
 
const option = {
  animation: false,
  backgroundColor: 'transparent',
  bmap: {
    // 地图中心点
    center: [108.93957150268, 34.21690396762],
    zoom: 12,
    roam: true
  },
  visualMap: {
    show: false,
    top: 'top',
    min: 0,
    max: 5,
    seriesIndex: 0,
    calculable: true,
    inRange: {
      color: ['blue', 'blue', 'green', 'yellow', 'red']
    }
  },
  series: [
    {
      type: 'heatmap',
      coordinateSystem: 'bmap',
      data: reactive([] as any[]),
      pointSize: 5,
      blurSize: 6
    }
  ]
}
 
const initBefore = () => {
  return new Promise((resolve) => {
    // 处理数据
    const arr = []
    for (const item of xianJson.features) {
      const positions = item.geometry.coordinates[0][0]
      for (const temp of positions) {
        const position = temp.concat(Math.random() * 1000 + 200)
        arr.push(position)
      }
    }
    option.series[0].data = arr
    resolve(option)
  })
}
 
const initAfter = (chart: {
  getModel: () => {
    (): any
    new (): any
    getComponent: { (arg0: string): { (): any; new (): any; getBMap: { (): any; new (): any } }; new (): any }
  }
}) => {
  // 添加百度地图插件
  var bmap = chart.getModel().getComponent('bmap').getBMap()
  // 百度地图样式，需要自己去创建
  bmap.setMapStyleV2({
    styleId: 'bc05830a75e51be40a38ffc9220613bb'
  })
  // bmap.addControl(new BMap.MapTypeControl())
}
</script>
 
<template>
  <WChart width="100%" height="500px" :option="option" :initBefore="initBefore" :initAfter="initAfter" />
</template>
 
<style lang="scss" scoped></style>

实例项目

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

总结

到此这篇关于使用vue3+ts打开echarts的正确方式的文章就介绍到这了,更多相关vue3+ts打开echarts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

前端XSS攻击场景详解与Vue.js处理XSS的方法(vue-xss)
这篇文章主要给大家介绍了关于前端XSS攻击场景与Vue.js使用vue-xss处理XSS的方法,介绍了实际工作中渲染数据时遇到XSS攻击时的防范措施,以及解决方案,需要的朋友可以参考下
2024-02-02
Vue项目打包(build)时,自动打以时间命名的压缩包方式
这篇文章主要介绍了Vue项目打包(build)时,自动打以时间命名的压缩包方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue el-table组件如何实现将日期格式化
这篇文章主要介绍了Vue el-table组件如何实现将日期格式化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue-next/runtime-core 源码阅读指南详解
这篇文章主要介绍了vue-next/runtime-core 源码阅读指南详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Vue前端vue.config.js简介
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载，本文重点介绍VUE前端vue.config.js简介，感兴趣的朋友跟随小编一起看看吧
2023-01-01
vue-cli创建项目ERROR in Conflict: Multiple assets emit dif
最近vue/cli创建项目后出现了错误,下面这篇文章主要给大家介绍了关于vue-cli创建项目ERROR in Conflict: Multiple assets emit different content to the same filename index.html问题的解决办法,需要的朋友可以参考下
2023-02-02
vuejs简单验证码功能完整示例
这篇文章主要介绍了vuejs简单验证码功能,结合完整实例形式分析了vue.js验证码的生成、显示、校验等相关操作技巧,需要的朋友可以参考下
2019-01-01
Vue动态组件与内置组件浅析讲解
闲话少说，我们进入今天的小小五分钟学习时间，前面我们了解了vue的组件，我们本文主要是讲解vue的动态组件和内置组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
浅析Visual Studio Code断点调试Vue
本篇文章给大家总结了Visual Studio Code断点调试Vue的方法以及心得分享，需要的朋友参考学习下。
2018-02-02
基于vue2.0+vuex+localStorage开发的本地记事本示例
这篇文章主要介绍了基于vue2.0+vuex+localStorage开发的本地记事本示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-02-02