echarts的世界地图渐变色
时间: 2023-12-14 10:34:14 浏览: 149
echarts地图加轮廓渐变色,地图子区域不加边界渐变色
5星 · 资源好评率100%
以下是使用Echarts实现世界地图渐变色的方法:
1.首先需要引入Echarts的js文件和对应的地图js文件,例如:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/map/js/world.js"></script>
```
2.然后在HTML中创建一个div元素,用于显示地图,例如:
```html
<div id="map" style="width: 800px; height: 600px;"></div>
```
3.接下来在JavaScript中配置地图的参数,包括地图类型、渐变色等,例如:
```javascript
var myChart = echarts.init(document.getElementById('map'));
// 配置地图参数
option = {
title: {
text: '世界地图渐变色',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本,默认为数值文本
calculable: true,
color: ['#f5d0a9', '#ff6600', '#ff0000'] // 渐变色
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
roam: true,
label: {
show: false
},
data: [
{name: 'Afghanistan', value: 28397.812},
{name: 'Angola', value: 19549.124},
{name: 'Albania', value: 3150.143},
// 省略部分数据
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
4.最后在浏览器中打开HTML文件,即可看到世界地图渐变色的效果。
阅读全文