Echarts中国地图根据数据对省份渲染不同的颜色

2023-05-16

在 setOption 里面设置(setOption官方参数及用法介绍)。

title //标题设置
legend //图例控制
grid //图例内网格控制
xAxis //X轴
yAxis //Y轴
polar //极坐标
radiusAxis //极坐标系径向轴
angleAxis //极坐标系的角度轴。
radar //雷达图坐标系组件
dataZoom //图表缩放控件
visualMap  //视觉映射组件
tooltip //提示框控件
axisPointer //坐标轴指示器(axisPointer)的全局公用设置。
toolbox //工具栏。内置有导出图片,数据视图,动态类型切换,数据区域 缩放,重置五个工具。
brush //区域选择组件,用户可以选择图中一部分数据,从而便于向用户展示被选中数据,或者他们的一些统计计算结果。
geo //地理坐标系组件
parallel //平行坐标系(Parallel Coordinates) 是一种常用的可视化高维数据的图表。
parallelAxis //这个组件是平行坐标系中的坐标轴。
singleAxis //单轴。可以被应用到散点图中展现一维数据
timeline //时间轴控件,提供了在多个 ECharts option 间进行切换、播放等操作的功能。
graphic //原生图形元素组件。可以支持的图形元素包括:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group。
calendar //日历坐标系组件。
dataset //数据集,用于单独的数据集声明
aria //无障碍富互联网应用规范集
series //系列列表。每个系列通过 type 决定自己的图表类型、
color //调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。
backgroundColor //背景色
textStyle //全局的字体样式。
animation //是否开启动画
animationThreshold //是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
animationDuration //初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:
animationEasing //初始动画的缓动效果。
animationDelay //初始动画的延迟,支持回调函数,
animationDurationUpdate //数据更新动画的时长,支持回调函数
animationEasingUpdate //数据更新动画的缓动效果。
animationDelayUpdate //数据更新动画的延迟,支持回调函数,
blendMode //图形的混合模式
hoverLayerThreshold //图形数量阈值
useUTC //是否使用 UTC 时间。

左下角使用颜色块

在这里插入图片描述

