vue echarts

2024-03-06 19:43| 来源: 网络整理| 查看: 265

vue 数据大屏项目开发中，需要实现3d地图下钻效果，这里我们使用echarts-gl来实现3d地图。

vue echarts-gl 3d地图实现中国下钻实例

vue echarts-gl 3d地图实现省级下钻实例

渲染地图首先要安装依赖

使用echarts实现3d地图，我们需要安装依赖，echarts和echarts-gl的版本是一一对应的，版本差别很大可能会报错，这里我们使用的是echarts 5.2.0和 echarts-gl 2.0.8

"echarts": "^5.2.0", "echarts-gl": "^2.0.8", 引入地图数据

要实现下钻实例，我们需要先把对应的地图数据加载出来。

import dataMap from '../data/100000.json' import data410000 from '../data/410000.json' import data440000 from '../data/440000.json' import data150000 from '../data/150000.json' import data230000 from '../data/230000.json' import data650000 from '../data/650000.json' import data420000 from '../data/420000.json' import data210000 from '../data/210000.json' import data370000 from '../data/370000.json' import data610000 from '../data/610000.json' import data310000 from '../data/310000.json' import data520000 from '../data/520000.json' import data500000 from '../data/500000.json' import data540000 from '../data/540000.json' import data340000 from '../data/340000.json' import data350000 from '../data/350000.json' import data430000 from '../data/430000.json' import data460000 from '../data/460000.json' import data320000 from '../data/320000.json' import data630000 from '../data/630000.json' import data450000 from '../data/450000.json' import data640000 from '../data/640000.json' import data330000 from '../data/330000.json' import data130000 from '../data/130000.json' import data620000 from '../data/620000.json' import data510000 from '../data/510000.json' import data120000 from '../data/120000.json' import data110000 from '../data/110000.json' import data220000 from '../data/220000.json' import data530000 from '../data/530000.json' import data360000 from '../data/360000.json' import data140000 from '../data/140000.json' 地图渲染

vue echarts实现3d地图效果实例

接下来我们完成地图的初步渲染。

点击事件监听

通过myChart.on方法我们可以获取到点击事件信息,如果你的click监听获取不到数据的话，可以通过这里解决vue echarts-gl 3d 点击地图无法获取监听事件.

myChart.on('click', params => { console.log('params------', params) console.log(that.areaName) that.areaName = params.name that.getCode() }) 销毁事件

当3d地图执行多次返回下钻后，就会非常卡顿，甚至卡死，为了避免这种情况的出现，我们需要每次重绘地图前先销毁当前的地图。我们通过dispose()来实现。

