echarts Map(地图) 不同颜色区块显示
以河南地图为例:

代码如下:
<h3>天翼日必达完成率</h3>
<div id="map" style="height:340px; text-align:left; padding:0 20px 20px 20px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('map'));//初始化
myChart.setOption({
title: {
text: ''
},
tooltip : {
trigger: 'item',
/* formatter: '{b}',
itemSize:'14px'*/
},
/* dataRange: {
orient: 'vertical',
min: 0,
max: 55000,
text:['高','低'], // 文本,默认为数值文本
splitNumber:0
},*/
dataRange: {
x: 'left',
y: 'center',
splitList: [
{start: 0.8, label: '80%以上', color: '#FF6699'},
{start: 0.6, end: 0.8, label: '60-80%', color: '#CC3300'},
{start: 0.4, end: 0.6, label: '40-60%', color: '#F7BB37'},
{start: 0.3, end: 0.4, label: '30-40%', color: '#3BAE56'},
{start: 0.2, end: 0.3, label: '20-30%', color: '#92D050'},
{start: 0.1, end: 0.2, label: '10-20%', color: '#3899FF'},
{start: 0, end: 0.1, label: '0-10%', color: '#BFBFBF'}
],
textStyle: {
color: '#3899FF' // 值域文字颜色
},
selectedMode: false,
color: ['#E0022B', '#E09107', '#A3E00B']
},
series : [
{
name: '天翼日必达完成率',
type: 'map',
mapType: '河南',
mapLocation: {
x: 'left'
},
itemStyle:{
normal:{
label:{show:true}
},
emphasis:{label:{show:true}}
},
data:[
{name:'郑州市', value:0.9},
{name:'开封市', value:0.6},
{name:'洛阳市', value:0.5},
{name:'平顶山市', value:0.7},
{name:'安阳市', value:0.2},
{name:'鹤壁市', value:0.35},
{name:'新乡市', value:0.26},
{name:'焦作市', value:0.62},
{name:'濮阳市', value:0.82},
{name:'许昌市', value:0.56},
{name:'漯河市', value:0.24},
{name:'三门峡市', value:0.32},
{name:'南阳市', value:0.29},
{name:'商丘市', value:0.42},
{name:'信阳市', value:0.22},
{name:'周口市', value:0.12},
{name:'驻马店市', value:0.42},
{name:'济源市', value:0.05}
]
}],
});
</script>
一次真实项目中遇到 记录下 以防忘记。
echarts Map(地图) 不同颜色区块显示的更多相关文章
- echarts map 地图在react项目中的使用
需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...
- Echarts Map地图类型使用
使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/articl ...
- Echarts Map地图下钻至县级
**准备工作:**1.首先使用vue-cli的脚手架生成vue项目. 2.然后使用npm安装echartsnpm install echarts -S 3.安装完后再mian.js中挂载到vue的实例 ...
- echarts map地图设置外边框或者阴影
geo: { map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, aspectScale: 1, //长宽比 la ...
- Echarts地图悬浮框显示多组series数据以及修改地图大小
1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...
- echarts以地图形式显示中国疫情情况实现点击省份下钻
首先要导入对应的包.下钻用到各个省份的json文件等内容导入之后进行相关的操作. 首先是从数据库中读取相应的数据文件.通过list方式.只有在ser出转化为json文件.在jsp页面通过ajax来进行 ...
- 百度地图结合echarts并添加行政区块
作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...
- 如何在WindowsPhone Bing Map控件中显示必应中国中文地图、谷歌中国中文地图。
原文:如何在WindowsPhone Bing Map控件中显示必应中国中文地图.谷歌中国中文地图. 最近正好有点业余时间,所以在做做各种地图.Bing Map控件本身就能显示必应地图,但是很遗憾微软 ...
- ECharts+百度地图网络拓扑应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
随机推荐
- Web后端 JAVA学习之路
1.Java分类 Java按应用来分,可以分为J2ME(手机版),J2SE(标准版),J2EE(企业版)三部分. ・J2ME:已经被安卓开发取代. ・J2SE:Java的核心类,其中包括桌面应用,但一 ...
- webpack 单独打包指定JS文件(CopyWebpackPlugin)
背景: 不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件.npm install --save-dev ...
- align-content 与 align-items 区别
align-content 和 align-items : 1:共同点:它们对齐方向为交叉轴 2:不同点:align-content 应用于为 多行 而 align-items:应用于单行. 单 ...
- Dynamics 365-OnPremise V9 安装系统要求
Dynamics 365 V9 OnPremise发布之后,博主率真地直接下载安装,首先就遇到了操作系统不支持的问题,但是通过CRM安装报错提示,发现给的链接参考信息也不对. document的链接调 ...
- 小程序使用之WXS
文章链接:https://mp.weixin.qq.com/s/F1zzS7mvMpFaplq4KINzQg 之前做过一段时间的小程序开发,自己也写过两个自己的小程序,了解些前端的知识,相对而言还是比 ...
- 小米平板8.0以上系统如何不用root激活xposed框架的流程
在大多使用室的引流,或业务操作中,基本上都需要使用安卓的强大XPOSED框架,近来我们使用室购来了一批新的小米平板8.0以上系统,基本上都都是基于7.0以上系统版本,基本上都不能够刷入ROOT的su权 ...
- 人脸识别ArcFace C#DEMO 开发应用全过程
手上有一个项目,需要检验使用本程序的,是否本人!因为在程序使用前,我们都已经做过头像现场采集,所以源头呢是不成问题的,那么人脸检测,人脸比对,怎么办呢?度娘了下,目前流行的几个人脸检测,人脸比对核心, ...
- 重庆3Shape CAMbridge都有哪些功能
三维打印技术创新领导者Objet Geometries公司和牙科领域三维扫描仪.CAD/CAM软件解决方案供应商3Shape A/S公司日前宣布两家公司合作研发的牙科领域三维修复解决方案已付诸实施.此 ...
- linux使用Nginx搭建静态资源服务器
最近公司需要做一个宣传片播放 视频有点大 好几百M 就想到使用Nginx来代理静态资源,在过程中出现了一些问题,比如端口没开.访问是403等,没有成功,后面慢慢查找问题,才发现大部分博客资料的都不全 ...
- CentOS 7 系统下 GitLab 搭建
参考地址:https://blog.csdn.net/t748588330/article/details/79915003 1. 安装:使用 GitLab 提供仓库在线安装 curl -sS htt ...