使用echarts在地图中使用dispatchAction
时间:2021-10-11
本文章向大家介绍使用echarts在地图中使用dispatchAction,主要包括使用echarts在地图中使用dispatchAction使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
注意事项
1、必须使用goe渲染地图
2、同一个option只能存在一个series参数
3、tooltip提示框默认跟随series参数展示
4、通过地图区域的鼠标悬停事件,用dispatchAction触发城市锚点scatter对应的tooltip
5、dispatchAction的seriesIndex必须加上
代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../echarts-4.8.0/package/dist/echarts.js"></script> <script src="./黔西南布依族苗族自治州.js"></script> </head> <body> <div id="map" style="width: 500px;height: 500px;margin: 0 auto"></div> <script type="text/javascript"> // 城市的坐标 // yoy : year on year 同比 // mom: month on month 环比 const scatterData = [ { name: '兴义市', value: [104.897982, 25.088599], typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }], }, { name: '安龙县', value: [105.471498, 25.108959], typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }], }, { name: '兴仁市', value: [105.192778, 25.431378], typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }], }, { name: '普安县', value: [104.955347, 25.786404], typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }], }, { name: '晴隆县', value: [105.218773, 25.832881], typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }], }, { name: '贞丰县', value: [105.650133, 25.385752], typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }], }, { name: '望谟县', value: [106.091563, 25.166667], typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }], }, { name: '册亨县', value: [105.81241, 24.983338], typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }], }, ]; const option = { title: { text: '黔西南州', subtext: '兴义市', left: 'center', }, tooltip: { backgroundColor: '#fff', trigger: 'item', alwaysShowContent: true, triggerOn: 'mousemove' , formatter: function(params) { let htmlStr = ''; params.data.typeList.forEach(item => { // 判断数值升降 let colorSpan = number => { let color = number > 0 ? '#00cc99' : '#ff0000'; return `<span style="color: ${color}">${number}%</span>`; }; htmlStr += ` <div> ${item.type}:同比 ${colorSpan(item.yoy)} 环比 ${colorSpan(item.mom)} </div> `; }); return `<div style="width: 300px; height: 100px; border-radius: 5px; color: #000; font-weight: 600;"> ${htmlStr} </div>`; }, }, geo: { map: '黔西南州', roam: false, zoom: 1.2, itemStyle: { normal: { borderWidth: 2, borderColor: '#0090fe', //边框颜色 areaColor: '#003399', //地图区域颜色 }, emphasis: { show: 'true', borderWidth: 4, borderColor: '#b2163c', //边框颜色 areaColor: '#531f67', //鼠标移上去的颜色 }, }, label: { normal: { color: '#fff', fontWeight: 'bold', show: true, }, emphasis: { color: '#fff', fontWeight: 'bold', show: true, }, }, }, series:[ { type: 'scatter', coordinateSystem: 'geo', symbol: 'circle' , symbolSize: 10 , color: "#00cc99", data: scatterData } ] }; echarts.registerMap("黔西南州", jsonGeo); let myChart = echarts.init(document.getElementById('map')); myChart.setOption(option); myChart.on('mouseover' , (params)=>{ myChart.dispatchAction({ type:'showTip',//默认显示江苏的提示框 seriesIndex: 0,//这行不能省 name: params.name }); }) </script> </body> </html>
原文地址:https://www.cnblogs.com/onesea/p/15392009.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【Linux】tmux命令使用教程
- 【Android 音视频开发打怪升级:FFmpeg音视频编解码篇】七、Android FFmpeg 视频编码
- 2020已经过去五分之四了,你确定还不来了解一下JS的rAF?
- c#任意进制转换
- 缺失值的处理方法(基于sklearn)
- 中国核酸数据库GSA数据提交指南
- 基于sklearn建立机器学习的pipeline
- Sentinle集群流控【源码笔记】
- ggplot坐标轴方向设置
- Scaling与Normalization的区别
- Android 音乐APP(一)扫描本地音乐
- Semaphore:如何快速实现一个限流器?
- 延迟初始化Spring Bean:延迟初始化的Bean会影响依赖注入吗?
- Android 音乐APP(二)启动白屏优化、定位当前播放歌曲
- CompletableFuture:异步编程没那么难