当前位置: 首页 > article >正文

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

]

}]

};


http://www.kler.cn/a/3516.html

相关文章:

  • Kotlin基础知识学习(三)
  • java开发,IDEA转战VSCODE配置(mac)
  • 2024年博客之星主题创作|2024年度感想与新技术Redis学习
  • 【RAG落地利器】向量数据库Chroma入门教程
  • 【ESP32】ESP32连接JY61P并通过WIFI发送给电脑
  • 音频入门(一):音频基础知识与分类的基本流程
  • 手机验证发送及其验证(基于springboot+redis)保姆级
  • Docker【基本使用】
  • 你还不会递归?告别困惑,我来教你
  • 多线程(三):Thread 类的基本属性
  • USB键盘实现——字符串描述符(四)
  • JNI原理及常用方法概述
  • 【软件测试】基础知识第一篇
  • 使用chatGPT实现数字自增动画
  • 数字信号处理_QA_2023_超长
  • [渗透教程]-004-嗅探工具-Nmap
  • STM32开发基础知识入门
  • MongoDB 6.0 入门(二)
  • javaEE初阶 — 博客系统的页面设计
  • 4年功能测试,我一进阶python接口自动化测试,跳槽拿了20k......
  • 第二章 作业(6789B)【编译原理】
  • python迭代器详解
  • 2023最新ChatGPT整理的40道Java高级面试题
  • 第1节 线性回归模型
  • try-with-resource
  • mysql的limit查询竟然有坑?