HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色

该博客展示了如何使用Echarts库根据数据动态渲染中国地图,每个省份的颜色根据其对应的值变化,详细介绍了配置项和数据处理过程,包括颜色的计算和地图的自适应调整。

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

echarts中国地图

.centerItem {

width: 856px;

height: 640px;

background-color: #fff;

margin: 110px auto 0 auto;

}

.big {

width: 100px;

height: 100px;

background: rgba(18, 139, 237, 1);

/* background:rgba(71,169,241,1);

background:rgba(165,216,246,1);

background:rgba(196,237,249,1); */

}

// 基于准备好的dom,初始化echarts实例

var mapBoxEchart = echarts.init(document.getElementById('mapBox'));

var num = Math.random(),

data = [

{ name: '北京', selected: false, value: 1 },

{ name: '天津', selected: false, value: 2 },

{ name: '上海', selected: false, value: 3 },

{ name: '重庆', selected: false, value: 4 },

{ name: '河北', selected: false, value: 5 },

{ name: '河南', selected: false, value: 6 },

{ name: '云南', selected: false, value: 7 },

{ name: '辽宁', selected: false, value: 8 },

{ name: '黑龙江', selected: false, value: 9 },

{ name: '湖南', selected: false, value: 10 },

{ name: '安徽', selected: false, value: 11 },

{ name: '山东', selected: false, value: 12 },

{ name: '新疆', selected: false, value: 13 },

{ name: '江苏', selected: false, value: 14 },

{ name: '浙江', selected: false, value: 15 },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值