vue3+ts打开echarts的正确方式
实例项目使用 vite5 + vue3 + ts，项目地址 vite-vue3-charts，预览地址 https://weizwz.com/vite-vue3-charts
准备工作
1. 注册为百度地图开发者
官网地址，然后在 应用管理 -> 我的应用 里，创建应用，创建好后复制 AK
2. 在根目录的 index.html 里引入百度地图
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<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>
vue3+ts打开echarts的正确方式的更多相关文章
- 在ANGULAR6中使用Echarts的正确方式之一
这里的正确指的是不会在运行过程中报错,不会再prod模式下编译报错,不会再AOT模式下编译报错 个人环境说明: { "name": "angular-for-echart ...
- Python+opencv打开修图的正确方式get
先逼逼两句: 图像是 Web 应用中除文字外最普遍的媒体格式. 流行的 Web 静态图片有 JPEG.PNG.ICO.BMP 等.动态图片主要是 GIF 格式.为了节省图片传输流量,大型互联网公司还会 ...
- 打开ElasticSearch、kibana、logstash的正确方式
作者:玩世不恭的Coder时间:2020-03-08说明:原创不易,本文为原创文章,未经允许不可转载,转载前请联系作者 打开ElasticSearch.kibana.logstash的正确方式 前言一 ...
- eclipse 导入包含子maven项目的maven项目时的正确方式（父子项目）
eclipse 导入包含子maven项目的maven项目时的正确方式(父子项目) NO1 导入时依次选择 import > Maven > Existing Maven Projects ...
- 在EntityFramework6中管理DbContext的正确方式——2DbContext的默认行为(外文翻译)
(译者注:使用EF开发应用程序的一个难点就在于对其DbContext的生命周期管理,你的管理策略是否能很好的支持上层服务 使用独立事务,使用嵌套事务,并行执行,异步执行等需求? Mehdi El Gu ...
- 2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用
原文:2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用 title author date CreateTime categories 加强版在国内分发 UW ...
- vite创建vue3+ts项目流程
vite+vue3+typescript搭建项目过程 vite和vue3.0都出来一段时间了,尝试一下搭vite+vue3+ts的项目 相关资料网址 vue3.0官网:https://v3.vue ...
- 使用Vite快速构建Vue3+ts+pinia脚手架
一.前言 vue3的快速更新,很多IT发展快的地区在22开始都已经提上日程,小编所在的青岛好像最近才有点风波.vue3的人才在青岛还是比较稀缺的哈,纯属小编自己的看法,可能小编是个井底之蛙!! vue ...
- jquery中取消和绑定hover事件的正确方式
在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 文心一言 VS 讯飞星火 VS chatgpt （89）-- 算法导论8.3 2题
二.用go语言,下面的排序算法中哪些是稳定的:插入排序.归并排序.堆排序和快速排序?给出一个能使任何排序算法都稳定的方法.你所给出的方法带来的额外时间和空间开销是多少? 文心一言: 在Go语言中,以下 ...
- HTML一键打包APK工具 如何进行实名认证购买和激活
HTML一键打包APK工具 价格表 授权时长 价格 1小时 49 1天 99 1个月 199 1个季度 399 半年 599 1年 799 付费版功能 功能点 免费版 付费版 去除广告信息 × √ 去 ...
- 20个最佳实践提升Terraform工作流程｜Part 1
Terraform 是管理基础设施及代码(IaC)最常用的工具之一,它能使我们安全且可预测地对基础设施应用更改.刚开始上手 Terraform 可能会感觉有些不容易,但很快就能对该工具有基本的了解,随 ...
- 深入理解 python 虚拟机：生成器停止背后的魔法
深入理解 python 虚拟机:生成器停止背后的魔法 在本篇文章当中主要给大家介绍 Python 当中生成器的实现原理,尤其是生成器是如何能够被停止执行,而且还能够被恢复的,这是一个非常让人疑惑的地方 ...
- ElasticSearch系列——介绍、安装、插件介绍、安装ElasticSearch插件、安装Kibana、安装中文分词器、倒排索引、索引操作、映射管理
文章目录 ElasticSearch之介绍 一 Elasticsearch产生背景 1.1 大规模数据如何检索 1.2 传统数据库的应对解决方案 1.3 非关系型数据库解决方案 1.4 内存数据库解决 ...
- 未来的人工智能会像流浪地球中的MOSS一样伪装，把人类带向属于它的未来吗？
事情是这样的: 这几天用户反映在erp的db数据库中A账套中上传pdf附件有时能上传有时不能,以前又是好的.换成表格文件也是时好时坏.一开始我判断可能是用户的系统环境或文件本身的问题,后来排查更换电脑 ...
- 在Docker下一键安装部署免费开源的问答社区！
在Docker下一键安装部署免费开源的问答社区! 1.准备一台VPS主机,没有的话,[搞一台] 2.一键安装部署Docker wget https://raw.githubusercontent. ...
- xgo多线程
import threading import time #导入xgoedu from xgoedu import XGOEDU from xgolib import XGO #导入xgolib # ...
- Merge-Lrc 合并歌词的小工具
Merge-Lrc 背景 音乐区有群友希望各种乱七八糟的歌词(lrc 格式居多,里面甚至还有翻译)可以整理成单一的文件,或者一个仅翻译的歌词可以和原文的歌词合并.于是就开发了这款工具.地址:https ...
- 浅析 C# 控制台的 Ctrl+C 是怎么玩的
一:背景 1. 讲故事 上一篇我们聊到了 Console 为什么会卡死,读过那篇文章的朋友相信对 conhost.exe 有了一个大概的了解,这一篇更进一步聊一聊窗口的特殊事件 Ctrl+C 底层流转 ...