Echars地图加散点图配置

最近公司需要做一个地图并显示项目的分布数据，调查了好久才解决掉。

效果如下图：

用echarts 地图 + 散点图实现的，代码如下：

 // echarts 配置
this.options = {tooltip: {trigger: 'item'},geo: { // 地图配置// show: true,map: '青岛市',center: [120.209902019531, 36.3710241640625],label: {normal: {show: false},emphasis: {show: false}},roam: false,itemStyle: {normal: {// areaColor: '#47D1FF',borderColor: '#94afe0',shadowOffsetX: 5,shadowOffsetY: 10,borderWidth: 1,shadowColor: '#2835a5',shadowBlur: 5,opacity: 0.9},emphasis: {areaColor: '#2B91B7'}},zoom: 1.1},series: [{ // 散点配置name: '数量',type: 'effectScatter',coordinateSystem: 'geo',data: sanData,tooltip: {padding: [0, 30, 0, 0],backgroundColor: 'rgba(8, 29, 96, .5)', // hover显示文字的背景颜色formatter: params => {return `<ul style="list-style: none;font-size: 14px;"><li>用户名称：${params.data.userName}</li><li style="height: 3PX"></li><li>地址：${params.data.address}</li><li style="height: 3PX"></li><li>线路：${params.data.supplyVoltageName}</li><li style="height: 3PX"></li><li>业务类型：${params.data.businessTypeName}</li></ul>`}},symbolSize: function(val) {return val[2]},showEffectOn: 'emphasis',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: (item) => {},position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#ff8003'// color:'#a71818'}}}, { // 地图配置name: '工程数',map: '青岛市',center: [120.209602019531, 36.3610241640625],type: 'map',mapType: '青岛市', // 自定义扩展图表类型geoIndex: 1,tooltip: {padding: [0, 30, 0, 0],backgroundColor: 'rgba(8, 29, 96, .5)', // hover显示文字的背景颜色formatter: params => {return `<ul style="list-style: none;"><li>区域:${params.data.name}</li><li>数量:${params.data.count}</li></ul>`}},aspectScale: 0.75, // 长宽比itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},data: mapData,zoom: 1.1}]}this.$nextTick(() => {let that = this// 点击地图穿透事件this.$refs.map.chart.off('click')this.$refs.map.chart.on('click', (params) => {console.log(params, '点击事件')if (params.componentSubType === 'map') {this.$message.success('map')} else {this.$message.success('数量')}})})

Echars地图加散点图配置相关推荐

echars省份地图（安徽地图地图加散点图）亮点展示
echars省份地图(安徽地图地图加散点图)亮点展示一:需求讲解: 使用echars制作省份地图,显示城市名称,定位标点:点击地图区域,地图标点高亮. 二:主要准备工作 (1):引入echars ( ...
Java记录-SpringMVC整合Echarts画地图加散点图
1.搭建eclipse+JDK+Maven+SpringMVC+Spring+Mybatis后台架构,详细就不过多阐述了 2.下载百度eharts插件:http://echarts.baidu.com ...
table切换数据 vue_Vue 知识整合贴 ( 超干货，适合收藏)
bug收集:专门解决与收集bug的网站网址:www.bugshouji.com 公众号中,不能跳转链接.可以查看 "原文" 进入到网页中,再点链接,即可打开 vue-cli3脚手 ...
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
ECharts可视化库学习笔记
数据可视化 Day01 1.什么是数据可视化 1.1 什么是数据可视化 1.2 可视化的实现方式 2.ECharts的基本使用 2.1 ECharts的介绍丰富的可视化类型多种数据格式支持流数据 ...
Echats详细介绍
一,什么是echars? Echars官网是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器. 二,特点 1,EC ...
数据怎么转化成图形分析？快来学习Echarts5开发技术
目录一. Apache ECharts 1.1 引入 Apache ECharts 1.2 开始简单的图表二. 图表容器及大小三. 数据集四. 多个 dataset 以及如何引用他们五. 使 ...
Matplotlib可视化散点图、配置X轴为对数坐标、并使用线条（line）连接散点图中的数据点、基于分组变量配置数据点的颜色(connecting two coordinates with line
Matplotlib可视化散点图.配置X轴为对数坐标.并使用线条(line)连接散点图中的数据点.基于分组变量配置数据点的颜色(connecting two coordinates with line ...
R语言使用ggplot2包geom_jitter()函数绘制分组（strip plot，一维散点图）带状图（颜色配置：连续色彩、离散色彩、色彩梯度）实战
R语言使用ggplot2包geom_jitter()函数绘制分组(strip plot,一维散点图)带状图(颜色配置:连续色彩.离散色彩.色彩梯度)实战目录 R语言使用ggplot2包geom_ji ...
R语言使用ggplot2包geom_jitter()函数绘制分组（strip plot，一维散点图）带状图（双分类变量分组：色彩配置、形状配置）实战
R语言使用ggplot2包geom_jitter()函数绘制分组(strip plot,一维散点图)带状图(双分类变量分组:色彩配置.形状配置)实战目录 R语言使用ggplot2包geom_jitt ...

Echars地图加散点图配置

Echars地图加散点图配置相关推荐

最新文章

热门文章