美文网首页
Echarts地图自定义颜色

Echarts地图自定义颜色

作者: 夏日清风_期待 | 来源:发表于2021-01-22 16:04 被阅读0次
    // 模拟数据
    let data = [
      {"name": "台湾","value": 20000},
                  {"name": "河北", "value": 2000},
                  {"name": "山西", "value": 2000},
                  {"name": "内蒙古", "value": 2000},
                  {"name": "辽宁", "value": 2000},
                  {"name": "吉林", "value": 2000},
                  {"name": "黑龙江", "value": 0},
                  {"name": "江苏", "value": 10000},
                  {"name": "浙江", "value": 10000},
                  {"name": "安徽", "value": 10000},
                  {"name": "福建", "value": 6500},
                  {"name": "江西", "value": 6500},
                  {"name": "山东", "value": 6500},
                  {"name": "河南", "value": 6500},
                  {"name": "湖北", "value": 1500},
                  {"name": "湖南", "value": 100},
                  {"name": "广东", "value": 20000},
                  {"name": "广西", "value": 1500},
                  {"name": "海南", "value": 1000},
                  {"name": "四川", "value": 3000},
                  {"name": "贵州", "value": 3000},
                  {"name": "云南", "value": 3000},
                  {"name": "西藏", "value": 3000},
                  {"name": "陕西", "value": 100},
                  {"name": "甘肃", "value": 5000},
                  {"name": "青海", "value": 2000},
                  {"name": "宁夏", "value": 2000},
                  {"name": "新疆", "value": 2000},
                  {"name": "北京", "value": 2000},
                  {"name": "天津", "value": 2000},
                  {"name": "上海", "value": 2000},
                  {"name": "重庆", "value": 200},
                  {"name": "香港", "value": 200},
                  {"name": "澳门", "value": 200},
                  {"name": "南海诸岛", "value": 15000} 
    ]
    

    通过visualMap设置,设置visualMap中的min最小值、max最大值、color颜色值,echart会根据value数值自动匹配对应颜色

    
    let optionMap = {
              tooltip: {
                formatter: '{a}<br/>{b}: {c}人'
              },
              visualMap: {
                min: 0, // 最小值
                max: 20000, // 最大值
                text: ['20000', '0'],
                realtime: false,
                calculable: false,
                inRange: {
                  color: ['#e6f7ff', '#1890FF','#0050b3'] // 渐变颜色
                }
              },
              series: [{
                name: '用户分布',
                type: 'map',
                mapType: 'china',
                coordinateSystem: 'geo',
                label: {
                  normal: {
                    show: false, //显示省份标签
                    textStyle: {
                      color: "#fff"
                    } //省份标签字体颜色
                  },
                  emphasis: { //对应的鼠标悬浮效果
                    show: true,
                    textStyle: {
                      color: "#000"
                    }
                  }
                },
                aspectScale: 0.75,
                zoom: 1.2,
                itemStyle: {
                  normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#fff', //区域边框颜色
    //                areaColor: "#ffefd5", //区域颜色
                  },
                  emphasis: {
                    borderWidth: .5,
                    borderColor: '#000',
                    areaColor: "#fff",
                  }
                },
                data:  data
              }],//各省地图颜色数据依赖value
            }
    
    1

    一个是dataRange,在splitList数据中的加入对应的color即可({"name": "南海诸岛", "value": 15000,color: '#cfc5de'}

            let optionMap = {
              tooltip: {
                formatter: '{a}<br/>{b}: {c}人'
              },
              series: [{
                name: '用户分布',
                type: 'map',
                mapType: 'china',
                coordinateSystem: 'geo',
                label: {
                  normal: {
                    show: false, //显示省份标签
                    textStyle: {
                      color: "#fff"
                    } //省份标签字体颜色
                  },
                  emphasis: { //对应的鼠标悬浮效果
                    show: true,
                    textStyle: {
                      color: "#000"
                    }
                  }
                },
                aspectScale: 0.75,
                zoom: 1.2,
                itemStyle: {
                  normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#fff', //区域边框颜色
    //                areaColor: "#ffefd5", //区域颜色
                  },
                  emphasis: {
                    borderWidth: .5,
                    borderColor: '#000',
                    areaColor: "#fff",
                  }
                },
                data: data.map.seriesData //各省地图颜色数据依赖value
              }],
              dataRange: {
                x: '-1000 px', //图例横轴位置
                y: '-1000 px', //图例纵轴位置
                splitList: data //各省地图颜色,在data中插入对应的color即可 {"name": "南海诸岛", "value": 15000,color: '#cfc5de'} color:自定义颜色值
    
              },
            }
    
    2

    相关文章

      网友评论

          本文标题:Echarts地图自定义颜色

          本文链接:https://www.haomeiwen.com/subject/klzszktx.html