VUE echarts绘制省级/市级地图自动轮循tooltip

效果图

绘制省级地图

1.安装echarts依赖，并在main.js中准备

import echarts from "echarts"
Vue.prototype.$echarts = echarts

2.直接引入echarts里的省级地图json（江苏为例）

 import 'echarts/map/js/province/jiangsu'

3.完整代码包含自动轮循

<template><div class="chartBox"><div id="chartMap" style="width: 100%; height: 100%;"></div></div>
</template><script>export default {data () {return {timer:null,};},mounted () {this.draw('chartMap');},methods: {getData(){let _this = thisreturn new Promise(resolve => {let citys = [{name: '南京市', value: 0,total:0},{name: '常州市', value: 0,total:0},{name: '徐州市', value: 0,total:0},{name: '淮安市', value: 0,total:0},{name: '南通市', value: 0,total:0},{name: '宿迁市', value: 0,total:0},{name: '无锡市', value: 0,total:0},{name: '扬州市', value: 0,total:0},{name: '盐城市', value: 0,total:0},{name: '苏州市', value: 0,total:0},{name: '泰州市', value: 0,total:0},{name: '镇江市', value: 0,total:0},{name: '连云港市', value: 0,total:0}]resolve(citys)})},draw (chart) {let _this = thislet myChart = this.$echarts.init(document.getElementById(chart))myChart.clear();myChart.showLoading();let index = -1;_this.timer = setInterval(function () {// 显示提示框myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: index + 1,});// 取消高亮指定的数据图形myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: index,});// 高亮指定的数据图形myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: index + 1,});index++;if (index > 13) {index = -1;}}, 4000);myChart.on("click", function (e) {clearInterval(_this.timer);myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: e.dataIndex,});myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: e.dataIndex,});});myChart.on("mousemove", function (e) {clearInterval(_this.timer);myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: e.dataIndex,});myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: e.dataIndex,});}); //---------------------------------------------鼠标移入静止播放myChart.on("mouseout", function (e) {clearInterval(_this.timer);myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: e.dataIndex,}); //鼠标移出后先把上次的高亮取消_this.timer = setInterval(function () {// 隐藏提示框myChart.dispatchAction({type: "hideTip",seriesIndex: 0,dataIndex: index,});// 显示提示框myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: index + 1,});// 取消高亮指定的数据图形myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: index,});// 高亮指定的数据图形myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: index + 1,});index++;if (index > 13) {index = -1;}}, 2000);});myChart.hideLoading();this.getData().then(result=>{let citys = []let  cityMin = 0, cityMax = 0;if(result&&result.length>0){citys = resultcityMin = citys[0].value ? citys[0].value : 0;cityMax = citys[0].value ? citys[0].value : 0;for (var i = 0; i < citys.length - 1; i++) {cityMin = cityMin > citys[i + 1].value ? citys[i + 1].value : cityMincityMax = cityMax < citys[i + 1].value ? citys[i + 1].value : cityMax}}let option = {title: {text: '江苏省xx人数情况',left: 0,textStyle: {fontSize: 16,color: "#257dff",}},grid: {x:50,y:55,},tooltip: {trigger: 'item',showDelay: 0,transitionDuration: 0.2,formatter: function (params) {let zs_count = params.value?params.value:0return `<span style="color: #ff0;font-weight: 700;">${params.name}</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? '(已满)' : ''}<br/>
<span style="color: #fff">已有人数：</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? params.value : ''}</span>
<span style="color: #fff">${(params.value < params.data.total) ? params.value : ''}<br/>
<span style="color: #fff">计划人数：${params.data.total} 人</span>`;},position:'right',confine: true,},visualMap: {left: 'left',min: cityMin,max: cityMax,inRange: {color: ['#AFEEEE','#e0f3f8','#B0C4DE','#abd9e9','#87CEFA','#74add1','#6495ED','#4575b4','#4169E1','#5A4ABD','#6166b5',]},text: ['High', 'Low'],calculable: true,show: false},series: [{name: '人数',type: 'map',roam: true,map: '江苏',//这里的名字和导入的echarts/map/js/province/jiangsu.js文件里的名字要对应label: {normal: {show: true,textStyle: {color: '#fff',textShadowOffsetX: 0,textShadowOffsetY: 0,textShadowBlur: 5,textShadowColor: '#000',}}},itemStyle: {emphasis: {label: {show: true,textStyle: {color: '#000',textShadowOffsetX: 0,textShadowOffsetY: 0,textShadowBlur: 10,textShadowColor: '#fff',}},areaColor: '#ff0'}},// 文本位置修正textFixed: {Alaska: [20, - 20]},data: citys,left: '30%',top: 0,right: '10%',bottom: 0,}]};myChart.setOption(option)})},},beforeDestroy() {clearInterval(this.timer);this.timer = null;},destroyed () {window.onresize = null;clearInterval(this.timer);this.timer = null;}};
</script><style scope lang="less" type="text/less">.chartBox {//width: 100%;height: 100%;width: 500px;height: 500px;}
</style>

市级地图（在上面省级地图的基础上修改）

1.echarts中没有直接的市级json；从DataV下载（以江苏南京市为例）

2.创建nanjing.json，并把上图拿到的json数据放进去

3.注入南京市地图json，没有这一步就不能继续玩了

  let nj_map = require('./nanjing.json')//路径根据nanjing.json文件本地路径改变this.$echarts.registerMap('南京',nj_map);

4.完整代码包含自动轮循

<template><div class="chartBox"><div id="chartMap" style="width: 100%; height: 100%;"></div></div>
</template><script>export default {data () {return {timer:null,};},mounted () {this.draw('chartMap');},methods: {getData(){let _this = thisreturn new Promise(resolve => {let nanjing= require('./nanjing.json')//路径根据nanjing.json文件本地路径改变let citys= []let areaList = nanjing.featuresfor (let i = 0; i < areaList.length; i++) {res.push({name: areaList[i].properties.name,value: 0,total: 0})}resolve(citys)})},draw (chart) {let _this = thislet myChart = this.$echarts.init(document.getElementById(chart))myChart.clear();myChart.showLoading();let index = -1;_this.timer = setInterval(function () {// 显示提示框myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: index + 1,});// 取消高亮指定的数据图形myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: index,});// 高亮指定的数据图形myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: index + 1,});index++;if (index > 13) {index = -1;}}, 4000);myChart.on("click", function (e) {clearInterval(_this.timer);myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: e.dataIndex,});myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: e.dataIndex,});});myChart.on("mousemove", function (e) {clearInterval(_this.timer);myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: e.dataIndex,});myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: e.dataIndex,});}); //---------------------------------------------鼠标移入静止播放myChart.on("mouseout", function (e) {clearInterval(_this.timer);myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: e.dataIndex,}); //鼠标移出后先把上次的高亮取消_this.timer = setInterval(function () {// 隐藏提示框myChart.dispatchAction({type: "hideTip",seriesIndex: 0,dataIndex: index,});// 显示提示框myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: index + 1,});// 取消高亮指定的数据图形myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: index,});// 高亮指定的数据图形myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: index + 1,});index++;if (index > 13) {index = -1;}}, 2000);});myChart.hideLoading();//注入南京市地图json，没有这一步就不能继续玩了let nj_map = require('./nanjing.json')//路径根据nanjing.json文件本地路径改变this.$echarts.registerMap('南京',nj_map);this.getData().then(result=>{let citys = []let  cityMin = 0, cityMax = 0;if(result&&result.length>0){citys = resultcityMin = citys[0].value ? citys[0].value : 0;cityMax = citys[0].value ? citys[0].value : 0;for (var i = 0; i < citys.length - 1; i++) {cityMin = cityMin > citys[i + 1].value ? citys[i + 1].value : cityMincityMax = cityMax < citys[i + 1].value ? citys[i + 1].value : cityMax}}let option = {title: {text: '南京市xx人数情况',left: 0,textStyle: {fontSize: 16,color: "#257dff",}},grid: {x:50,y:55,},tooltip: {trigger: 'item',showDelay: 0,transitionDuration: 0.2,formatter: function (params) {let zs_count = params.value?params.value:0return `<span style="color: #ff0;font-weight: 700;">${params.name}</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? '(已满)' : ''}<br/>
<span style="color: #fff">已有人数：</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? params.value : ''}</span>
<span style="color: #fff">${(params.value < params.data.total) ? params.value : ''}<br/>
<span style="color: #fff">计划人数：${params.data.total} 人</span>`;},position:'right',confine: true,},visualMap: {left: 'left',min: cityMin,max: cityMax,inRange: {color: ['#AFEEEE','#e0f3f8','#B0C4DE','#abd9e9','#87CEFA','#74add1','#6495ED','#4575b4','#4169E1','#5A4ABD','#6166b5',]},text: ['High', 'Low'],calculable: true,show: false},series: [{name: '人数',type: 'map',roam: true,map: '南京',//这里的名字和上面registerMap里的名字要对应label: {normal: {show: true,textStyle: {color: '#fff',textShadowOffsetX: 0,textShadowOffsetY: 0,textShadowBlur: 5,textShadowColor: '#000',}}},itemStyle: {emphasis: {label: {show: true,textStyle: {color: '#000',textShadowOffsetX: 0,textShadowOffsetY: 0,textShadowBlur: 10,textShadowColor: '#fff',}},areaColor: '#ff0'}},// 文本位置修正textFixed: {Alaska: [20, - 20]},data: citys,left: '30%',top: 0,right: '10%',bottom: 0,}]};myChart.setOption(option)})},},beforeDestroy() {clearInterval(this.timer);this.timer = null;},destroyed () {window.onresize = null;clearInterval(this.timer);this.timer = null;}};
</script><style scope lang="less" type="text/less">.chartBox {//width: 100%;height: 100%;width: 500px;height: 500px;}
</style>

VUE echarts绘制省级/市级地图自动轮循tooltip相关推荐

vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
vue+echarts实现江苏省疫情地图
vue+echarts实现江苏省疫情地图文章目录 vue+echarts实现江苏省疫情地图前言一.使用步骤 1.引入库 2.代码数据效果前言作为刚学习vue结合echarts写的案例,当前 ...
echarts绘制上海市乡镇级地图
echarts绘制上海市乡镇级地图 echarts 最新版本不支持GeometryCollection,虽然有人在4年前就提了issue <!DOCTYPE html> <html ...
Echarts — 绘制省级地图
版本:vue@3.0.5 + echarts@5.1.2 本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例) 一.安装 echarts npm i echarts --save-de ...
echarts如何引入市级地图
1.获取相应市级地图的json文件阿里云 DataV - 数据可视化平台 2.在<script></script>标签中使用jquery的异步加载获取资源 3.不说了,直接上 ...
echarts 绘制县级市地图数据可视化
背景: 上头给了我一个使用兰溪市地图进行相关的数据可视化任务,我自然想到了以前用过的echarts,但使用过发现他自带的能实现的只到地级市(例如金华市),而县级市的区划暂时没法实现. 本文以兰溪市(县 ...
vue+Echarts绘制K线图详解（一）----基本日K图绘制
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基础K线图 2.1 基础k线图 2.2 基础日k图 3 总结 1 引入Echarts 1.1 安装使用如下命令通过 n ...
vue中用echarts 绘制geo 中国地图
前言由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
vue echarts绘制省份地图并添加自定义标注
效果图在main.js中引入地图 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 省份是动态引入的,在.vue文件中 ...

VUE echarts绘制省级/市级地图自动轮循tooltip

效果图

绘制省级地图

1.安装echarts依赖，并在main.js中准备

2.直接引入echarts里的省级地图json（江苏为例）

3.完整代码包含自动轮循

市级地图（在上面省级地图的基础上修改）

1.echarts中没有直接的市级json；从DataV下载（以江苏南京市为例）

2.创建nanjing.json，并把上图拿到的json数据放进去

3.注入南京市地图json，没有这一步就不能继续玩了

4.完整代码包含自动轮循

VUE echarts绘制省级/市级地图自动轮循tooltip相关推荐

最新文章

热门文章