ECharts 设置地图(map)值变化颜色(visualMap)

ECharts 设置地图(map)值变化颜色(visualMap):

visualMap: {
            min: 800,
            max: 50000,
            inRange: {
                color: ['lightskyblue','yellow', 'orangered']
            }
        }
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
ECharts是一款强大的数据可视化库,可以创建各种图表,包括地图。要在ECharts地图设置边框和颜色,你需要使用`visualMap`和一些自定义选项。以下是基本步骤: 1. **添加地图**: 首先,引入地图数据和ECharts实例,然后配置地图: ```javascript var mapData = ...; // 加载地图数据,例如echarts的地理编码服务返回的数据 var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ geo: { name: '中国', data: mapData, // 其他地图配置... } }); ``` 2. **设置视觉映射**: ECharts的视觉映射允许你动态调整颜色范围,你可以创建一个视觉映射来改变边框的颜色设置`visualRange`和`visualMap`: ```javascript visualMap: { show: true, // 显示视觉映射工具 pieceswise: [ // 分段表示,可以根据需要调整 {min: 0, max: 50, color: '#FF0000'}, // 边框颜色 {min: 51, max: 100, color: '#00FF00'} // 另一段颜色 ], // 其他视觉映射选项... }, ``` 3. **边框样式**: ECharts本身没有直接提供地图边框线的设置,但你可以通过修改图形元素的位置和大小来模拟边框。一种常见的做法是在地图外部画一个等大的矩形,覆盖地图边界: ```javascript series: [ { type: 'map', // 省略其他配置... itemStyle: { normal: { // 设置地图填充色 color: 'yourMapColor' }, emphasis: { // 强调样式 shadowBlur: 0, // 关闭阴影 outlineColor: '#FF0000', // 边框颜色 outlineWidth: 1 // 边框宽度 } } }, { type: 'rectangle', position: [0, 0], // 地图左上角坐标 width: yourMapWidth, // 地图宽度 height: yourMapHeight, // 地图高度 shape: 'round', // 圆角边框 fill: 'transparent', stroke: '#FF0000', // 边框颜色 lineWidth: 1 // 边框宽度 } ] ``` 记得替换上述代码中的`yourMapData`、`yourMapColor`、`yourMapWidth`和`yourMapHeight`为你实际的地图数据和尺寸。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值