ve-map地图取消数据选择范围时的地图颜色设置
v-charts中ve-map组件去配置地图上的数据,不同的数据量显示不同的颜色,但是,当点击范围的按钮去取消这个范围内的数据时,地图的那一块就变为了黑色,提供了不在方位内的颜色设置;
代码:
<ve-map
:data="chartData"
:settings="chartSettings"
:colors="chartColors"
:extend="chartExtend"
:width="screenWidth<1280?'400px':'550px'"
:height="screenWidth<1280?'400px':'500px'"
></ve-map>
export default{
this.chartExtend= {
legend: {
show: false,
},
textStyle: {
color: '#ffffff',
},
visualMap:{
type:"piecewise",
pieces: [
{ min: 500 },
{ min: 101, max: 500 },
{ min: 11, max: 100 },
{ min: 1, max: 10 },
],
// pieces: [
// { min: 999 },
// { min: 500, max: 999 },
// { min: 100, max: 499 },
// { min: 1, max: 99 }
// ],
// show:false, //是否显示piecewise组件,不显示,数据依旧映射
inRange: { //对应范围内颜色
color: ['#9897c5', '#7676b1', '#52589e', '#273b8b']
},
outOfRange: { //不在范围内颜色
color: ["#A7B3CA"]
}
},
}