v-charts map地图 自定义地图区域颜色

<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>