echarts 地图标点提示
<div ref="mapchart" style="width:100%;height:100%">
import echarts from 'echarts'
import '地点.js'
option: {
tooltip: {
trigger: 'item',
textAlign: 'center',
padding: 15,
borderColor: '#FFFFCC',
text: 'center',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter(params, ticket, callback) {
//根据业务自己拓展要显示的内容
res = `<p style="text-align:center;font-size:18px">${name}</p>`
return res
}
},
// 地图
geo: {
map: '地点',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: false, //是否允许缩放
itemStyle: {
normal: {
color: '#00004d',
borderColor: '#0057e7', //省市边界线00fcff 516a89
borderWidth: 2
},
emphasis: {
color: '#032587' //悬浮背景rgba(11, 13, 61, 1) rgba(37, 43, 61, .5)
}
}
},
series: {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 3, //动画时间，值越小速度越快
scale: 3 //波纹圆环最大限制，值越大波纹越大
},
// 坐标名称
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter(params) {
//圆环显示文字
// console.log(params.data, "name");
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
// 标点颜色
itemStyle: {
normal: {
show: false,
color: '#25CEF3'
}
},
// 标点坐标
自己的坐标点
}
}
methods: {
handleSearch() {
this.dataInit()
},
dataInit() {
let mapChart = echarts.init(this.$refs.mapchart)
mapChart.setOption(this.option)
}
},
mounted() {
this.handleSearch()
}
echarts 地图标点提示相关推荐
- vue-cli 项目 echarts 地图标点功能
参考echarts官网api文档:https://echarts.apache.org/zh/option.html#title 地图标点,带数字显示 效果图 复制代码后可查看效果(提示:记得配置js ...
- echarts 地图tooltip提示框超出浏览器窗口怎么隐藏？
echarts tooltip提示框超出浏览器窗口怎么隐藏? 在使用echarts做图时,发现tooltip默认会超出浏览器窗口外,刚开始想做边境检测,试着写了一些代码发现太麻烦了,需要上下左右做多次 ...
- echarts 世界地图标点_关于echarts的那些事（地图标点，折线图，饼图）
前记:离上一篇博客的发布已经过去两个月了,这期间总想写点什么,却怎么都写不出来,一直拖到了现在.现在的感觉,不是像这期间一样,想好好整理一番,写一篇好博客,却写不出来.事实发现,随心就好,较好的博客, ...
- echarts 世界地图标点_ECharts添加地图标点(笔记）
ECharts添加地图标点(笔记) 如图: 实例html: var dom = document.getElementById("container"); var myChart ...
- ECharts地图，自定义map地图显示不同图标点，点击标点显示不同弹框
ECharts地图点击标注显示不同弹框 使用的是湖北省js 可以自行更换 效果图 gitee下载地址 https://gitee.com/han-zihao/echarts
- Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示 文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言 实现的效果 ...
- 高德地图使用、echarts地图等地图设置
1.高德地图使用 前提准备: 1.打开高德地图开方平台,注册账号: https://console.amap.com/dev/key/app 2.创建一个应用,获取key值. 一.引入相关资源 < ...
- echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
- html海南地图插件,Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
最新文章
- Postgres-XL的使用与动态增删数据节点
- js容易被忘记的基础知识点————变量类型
- “腾讯看点”打响信息流的全面战争
- php 状态模式,PHP设计模式（十九）—状态模式 (State Pattern)
- vue2.0父向子传参，子向父传参，路由传参
- 牛客网暑期ACM多校训练营（第三场）H - Diff-prime Pairs
- [ZJOI2005]午餐
- 深入理解java：2.3.4. 并发编程concurrent包 之容器ConcurrentLinkedQueue（非阻塞的并发队列---循环CAS）...
- P1165 日志分析 洛谷
- 阿里ai人工智能平台_AI标签众包平台
- 微信支付开发文档说明
- 使用vue-pdf-signature实现pdf预览
- 常用的三种非对称加密算法
- 【小墨mysql】mysql系列之一---索引
- robots文件的作用
- SpringAop两种配置：xml配置和注解方式
- Java 在线编程编译工具上线,直接运行Java代码
- 如何修改mtp模式在电脑上显示的存储容量大小？
- svm兵王_飞彩网福利彩
- 前端HTML5视频_HTML5核心-张晓飞-专题视频课程