myChart.setOption({
			/*title : {
	                // 是否显示
	                show: true,
	                // 主标题文本,'\n'指定换行
	                text: '地图',
	                // 主标题文本超链接
	                link: 'http://www.baidu.com',
	                // 指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
	                target: 'self',
	                // 副标题文本,'\n'指定换行
	                subtext: '纯属虚构',
	                // 副标题文本超链接
	                sublink: 'http://www.baidu.com',
	                // 指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
	                subtarget: 'self',
	                // 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
	                x: 'center',
	                // 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
	                y: 'top',
	                // 水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center
	                textAlign: 'center',
	                // 标题背景颜色,默认透明
	                backgroundColor: 'rgba(0,0,0,0.1)',
	                // 标题边框颜色
	                borderColor: '#66FF00',
	                // 标题边框线宽,单位px,默认为0(无边框)
	                borderWidth: 1,
	                // 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
	                padding: [20,40,20,40],
	                // 主副标题纵向间隔,单位px,默认为10
	                itemGap: 20,
	                // 主标题文本样式
	                textStyle: {
	                    // 颜色
	                    color: '#0066FF',
	                    // 水平对齐方式,可选为:'left' | 'right' | 'center'
	                    align: 'left',
	                    // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
	                    baseline: 'bottom',
	                    // 字体系列
	                    fontFamily: 'Arial, 宋体, sans-serif',
	                    // 字号 ,单位px
	                    fontSize: 20,
	                    // 样式,可选为:'normal' | 'italic' | 'oblique'
	                    fontStyle: 'italic',
	                    // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
	                    fontWeight: 'normal'
	                },
	                // 副标题文本样式
	                subtextStyle: {
	                    // 颜色
	                    color: '#FF7F50',
	                    // 水平对齐方式,可选为:'left' | 'right' | 'center'
	                    align: 'left',
	                    // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
	                    baseline: 'bottom',
	                    // 字体系列
	                    fontFamily: 'Arial, 宋体, sans-serif',
	                    // 字号 ,单位px
	                    fontSize: 15,
	                    // 样式,可选为:'normal' | 'italic' | 'oblique'
	                    fontStyle: 'italic',
	                    // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
	                    fontWeight: 'normal'
	                }
	            },*/
		       tooltip: {// tooltip 提示框组件
		       	/*	background: '',
		            trigger: 'item',   // 触发类型, 'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
		            triggerOn: 'mousemove',  // 提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
		            showContent: true,                           //是否显示提示框浮层
		            alwaysShowContent: false,                     //是否永远显示提示框内容
		            showDelay: 0,                                //浮层显示的延迟,单位为 ms
		            hideDelay: 50,                              //浮层隐藏的延迟,单位为 ms
		            enterable: false,                            //鼠标是否可进入提示框浮层中
		            confine: false,                              //是否将 tooltip 框限制在图表的区域内
		            transitionDuration: 0.1,                     //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动
		            // position: ['50%', '50%'],                    //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数,inside鼠标所在图形的内部中心位置,top、left、bottom、right鼠标所在图形上侧,左侧,下侧,右侧,
		            backgroundColor: "transparent",              //标题背景色
		            borderColor: "#FFFFFF",                         //边框颜色
		            borderWidth: 0,                              //边框线宽
		            padding: [5, 10],                                  //图例内边距,单位px  5  [5, 10]  [5,10,5,10]
		            textStyle: 'mytextStyle',                      //文本样式 */
                    formatter:function(params){//提示框浮层内容格式器,支持字符串模板和回调函数两种形式
                    	return params.name+'<br />'+params.seriesName+':'+ params.value;
                    }
                },
/* 		    	visualMap: {//左下角的渐变颜色条
	                min: 0,
	                max: 100,
	                left: 'left',
	                top: 'bottom',
	                text: ['极高','无数据'],
	                inRange: {
	                    color: ['#e0ffff', '#006edd']
	                },
	                show:true
	            }, */
	            dataRange: {//左下角的颜色块。start:值域开始值;end:值域结束值;label:图例名称;color:自定义颜色值
	                x: 'left',
	                y: 'bottom',
	                splitList: [
	                    {start: 41, label: '> 41  极高', color: '#b80909'},
	                    {start: 30, end: 40, label: '31 - 40  高', color: '#e64546'},
	                    {start: 21, end: 30, label: '21 - 30  中', color: '#f57567'},
	                    {start: 11, end: 20, label: '11 - 20  低', color: '#ff9985'},
	                    {start:0, end: 10,label: '0 -10 无数据', color: '#ffe5db'}
	                ]
	            },
	            geo: {//地理坐标系组件
	                map: name,//注册的地图名称
	                roam: false,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
	                zoom:1.2,//当前视角的缩放比例
	                label: {//图形上的文本标签(显示地图省份)
	                    normal: {
	                        show: true,
	                        fontSize:'10',
	                        color: 'rgba(0,0,0,0.7)'
	                    }
	                },
	                itemStyle: {
	                    normal:{
	                        borderColor: 'rgba(0, 0, 0, 0.2)'//图形的描边颜
	                    },
	                    emphasis:{
	                        areaColor: '#F3B329',
	                        shadowOffsetX: 0,
	                        shadowOffsetY: 0,
	                        shadowBlur: 20,
	                        borderWidth: 0,
	                        shadowColor: 'rgba(0, 0, 0, 0.5)'
	                    }
	                }
	            }, 
		        series: [{
		        	name : '最小风险指数',// 系列名称
		        	type: 'map',//图表类型
		            geoIndex: 0,
                    itemStyle:{// 图形样式
                        normal:{label:{show:true}},// 默认状态下地图的文字
                        emphasis:{label:{show:true}}// 鼠标放到地图上面显示文字
                    }, 
                    data:[
                    	{ name: '北京',  value: 1 },
                    	{ name: '天津',  value: 2 },
                    	{ name: '上海',  value: 3 },
                    	{ name: '重庆',  value: 4 },
                    	{ name: '河北',  value: 5 },
                    	{ name: '河南',  value: 6 },
                    	{ name: '云南',  value: 7 },
                    	{ name: '辽宁',  value: 8 },
                    	{ name: '黑龙江',  value: 9 },
                    	{ name: '湖南',  value: 10 },
                    	{ name: '安徽',  value: 11 },
                    	{ name: '山东',  value: 12 },
                    	{ name: '新疆',  value: 13 },
                    	{ name: '江苏',  value: 14 },
                    	{ name: '浙江',  value: 15 },
                    	{ name: '江西',  value: 16 },
                    	{ name: '湖北',  value: 17 },
                    	{ name: '广西',  value: 18 },
                    	{ name: '甘肃',  value: 19 },
                    	{ name: '山西',  value: 20 },
                    	{ name: '内蒙古',  value: 21 },
                    	{ name: '陕西',  value: 22 },
                    	{ name: '吉林',  value: 23 },
                    	{ name: '福建',  value: 24 },
                    	{ name: '贵州',  value: 25 },
                    	{ name: '广东',  value: 26 },
                    	{ name: '青海',  value: 27 },
                    	{ name: '西藏',  value: 28 },
                    	{ name: '四川',  value: 29 },
                    	{ name: '宁夏',  value: 30 },
                    	{ name: '海南',  value: 31 },
                    	{ name: '台湾',  value: 32 },
                    	{ name: '香港',  value: 33 },
                    	{ name: '澳门',  value: 34 }
                    	]
		        }]
		    });

如果左下角要使用渐变颜色条 注释掉dataRange参数,使用visualMap参数其他不变。

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Echarts中国地图根据数据对省份渲染不同的颜色 的相关文章

