vue+echarts5实现中国地图的示例代码
更新时间：2022年01月18日 09:35:36 作者：易de
本文主要介绍了vue+echarts5实现中国地图的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用echarts5.0版本实现中国地图，E charts在5.0版本之后，地图不能直接引入了，需要自己去下载。
地图文件下载地址：
下载地址
（http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5）
注意： 将下载后的json文件放置/public目录下
map类型的地图
<template>
<div>
<div ref="mapEcharts" class="map-echart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
name: "Map",
data() {
return {
timer: null,
seriesData: [
{name: '天津市', value: 20057.34},
{name: '北京市', value: 15477.48},
{name: '上海市', value: 31686.1},
{name: '河北省', value: 6992.6},
{name: '山东省', value: 44045.49},
{name: '山西省', value: 4045.49},
],
map: null
}
},
created() {
},
mounted(){
this.initMapEcharts();
},
methods: {
initMapEcharts() {
// 获取地图数据
// 将下载后的json文件放置/public目录下
axios.get('/china.json').then(res => {
console.log(res);
// 使用数据注册地图
echarts.registerMap('china', res.data)
this.$nextTick(() => {
// 初始化地图
this.map = echarts.init(this.$refs['mapEcharts'])
// 设置基础配置项
const option = {
// 标题
title: {
text:"中国地图",
left: 'center',
subtext: "下载链接",
sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
},
// 悬浮窗
tooltip: {
trigger: 'item',
formatter: function(params) {
return `${params.name}: ${params.value || 0}`
}
},
// 图例
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
// 要显示的散点数据
series: [
{
type: 'map',
map: 'china',
// 这是要显示的数据
data: this.seriesData,
// 自定义命名映射，不设置的话，label默认是使用 geoJson中的name名
nameMap: {
'北京市': "北京重命名",
"天津市": '天津重命名'
},
},
]
}
// 将配置应用到地图上
this.map.setOption(option)
// 设置定时器，自动循环触发tooltip悬浮窗事件
this.setTimer()
let that = this;
// 当鼠标在地图上时，停止自动tooltip事件
this.map.on('mouseover', {series: 0,}, function(params) {
that.clearTimer()
})
// 当鼠标移出地图后，再自动tooltip
this.map.on('mouseout', {series: 0}, function(params) {
that.setTimer()
})
})
})
},
setTimer() {
// 当前选中区域的下标
let curIndex = -1;
this.timer && clearInterval(this.timer)
this.timer = setInterval(() => {
const len = this.seriesData.length;
// dispatchAction是主动去触发echarts事件，取消高亮当前的数据图形
this.map.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: curIndex
})
// 下一个选中区域的下标
curIndex = (curIndex + 1) % len;
// 高亮下一个数据图形
this.map.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: curIndex
})
// 显示tooltip
this.map.dispatchAction({
type: 'showTip',
seriesIndex:0,
dataIndex: curIndex
})
}, 1000)
},
clearTimer() {
this.timer && clearInterval(this.timer)
},
},
beforeDestroy() {
this.clearTimer()
}
}
</script>
<style>
.map-echart {
height: 900px;
width: 900px;
}
</style>
geo类型地图
<template>
<div>
<div ref="geoEcharts" class="geo-echart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
import { color } from 'echarts'
export default {
name: "Geo",
data() {
return {
timer: null,
seriesData: [
{name: '天津市', value: 20057.34},
{name: '北京市', value: 15477.48},
{name: '上海市', value: 31686.1},
{name: '河北省', value: 6992.6},
{name: '山东省', value: 44045.49},
{name: '山西省', value: 4045.49},
],
map: null
}
},
created() {
},
mounted(){
this.initGeoEcharts();
},
methods: {
initGeoEcharts() {
axios.get('/china.json').then(res => {
echarts.registerMap('china', res.data)
this.$nextTick(() => {
const map = echarts.init(this.$refs['geoEcharts'], null, {renderer:'svg'})
const option = {
title: {
text:"中国地图",
left: 'center',
subtext: "下载链接",
sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
},
// 悬浮窗
tooltip: {
trigger: 'item',
formatter: function(params) {
console.log(2222, params);
return `${params.name}: ${params.value || 0}`
}
},
// 图例
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
geo: {
map: 'china',
zoom: 1,
roam: 'move',
nameMap: {
'新疆维吾尔自治区': "新疆",
"西藏自治区": '西藏',
"甘肃省": "甘肃",
"宁夏回族自治区": "宁夏",
"广西壮族自治区": "广西",
"内蒙古自治区": "内蒙古",
"香港特别行政区": "香港",
"澳门特别行政区": "澳门"
},
label: {
show: true,
color: 'black',
position: "inside",
distance: 0,
fontSize: 10,
rotate:45
},
// 所有地图的区域颜色
itemStyle: {
areaColor: 'rgba(0,60,153,0.8)',
borderColor: '#02c0ff'
},
emphasis: {
itemStyle: {
areaColor: 'rgba(0,60,153,0.5)',
shadowColor: 'rgba(0,0,0,0.8)',
shadowBlur: 5,
shadowOffsetY: 5
}
},
// 针对某些区域做一些特别的样式
// regions: [{
// name: '广东省',
// itemStyle: {
// areaColor: 'yellow',
// color: 'black',
// borderColor: 'pink'
// }
// }]
},
// 数据
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '江苏省', value:[120.15, 31.99, 9]}, // 值为，经纬度，数据
{name: '湖北省', value: [111, 31.89, 15477]},
{name: '四川省', value: [102.15, 31.89, 31686]},
{name: '浙江省', value: [120.15, 29.89, 6992]},
{name: '山东省', value: [118.15, 36.9, 44045]}
],
SymbolSize: 4
},
{
type: 'lines',
coordinateSystem: 'geo',
data: [
{coords: [[121.15,38], [111, 31.89], [100.15, 31.89],[121.15, 29.89], [105.15, 30.89]]}
],
polyline: true, // 是否是多段线
lineStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false, // 缺省为 false
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
curveness: 1
},
opacity: 0.3,
width: 2,
},
// 线特效的配置
effect: {
show: true,
period: 5, // 特效动画的时间，单位为 s
trailLength: 1, //特效尾迹长度[0,1]值越大，尾迹越长重
// symbol: 'image://' + require('@/echartsMap/money.png'), // 自定义动画图标
symbolSize: 15, //图标大小
color:"red"
}
}
]
}
map.setOption(option)
})
})
}
},
}
</script>
<style>
.geo-echart{
height: 900px;
width: 900px;
}
</style>
到此这篇关于vue+echarts5实现中国地图的示例代码的文章就介绍到这了,更多相关vue echarts5中国地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 动态style 拼接宽度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
与后端生成二维码相比,前端生成二维码更具有灵活性,下面这篇文章主要给大家介绍了关于Vue中两种生成二维码(带logo)并下载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了使用vite兼容低端浏览器配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要为大家详细介绍了vue router2.0二级路由的简单使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios)，本文给大家介绍Vue axios和vue-axios关系，感兴趣的朋友一起看看吧2022-08-08
这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了vue实现点击展开,点击收起效果，首先我们需要定义data里面的数据，使用computed对data进行处理,需要的朋友可以参考下2018-04-04
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
为了快速体验 MVVM 模式，我选择了非工程化方式来起步，并选择使用 Vue.js，以及基于它构建的 iView UI 框架。本文给大家分享基于 Vue.js 之 iView UI 框架非工程化实践记录，需要的朋友参考下吧2017-11-11
这篇文章主要介绍了解决pycharm双击但是无法打开的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue+element-ui 实现表格的分页功能示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论