Echarts 地图 省份的颜色自定义如何设置?

 我来答
做一个快乐的茶农
高粉答主

2019-09-22 · 每个回答都超有意思的
知道答主
回答量:1396
采纳率:100%
帮助的人:34.5万
展开全部

1、首先将省份和颜色的关系描述起来,写到js中。

2、然后在地图实现方法中从数据库中获取数据,然后将数据作为变量代Echarts的option中的data值。

3、在注入这些值的时候进行判断,根据不同的选择情况,从关系描述的js中获取值,看看选择条件是否在范围之内,如果是,则加上itemStyle属性。

4、然后对不同的下拉选择进行判断,当点击查询按钮的时候,将这些值传递到定义的全局变量中。

5、接着写这个地图的点击事件,其中search_map()方法是重新查询后台数据,生成地图所需要的数据,regionList是定义的变量,用来存放要选中的区域块的值。

6、最后展示效果,各个省份都用颜色设置出来了。

百分之十的先生
2015-09-10
知道答主
回答量:2
采纳率:0%
帮助的人:1669
展开全部
地图的颜色可以分为默认的颜色 还有就是鼠标移上去之后的变色 itemStyle下面包括normal和emphasis 前者很明显是正常情况下 后者是强调 也就是鼠标移上去之后变色 所以每个下面都可以设置地图的颜色
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
//fontWeight:'bold',
color: "#231816"
}
},
borderColor: '#fff',
borderWidth: 2,
},
emphasis:
{
areaStyle:{
color:'red'},
label:
{
show:true,
color:'red',
textStyle: {
// fontWeight:'bold',
color: "#fff"
}
}
}
},
areaStyle就是设置地图省份区域颜色
以上前提是统一所有省份都一个颜色 不同颜色的话可以考虑dataRange 具体内容参考http://echarts.baidu.com/doc/example/dataRange2.html
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友5045f96
2017-08-29 · TA获得超过199个赞
知道小有建树答主
回答量:174
采纳率:100%
帮助的人:25.4万
展开全部
地图的颜色可以分为默认的颜色 还有就是鼠标移上去之后的变色 itemStyle下面包括normal和emphasis 前者很明显是正常情况下 后者是强调 也就是鼠标移上去之后变色 所以每个下面都可以设置地图的颜色
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
//fontWeight:'bold',
color: "#231816"
}
},
borderColor: '#fff',
borderWidth: 2,
},
emphasis:
{
areaStyle:{
color:'red'},
label:
{
show:true,
color:'red',
textStyle: {
// fontWeight:'bold',
color: "#fff"
}
}
}
},
areaStyle就是设置地图省份区域颜色
以上前提是统一所有省份都一个颜色 不同颜色的话可以考虑dataRange
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
zhangnz4
2017-12-14
知道答主
回答量:4
采纳率:0%
帮助的人:3543
展开全部
geo: {
map: 'china', // 引入中国地图
regions: [{ // 在地图中对特定的区域配置样式。
name: '青海',
itemStyle: {
normal: {
areaColor: 'red',
color: 'red'
}
}
}],
label: {
emphasis: {
show: true, // 是否显示省名称
}
},
roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
itemStyle: { //设置中国地图颜色
normal: {
areaColor: '#323c48', // 设置初始中国地图颜色
borderColor: '#404a59' // 设置中国地图背景颜色
},
emphasis: {
areaColor: '#2a333d' // 设置鼠标悬浮到省的颜色
}
}
},
series: series // 加载对中国地图的所有操作
};;
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式