首页 前端知识 echarts地图不同地区设置不同的颜色

echarts地图不同地区设置不同的颜色

2024-04-12 20:04:10 前端知识 前端哥 703 304 我要收藏

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},

]

}]

};

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4792.html
标签
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!