ve-map地图取消数据选择范围时的地图颜色设置

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"]
                }
            },
}
原文地址:https://www.cnblogs.com/xmbhyw/p/14251833.html