echarts地图不同地区设置不同的颜色
迪丽瓦拉
2025-06-01 15:21:45
0

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

]

}]

};

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
A.机器学习入门算法(三):基... 机器学习算法(三):K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库,支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...