首页 > 其他 > 详细

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

时间:2021-01-08 16:53:16      阅读:107      评论:0      收藏:0      [点我收藏+]

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"]
                }
            },
}

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

原文:https://www.cnblogs.com/xmbhyw/p/14251833.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!