Echarts 中国地图各个省市自治区自定义颜色
前言
最近接了一个外包的项目,其中有个需求是这样的,
需要展示一个中国的统计地图,要求每个省市区都是不一样的颜色,必须特别区分开。以及隐藏南海部分。
看了Echats相关文档,发现有类似的demo,但不是特别符合要求。于是自己仔细读文档研究。找到解决问题于是分享一下。
正文
废话不多少,直接上代码
方法1 (在数据中直接添加样式)
需要后台配合的data数据结构如下:
data: {
{name: '北京',value: 11,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '天津',value: 22,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '上海',value: 33,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '重庆',value: 44,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '河北',value: 55,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '河南',value: 66,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '云南',value: 77,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '辽宁',value: 88,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '湖南',value: 99,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '南海诸岛',value: 99,itemStyle:{normal:{opacity:0,label:{show:false}}}},
..........
}
// areaColor 就是省的自定义颜色值
// opacity 就是某个省透明,一般有业务需求要求隐藏南海诸岛(虽然业务有要求,但是一定要记住南海永远是中国的一部分,南海永远是中国的一部分,南海永远是中国的一部分,重要的事情说三遍!)
前端配置信息
option = {
....... 省略大堆配置
series: [{
type: 'map',
name: 'tips名字',
data: data
}]
}
方法2 (在配置中添加样式,数据中定义颜色)
需要后台配合的data数据结构如下:
data: {
{"name": "北京", "value": 34, "count": 500, "color": "#f00"},
{"name": "天津", "value": 33, "count": 300, "color": "#ff0"},
{"name": "上海", "value": 32, "count": 50, "color": "#f0f"},
{"name": "重庆", "value": 31, "count": 50, "color": "#0f0"},
{"name": "河北", "value": 30, "count": 120, "color": "#00f"},
........
}
前端配置信息
// data需要进行一次循环,填入设置。
var customSettings = [];
data.forEach(function (item, index) {
customSettings.push({
name: item.name,
itemStyle: {
areaColor: item.color,
color: item.color
}
})
})
// 南海单独设置,push 进数组
customSettings.push(
{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}
)
option = {
....... 省略大堆配置
geo: {
map: 'china',
top: 0,
bottom: 0,
regions: customSettings // 设置单独的样式。
}
series: [{
type: 'map',
name: 'tips名字',
data: data
}]
}
总结
这是我目前发现的两种方案,各有优劣, 第一种需要后台支持,返回你需要的数据,但是返回的数据中携带的数据量大很多。 不过也可以返回到前段自己循环组装数据。跟第二种方法差不多的循环方式,都可以。
Echarts 中国地图各个省市自治区自定义颜色的更多相关文章
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...
- echarts中国地图
echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...
- echarts使用------地图生成----省市地图的生成及其他相关细节调整
为使用多种业务场景,百度echarts地图示例只有中国地图,那么在使用省市地图的时候,就需要我们使用省市的地图数据了 以下为陕西西安市的地图示例: 此页面引用echarts的js:http://ech ...
- vue + echart 实现中国地图 和 省市地图(可切换省份)
一.中国地图 1.先导入echarts,然后再main.js里引入echarts // 引入echartsimport echarts from 'echarts'Vue.prototype.$ech ...
- Echarts 中国地图(包括china.js文件)
用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...
- echarts 中国地图 数据自动提示
mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...
- 使用echarts简单制作中国地图,echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
- echarts 中国地图标注所在点
达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...
随机推荐
- loadrunner录制时web时,安全证书问题
测试环境:win7+LoadRunner11+ie9 遇到的问题:用LoadRunner录制时,打开百度,总是报安全证书问题,如图所示 解决方法:Tools——Recording Options——p ...
- CentOS7从U盘中拷贝文件
1. 要想从U盘中拷贝文件,必须要将U盘挂载到一个目录中,所以必须新建一个目录,一般建在/mnt下.我们执行:mkdir /mnt/usb来新建一个目录. 2. 查看U盘是否已经被识别.执行:df - ...
- scrapy-redis使用以及剖析
scrapy-redis是一个基于redis的scrapy组件,通过它可以快速实现简单分布式爬虫程序,该组件本质上提供了三大功能: scheduler - 调度器 dupefilter - URL去重 ...
- 云服务器ECS优惠券 阿里云 ecs 5折优惠码 阿里云5折优惠码 阿里云5折推荐码 阿里云优惠码 阿里云的5折优惠券 阿里云服务器购买优惠码 服务器购买优惠码
阿里云代金券 | 阿里云优惠券云服务器ECS,就是阿里云服务器,大家一定要清楚.云服务器ECS优惠券官方领取优惠页面:https://promotion.aliyun.com/ntms/act/amb ...
- Hibernate(一):安装hibernate插件到eclipse环境
离线安装hibernate插件到eclipse 为什么需要安装hibernate插件到eclipse?在开发eclipse时,很多配置文件信息如果有了hibernate插件集成进来就会有自能提示,方便 ...
- POJ-2184 Cow Exhibition---01背包变形(负数偏移)
题目链接: https://vjudge.net/problem/POJ-2184 题目大意: 给出num(num<=100)头奶牛的S和F值(-1000<=S,F<=1000),要 ...
- datatables
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 数十种TensorFlow实现案例汇集:代码+笔记(转)
转:https://www.jiqizhixin.com/articles/30dc6dd9-39cd-406b-9f9e-041f5cbf1d14 这是使用 TensorFlow 实现流行的机器学习 ...
- 设计APP时我们该怎么做
不得不承认,手机APP已经渗透到我们的生活中,根据数据统计,人们每天平均有3.9个小时是花费在手机APP的使用上的,可以预见,手机APP正在改变我们的生活.手机APP受到人们的欢迎,很多商家也看到了其 ...
- [LeetCode] Number Of Corner Rectangles 边角矩形的数量
Given a grid where each entry is only 0 or 1, find the number of corner rectangles. A corner rectang ...