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

本文介绍了如何在Echarts中通过设置setOption,根据数据动态改变中国地图上各个省份的颜色,以视觉效果展示数据差异。可以采用颜色块或者渐变颜色条来呈现数据的分布情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在 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
	                 
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值