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

【echarts】的json地图如何自定义各省份颜色~

根据选择的地区去加载地图数据然后给chart.setOption(); 改变红色字体的值就可以，红色字体是省的拼音具体查看echarts/map文件夹内文件，有js加载方式和json加载方式
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});

图颜色默认颜色 鼠标移变色 itemStyle面包括normalemphasis 前者明显情况 者强调 鼠标移变色 所每面都设置图颜色
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设置图省份区域颜色

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

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

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

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

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

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

地图的颜色可以分为默认的颜色 还有就是鼠标移上去之后的变色 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

地图的颜色可以分为默认的颜色 还有就是鼠标移上去之后的变色 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

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 // 加载对中国地图的所有操作
};;

---

阜城县19248378062： Echarts 地图 省份的颜色自定义如何设置? - ？
宰竹河车： 1、首先将省份和颜色的关系描述起来,写到js中.2、然后在地图实现方法中从数据库中获取数据,然后将数据作为变量代Echarts的option中的data值.3、在注入这些值的时候进行判断,根据不同的选择情况,从关系描述的js中获取值,看看选择条件是否在范围之内,如果是,则加上itemStyle属性.4、然后对不同的下拉选择进行判断,当点击查询按钮的时候,将这些值传递到定义的全局变量中.5、接着写这个地图的点击事件,其中search_map()方法是重新查询后台数据,生成地图所需要的数据,regionList是定义的变量,用来存放要选中的区域块的值.6、最后展示效果,各个省份都用颜色设置出来了.

阜城县19248378062： 如何调整echarts地图某个省份的地市 - ？
宰竹河车： 地图的颜色可以分为默认的颜色 还有就是鼠标移上去之后的变色 itemStyle下面包括normal和emphasis 前者很明显是正常情况下 后者是强调 也就是鼠标移上去之后变色 所以每个下面都可以设置地图的颜色 itemStyle:{ normal:{ label:{ show:true

阜城县19248378062： 如何在eCharts里面设置自定义样式 - ？
宰竹河车： 图片中红色框起来的按钮2、代码 [javascript] view plain copy selfButtons:{//自定义按钮 danielinbiti,这里增加,selfbuttons可以随便取名字show:true,//是否显示title:'自定义', //鼠标移动上去显示的文字icon:'test.png', //图标option:{},onclick...

阜城县19248378062： echarts地图设置随内容的多少而变化颜色 - ？
宰竹河车： 我用的是finereport,这个超级简单啊,选中地图,点击图表属性表-样式>系列可修改值区间以及配色方案.不知道你用的这个是不是,楼主你这样看看你的能行不 不知道能不能解决,楼主试试finereport,处理地图什么的超级方便,网上有版,楼主可以自echarts地图设置随内容的多少而变化颜色

阜城县19248378062： echarts的世界地图可以自行设定国家的颜色么 - ？
宰竹河车： 世界政治地图中不同国家用不同颜色表示.这个没有什么实际意义,只是为了把不同国家进行区分而已.不相邻的国家也可以用同样的颜色表示.

阜城县19248378062： 谁会echarts实现地图省市县的钻取分别单独显示 - ？
宰竹河车： 根据选择的地区去加载地图数据然后给chart.setOption(); 改变红色字体的值就可以,红色字体是省的拼音具体查看echarts/map文件夹内文件,有js加载方式和json加载方式$.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map',map: 'china' }] }); });

阜城县19248378062： echarts 统计图 怎么修改 默认颜色 - ？
宰竹河车： series : [{name:aymc,legendHoverLink : false,type : 'line',itemStyle : {normal : {color:'#f5bf58',label : {show : true,formatter : '{b}:{c}',position : 'top',textStyle : {fontWeight : '700',fontSize : '12',color:'#f5bf58'}}

阜城县19248378062： echarts地图背景色可以动态变化吗 - ？
宰竹河车： 或许可以.

阜城县19248378062： 怎么使用echarts中的世界地图 - ？
宰竹河车： 将加载类型中的mapType后面加上要显示的省市的名字 显示的就是这个省下面对应的各区县

阜城县19248378062： echarts tooltip 自定义formatter怎么设置颜色 - ？
宰竹河车： 官方文档里面好像没有这个API 默认的tooltip不是canvas而是div; 所以直接在formatter里面添加span设置好颜色就可以了 tooltip: { trigger: 'axis', formatter: '<span style=＂display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ff6f0b＂></span> }