博客展示了使用 v-charts 绘制山东地区人口地图的代码。通过设置 chartSettings 和 chartExtend 来配置地图的位置、选择模式、颜色等，同时定义了 chartData 包含地区和人口数据，实现了地图可视化展示。
<template>
<div style="width:100%;">
<ve-map :data="chartData" :settings="chartSettings" :extend="chartExtend"></ve-map>
</div>
</template>
<script>
export default {
data() {
this.chartSettings = {
position: "province/shandong",
selectData: true,
selectedMode: "multiple",
labelMap: {
name: "地区",
value: "人口"
}
};
this.chartExtend = {
visualMap: {
show: false,
min: 0, //最小值
max: 10, //最大值
calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
inRange: {
color: [
"#0487ED",
"#C7C52C",
"#E26B5B",
"#3EB177",
"#794EDC",
"#B46B2A"
] //颜色
},
textStyle: {
color: "#fff"
}
},
series: {
itemStyle: {
normal: {
areaColor: "rgba(11,36,35,1)",
borderColor: "rgba(27, 94, 79, 1)",
borderWidth: 1
}
},
label: {
show: true,
fontSize: 14,
color: "#fff"
},
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 }
]
}
};
return {
chartData: {
columns: ["name", "value"],
rows: [
{ name: "济南市", value: 1 },
{ name: "青岛市", value: 2 },
{ name: "潍坊市", value: 3 },
{ name: "烟台市", value: 4 },
{ name: "菏泽市", value: 5 },
{ name: "枣庄市", value: 6 }
]
}
};
}
};
</script>
扫一扫
4007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
