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()})// 当鼠标移出地图后，再自动tooltipthis.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})// 显示tooltipthis.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, // 缺省为 falseshadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,curveness: 1},opacity: 0.3,width: 2,},// 线特效的配置effect: {show: true,period: 5, // 特效动画的时间，单位为 strailLength: 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 + echart 实现中国地图和省市地图（可切换省份
vue + echart 实现中国地图和省市地图(可切换省份) - 伏沙金 - 博客园
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
【vue】vue + ECharts 实现中国地图
1.效果图: 2.实现步骤引入ECharts ECharts 官网地址:https://echarts.apache.org/zh/index.html npm install echarts -- ...
Vue + Echarts 实现中国地图多级钻取功能
传送门:本文完整代码地址如果觉得有帮助,别忘了点亮 star 哦说明: 本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能(基本版未做过多功能拓展和样式优化便于二次开 ...
vue+echarts实现中国地图
先看效果图第一步:脚手架中引入echarts npm 安装 npm install echarts --save //引入echarts import * as echarts from 'echa ...
Vue+Echarts实现中国地图+各省业务数据分布情况组件
Vue组件首先需要引入echarts包和中国地图数据, import echarts from 'echarts' import '../../../node_modules/echarts/map/ ...
vue引入echarts中国地图
需求:显示各省名字,滑过标记地显示接入数量,点击标记地显示系统数量已接入及能跳转对应页面信息的入口: 配置: 1.安装依赖 npm install echarts -S 2.全局引入main.js ...
vue + echart +map中国地图，省市地图，区县地图
第一步:安装依赖包 npm install echarts --save 在main.js 中全局引入 import echarts from 'echarts' Vue.prototype.$ech ...

vue+echarts5 实现中国地图

vue+echarts5 实现中国地图相关推荐

最新文章

热门文章