if(this.myChart){ this.myChart.dispose() } 实例代码返回 import * as echarts from "echarts" import 'echarts-gl' import dataMap from '../data/100000.json' import data410000 from '../data/410000.json' import data440000 from '../data/440000.json' import data150000 from '../data/150000.json' import data230000 from '../data/230000.json' import data650000 from '../data/650000.json' import data420000 from '../data/420000.json' import data210000 from '../data/210000.json' import data370000 from '../data/370000.json' import data610000 from '../data/610000.json' import data310000 from '../data/310000.json' import data520000 from '../data/520000.json' import data500000 from '../data/500000.json' import data540000 from '../data/540000.json' import data340000 from '../data/340000.json' import data350000 from '../data/350000.json' import data430000 from '../data/430000.json' import data460000 from '../data/460000.json' import data320000 from '../data/320000.json' import data630000 from '../data/630000.json' import data450000 from '../data/450000.json' import data640000 from '../data/640000.json' import data330000 from '../data/330000.json' import data130000 from '../data/130000.json' import data620000 from '../data/620000.json' import data510000 from '../data/510000.json' import data120000 from '../data/120000.json' import data110000 from '../data/110000.json' import data220000 from '../data/220000.json' import data530000 from '../data/530000.json' import data360000 from '../data/360000.json' import data140000 from '../data/140000.json' export default { name: "item1", data() { return { listCode: [], myChart: null, areaName: '', list: [ { "name": "河南省", "code": "410000", "data": data410000 }, { "name": "广东省", "code": "440000", "data": data440000 }, { "name": "内蒙古自治区", "code": "150000", "data": data150000 }, { "name": "黑龙江省", "code": "230000", "data": data230000 }, { "name": "新疆维吾尔自治区", "code": "650000", "data": data650000 }, { "name": "湖北省", "code": "420000", "data": data420000 }, { "name": "辽宁省", "code": "210000", "data": data210000 }, { "name": "山东省", "code": "370000", "data": data370000 }, { "name": "陕西省", "code": "610000", "data": data610000 }, { "name": "上海市", "code": "310000", "data": data310000 }, { "name": "贵州省", "code": "520000", "data": data520000 }, { "name": "重庆市", "code": "500000", "data": data500000 }, { "name": "西藏自治区", "code": "540000", "data": data540000 }, { "name": "安徽省", "code": "340000", "data": data340000 }, { "name": "福建省", "code": "350000", "data": data350000 }, { "name": "湖南省", "code": "430000", "data": data430000 }, { "name": "海南省", "code": "460000", "data": data460000 }, { "name": "江苏省", "code": "320000", "data": data320000 }, { "name": "青海省", "code": "630000", "data": data630000 }, { "name": "广西壮族自治区", "code": "450000", "data": data450000 }, { "name": "宁夏回族自治区", "code": "640000", "data": data640000 }, { "name": "浙江省", "code": "330000", "data": data330000 }, { "name": "河北省", "code": "130000", "data": data130000 }, { "name": "甘肃省", "code": "620000", "data": data620000 }, { "name": "四川省", "code": "510000", "data": data510000 }, { "name": "天津市", "code": "120000", "data": data120000 }, { "name": "北京市", "code": "110000", "data": data110000 }, { "name": "吉林省", "code": "220000", "data": data220000 }, { "name": "云南省", "code": "530000", "data": data530000 }, { "name": "江西省", "code": "360000", "data": data360000 }, { "name": "山西省", "code": "140000", "data": data140000 } ] } }, components: {}, watch: {}, computed: { mapData: function () { var data = [] if (this.listCode.length > 0) { data = this.listCode[this.listCode.length - 1].data } else { data = dataMap } return data } }, mounted() { var that = this; const viewElem = document.body; // 监听窗口变化,重绘echarts const resizeObserver = new ResizeObserver(() => { setTimeout(() => { that.drawEcharts(); }, 300) }); resizeObserver.observe(viewElem); }, methods: { goback() { var that = this; that.listCode.splice(that.listCode.length - 1, 1) console.log(that.listCode) that.drawEcharts() }, getCode() { var that = this; // 如果code不存在,则说明 that.list.forEach((type) => { if (type.name == that.areaName) { var isHas = 0 that.listCode.forEach((type2) => { if (type2.name == that.areaName) { isHas = 1 } }); if (!isHas) { that.listCode.push(type) } } }); console.log(that.listCode) that.drawEcharts() }, drawEcharts() { var that = this; if (this.myChart) { this.myChart.dispose() } var chartDom = that.$refs.centerMap; var myChart = this.myChart = echarts.init(chartDom); myChart.clear() myChart.resize() var nameMap = '地图数据'; // 图标数据 echarts.registerMap(nameMap, this.mapData); var optionMap = { series: [{ map: nameMap, type: "map3D", roam: true, itemStyle: { color: '#6089d1', borderWidth: 0.8, borderColor: '#a9dbff' }, emphasis: { itemStyle: { color: '#ddb84c' }, }, label: { show: true, color: '#fff', //地图初始化区域字体颜色 fontSize: 14, opacity: 1, }, }] }; myChart.clear() myChart.resize() myChart.setOption(optionMap); myChart.on('click', params => { console.log('params------', params) console.log(that.areaName) that.areaName = params.name that.getCode() }) } }, } .item1 { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; flex-direction: row; align-content: flex-start; } .map { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; flex-direction: row; align-content: flex-start; margin: 0 auto; position: absolute; z-index: 0; img { height: 100%; max-width: 100%; max-height: 100%; } } .centerMap { width: 100%; height: 100%; position: relative; z-index: 1; top: 0; } .back { position: absolute; right: 20px; top: 20px; color: red; font-size: 14px; cursor: pointer; z-index: 100; } 更多echarts 3d地图

vue3 echarts-gl 3d地图实例汇总

更新日志

2023年09月10日

移除node-sass组件

vue echarts-gl 3d地图实现下钻完整实例代码下载

当前完整演示实例代码下载

项目基于Vue3 vite js实现

相关文件下载地址此资源需支付 ¥5 后下载支付宝微信支付如已付费购买，请免登录验证。支付宝购买扫右侧红包码购买更优惠，如无法下载请联系微信:17331886870 喜欢 (0)

【本文地址】

公司简介

联系我们