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.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...
随机推荐
- 算法题丨4Sum
描述 Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...
- Dojo API中文 Dojo内容模块概览,初学者
官网:http://dojotoolkit.org/reference-guide/1.10/dojo/index.html#dojo-dojo的翻译 dojo 内容: dojo dojo/dojo ...
- QT5.5与MYSQL5.6数据库连接的具体方法与实现
由于毕设需要用到QT读取数据库中的数据,并将数据保存至数据库中.花了一天的时间,总算实现了从QT中读取数据库中的数据.网上相关资料很多,但是写得不是很全,中间出现了一些问题,解决起来比较麻烦.所以本文 ...
- 【原生js实现一键回到顶部】
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- python开发:初识python
python简介 Python可以应用于众多领域,如:数据分析.组件集成.网络服务.图像处理.数值计算和科学计算等众多领域.目前业内几乎所有大中型互联网企业都在使用Python,如:Youtube.D ...
- tornado解决高并发的初步认识牵扯出的一些问题
#!/bin/env python # -*- coding:utf-8 -*- import tornado.httpserver import tornado.ioloop import torn ...
- 编码注释coding: utf-8
# -*- coding: utf-8 -*- PY文件当中是不支持中文的,即使你输入的注释是中文也不行,为了解决这个问题,就需要把文件编码类型改为UTF-8的类型,输入这个代码就可以让PY源文件里面 ...
- phpmyadmin设置编码和字符集gbk或utf8_导入中文乱码解决方法
一.phpmyadmin设置新建数据库的默认编码为utf8编码的方法 1:新建数据库 my_db 2:使用sql语句 set character_set_server=utf8; //设置默认新 ...
- html学习之多行文本
代码如下: <body> <form action="post"> <!--wrap设置多行文本是否自动换行--> <textarea n ...
- IDEA2017.3.4破解方式
下载jetbrainsCrack-2.7-release-str.jar包 下载地址: https://files.cnblogs.com/files/xifenglou/JetBrains.zip ...