随机推荐

  • 系统调用的理解

    文章目录 系统调用什么是系统调用系统调用的分类系统调用与库函数的区别 系统调用 什么是系统调用 什么是系统调用 xff1f 答 操作系统的接口函数是连接应用软件与操作系统的中间桥梁 xff0c 系统调用其实就是操作系统提供给应用程序的接口函
  • AndroidStudio配置过程中遇到的一些问题

    自己在安装并配置Android Studio时遇到的一些坑 xff0c 写出来方便大家解决问题 问题一 xff1a BUILD FAILED in 1s Failed to create parent directory C Program
  • STM32F103C8T6汇编点灯

    最简单的结构 只有一个数据段 只是为了不报错而已 area Reset span class token punctuation span data span class token punctuation span readonly sp
  • vscode c++连接mysql

    因为踩坑太多所以写下该篇博客 首先要下载mysql 这里用的是MySQL8 0 16 记住mysql的安装路径 xff0c 主要是include和lib的路径 参考另外一个博主的文章https blog csdn net mzlogin a
  • python之 下载及安装Anaconda

    Python Python是一种面向对象的解释型计算机程序设计语言 xff0c 其使用 xff0c 具有跨平台的特点 xff0c 可以在Linux macOS以及Windows系统中搭建环境并使用 xff0c 其编写的代码在不同平台上运行时
  • UI自动化之TouchAction(dirver).long_press()长按

    之前篇说过driver tap可以通过duration参数设置实现长按 xff0c 除外TouchAction也可以 xff0c 而且还可以用之实现多个点击的事件集 xff0c 废话不多说直接贴码 xff1a span class toke
  • python之 ffmpeg+opencv绿幕抠图,蒙版绿幕抠图,透明化处理,PIL检测图片是否包含透明通道

    目录 OpenCV Python实现绿幕图像抠图 python利用蒙版批量抠图并实现透明化 jpeg格式图片进行批量背景透明化处理 PIL检测图片是否包含透明通道 OpenCV Python实现绿幕图像抠图 boy png xff1a 最终
  • pandas将千万行数据分块保存为CSV文件,保存为HDF5文件

    从数据库读取数据保存为CSV xff0c 然后转换为HDF5 xff0c 用于后面数据快速处理 span class token keyword from span sqlalchemy span class token keyword i
  • NOIP 2002 普及组第四题 过河卒

    题目描述 棋盘上 A 点有一个过河卒 xff0c 需要走到目标 B 点 卒行走的规则 xff1a 可以向下 或者向右 同时在棋盘上 C 点有一个对方的马 xff0c 该马所在的点和所有跳跃一步可达的点称为对方马的控制点 因此称之为 马拦过河
  • Ubuntu18.04安装

    一 制作系统U盘 1 下载Ubuntu18 04系统镜像文件 进入Ubuntu官网 xff0c 先找到Download xff0c 再找到以前的发行版本 older releases xff1a 选择64位的Desktop image xf
  • maven下手动导入ojdbc6-12.1.0.1-atlassian-hosted.jar

    在终端输入如下命令 xff1a mvn install install file Dfile 61 E ojdbc6 12 1 0 1 atlassian hosted jar DgroupId 61 com oracle Dartifac
  • BIOS 和 UEFI

    BIOS 和 UEFI 是电脑的两种启动模式 xff0c 也就是开机后最先执行的程序 它们都是固件 xff0c 程序已经预先写入到芯片中 BIOS是传统的启动方式 xff0c UEFI是一种新的启动方式 xff0c 现在的出的电脑基本都是用
  • 安装双系统后直接进入Ubuntu没有grub引导项

    解决问题 xff1a 安装win10 43 Ubuntu18 04双系统后 xff0c 开机直接进入Ubuntu没有grub引导项 原因 xff1a 没有为Ubuntu的启动项配置grub 如何配置 xff1f 首先在终端执行如下命令打开g
  • VNC 配置使用

    被控制的计算机系统Ubutnu18 04 xff0c 控制的计算机系统Windows10 1 下载 Download VNC Server VNC Connect 被控制的计算机下载Server版 xff0c 控制的计算机下载Viewer版
  • UTC和GMT的区别

    GMT xff1a Greenwich Mean Time 格林尼治标准时间 是以英国格林尼治天文台观测结果得出的时间 xff0c 这是英国格林尼治的当地时间 xff0c 是世界时间的标准 UT xff1a Universal Time 世
  • 基于MAML的改进方法总结

    元学习是解决小样本学习问题的重要方法之一 xff0c 现已取得较为优异的成绩 元学习方法大体上可以分为基于优化的和基于度量两种 基于度量的方法是非参数方法 xff0c 包括孪生网络 关系网络 匹配网络等 基于优化的方法是参数化方法 xff0
  • list与dict互转

    keys span class token operator 61 span span class token punctuation span span class token string 39 a 39 span span class
  • 进栈出栈操作

    首先简单输入n 代表输入数字的个数 xff0c 然后依次进栈 xff0c 再出栈输出每个数字 xff08 栈是一种先进后出的数据结构 xff09 span class token macro property span class toke
  • 指针笔记

    指针的两种写法注意 xff1a int c 61 1 int p 61 amp c 或 int p p 61 amp c xff1b 这两种写法是相等的 另外注意野指针的概念 xff1a 1 野指针的错误来源就是指针定义了以后没有初始化 x
  • Echarts中国地图根据数据对省份渲染不同的颜色

    在 setOption 里面设置 xff08 setOption官方参数及用法介绍 xff09 title span class token comment 标题设置 span legend span class token comment