以河南地图为例:

代码如下:

<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(地图) 不同颜色区块显示的更多相关文章

  1. echarts map 地图在react项目中的使用

    需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...

  2. Echarts Map地图类型使用

    使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/articl ...

  3. Echarts Map地图下钻至县级

    **准备工作:**1.首先使用vue-cli的脚手架生成vue项目. 2.然后使用npm安装echartsnpm install echarts -S 3.安装完后再mian.js中挂载到vue的实例 ...

  4. echarts map地图设置外边框或者阴影

    geo: { map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, aspectScale: 1, //长宽比 la ...

  5. Echarts地图悬浮框显示多组series数据以及修改地图大小

    1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...

  6. echarts以地图形式显示中国疫情情况实现点击省份下钻

    首先要导入对应的包.下钻用到各个省份的json文件等内容导入之后进行相关的操作. 首先是从数据库中读取相应的数据文件.通过list方式.只有在ser出转化为json文件.在jsp页面通过ajax来进行 ...

  7. 百度地图结合echarts并添加行政区块

    作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...

  8. 如何在WindowsPhone Bing Map控件中显示必应中国中文地图、谷歌中国中文地图。

    原文:如何在WindowsPhone Bing Map控件中显示必应中国中文地图.谷歌中国中文地图. 最近正好有点业余时间,所以在做做各种地图.Bing Map控件本身就能显示必应地图,但是很遗憾微软 ...

  9. ECharts+百度地图网络拓扑应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

随机推荐

  1. dedecms织梦上下页标签和CSS

    模板中的分页部分源码: <div class="pagination-wrapper" style= "font-size:20pt;color:red;text- ...

  2. .net开源工作流ccflow从表数据数据源导入设置

    第1节. 关键字 驰骋工作流引擎 流程快速开发平台 workflow ccflow jflow  .net开源工作流 第2节. 从表数据导入设置 1.1.1: 概要说明 在从表的使用中我一般都会用到从 ...

  3. sql 上舍下舍運用

    [四舍五入取整截取] select round(54.56,0) [向下取整截取] SELECT FLOOR(54.56) [向上取整截取]  SELECT   CEILING(13.15) --MS ...

  4. Storm入门-Storm与Spark对比

    作为一名程序员通病就是不安分,对业界的技术总要折腾一番,哪怕在最终实际工作中应用到的就那么一点.最近自己准备入门Storm学习,关于流式大数据框架目前比较流行的有Spark和Storm等,在入门之前, ...

  5. Python 之网络式编程

    一 客户端/服务器架构 即C/S架构,包括 1.硬件C/S架构(打印机) 2.软件B/S架构(web服务) C/S架构与Socket的关系: 我们学习Socket就是为了完成C/S的开发 二 OSI七 ...

  6. 数据压缩算法---LZ77算法 的分析与实现

    LZ77简介 Ziv和Lempel于1977年发表题为“顺序数据压缩的一个通用算法(A Universal Algorithm for Sequential Data Compression )”的论 ...

  7. windows10安装mysql-8.0.13(zip安装)

    安装环境说明 系统版本:windows10 mysql版本:mysql-8.0.13-winx64.zip 下载地址:http://mirrors.163.com/mysql/Downloads/My ...

  8. qt5.11.2+vs2017环境下opencv3.4.1编译配置

    OpenCV是一个开源的计算机库,它可以帮助视觉工作者做很多富有创造性的工作,在图像处理领域扮演着重要的角色.由于opencv3.x的存在,不管你是学生还是研究人员,是专家还是初学者,都可以快速的建立 ...

  9. windowsserver 2019系统安装教程

    windowsserver2019和windowsserver2016一样也分两个版本标准版和数据中心版. 1.插入系统光盘 2.选择安装版本一般选择带桌面体验的,要不安装成功后没有桌面. 3.设置分 ...

  10. 最好用的jQuery-Ajax缓存插件

    AJAX-Cache    最好用的jQuery-Ajax缓存插件 介绍 AJAX-Cache是一款jQuery插件,基于localStorage/sessionStorage实现异步请求缓存功能,并 ...