位置: IT常识 - 正文
echarts地图不同地区设置不同的颜色
发布时间：2024-01-03推荐整理分享echarts地图不同地区设置不同的颜色，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
var myChart = ec.init(document.getElementById('main'));
let option = {
tooltip: {
trigger: 'item',
},
dataRange: {//左下角的颜色块。start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值
x: 'left',
y: 'bottom',
show:false,
splitList: [
// 此处根据下方data中的value值来显示不同的颜色
{start: 10, label: '此处自定义', color: '#FFB956'},
{start: 8, end: 10, label: '此处自定义 高', color: '#E66C1B'},
{start: 5, end: 8, label: '此处自定义 中', color: '#F19610'},
{start: 3, end: 5, label: '此处自定义 低', color: '#8A00E1'},
{start:0, end: 3,label: '此处自定义', color: '#403C6F'}
]
},
series: [{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选
itemStyle: {
normal: {
label: {
show: false,//默认是否显示省份名称
},
areaStyle: {
color: '#f3f3f3',//默认的地图板块颜色
},
borderWidth:1,
borderColor:'#e1e1e1',
},
emphasis: {
label: {
show: true,//选中状态是否显示省份名称
},
areaStyle: {
color: '#90c31d',//选中状态的地图板块颜色
},
},
},
//此为需要显示不同颜色的数据
data: [
{name: '广东',selected: true,value:10},
{name: '广西',selected: true,value:10},
{name: '四川',selected: true,value:10},
]
}]
};
上一篇：vue开发中，数据更新，但视图不刷新(vue数据处理在哪个阶段)
下一篇：Win7系统添加桌面小工具的方法(windows7增加桌面)
