echarts 地图数据填充
时间: 2023-09-19 09:05:41 浏览: 110
要填充 echarts 地图数据,需要在数据中指定每个地区的值,并在 echarts 配置中指定地图类型和数据。以下是一个示例代码:
```javascript
// 数据
var data = [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '天津', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
{name: '重庆', value: Math.round(Math.random() * 1000)},
{name: '河北', value: Math.round(Math.random() * 1000)},
{name: '河南', value: Math.round(Math.random() * 1000)},
{name: '云南', value: Math.round(Math.random() * 1000)},
{name: '辽宁', value: Math.round(Math.random() * 1000)},
{name: '黑龙江', value: Math.round(Math.random() * 1000)},
{name: '湖南', value: Math.round(Math.random() * 1000)},
{name: '安徽', value: Math.round(Math.random() * 1000)},
{name: '山东', value: Math.round(Math.random() * 1000)},
{name: '新疆', value: Math.round(Math.random() * 1000)},
{name: '江苏', value: Math.round(Math.random() * 1000)},
{name: '浙江', value: Math.round(Math.random() * 1000)},
{name: '江西', value: Math.round(Math.random() * 1000)},
{name: '湖北', value: Math.round(Math.random() * 1000)},
{name: '广西', value: Math.round(Math.random() * 1000)},
{name: '甘肃', value: Math.round(Math.random() * 1000)},
{name: '山西', value: Math.round(Math.random() * 1000)},
{name: '内蒙古', value: Math.round(Math.random() * 1000)},
{name: '陕西', value: Math.round(Math.random() * 1000)},
{name: '吉林', value: Math.round(Math.random() * 1000)},
{name: '福建', value: Math.round(Math.random() * 1000)},
{name: '贵州', value: Math.round(Math.random() * 1000)},
{name: '广东', value: Math.round(Math.random() * 1000)},
{name: '青海', value: Math.round(Math.random() * 1000)},
{name: '西藏', value: Math.round(Math.random() * 1000)},
{name: '四川', value: Math.round(Math.random() * 1000)},
{name: '宁夏', value: Math.round(Math.random() * 1000)},
{name: '海南', value: Math.round(Math.random() * 1000)},
{name: '台湾', value: Math.round(Math.random() * 1000)},
{name: '香港', value: Math.round(Math.random() * 1000)},
{name: '澳门', value: Math.round(Math.random() * 1000)}
];
// 配置
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c}'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
seriesIndex: [1],
inRange: {
color: ['#e0ffff', '#006edd']
}
},
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: data
}]
};
// 初始化
var myChart = echarts.init(document.getElementById('map'));
myChart.setOption(option);
```
在上面的代码中,首先定义了一个数据数组,其中每个元素代表一个地区的数据。然后,配置 echarts,包括地图类型、提示框、颜色等。最后,初始化 echarts 并将配置和数据传递给它,以渲染地图。
具体来说,`option` 对象中的 `series` 属性定义了一个地图系列,其中 `data` 属性指定了数据数组。在 `visualMap` 中指定了可视化映射的最小值、最大值、颜色范围等,用于将数据值映射到颜色。最后,通过 `echarts.init` 方法初始化 echarts 实例,并使用 `setOption` 方法将配置应用于它。
阅读全文