Echarts和vue画个中国地图

Posted 2020-12-06 wuziqiang

<template>
  <div class="map">
    <p>各经销商所在地获客量</p>
    <div class="hr"></div>
    <div class="chinaIcon">
      <div ref="myChartChina" style="height: 100%; width: 100%"></div>
    </div>
    <!-- <img src="../../assets/img/expect.png" > -->
  </div>
</template>

<script lang=‘ts‘>
import { Component, Vue, Watch } from ‘vue-property-decorator‘;
import ‘echarts/map/js/china.js‘;
@Component({
  components: {}
})
export default class GetMap extends Vue {
  private chinaEchart: any = null;
  public $echarts: any;

  private mounted() {
    // console.log(this.geoCoordMap);
    setTimeout(() => {
      this.winGuestMapInit();
    }, 0);
  }

  public winGuestMapInit() {
    this.chinaEchart = this.$echarts.init(this.$refs.myChartChina);
    this.chinaMap();
  }

  public geoCoordMap: any = {
    北京: [116.395645, 39.929986],
    天津: [117.210813, 39.14393],
    上海: [121.487899, 31.249162],
    重庆: [106.530635, 29.544606],
    香港: [114.186124, 22.293586],
    澳门: [113.557519, 22.204118],
    台湾: [120.961454, 23.80406],
    // 湖北省
    武汉: [114.3162, 30.581084],
    黄石: [115.050683, 30.216127],
    十堰: [110.801229, 32.636994],
    襄阳: [112.176326, 32.094934],
    宜昌: [111.310981, 30.732758],
    荆州: [112.241866, 30.332591],
    荆门: [112.21733, 31.042611],
    鄂州: [114.895594, 30.384439],
    孝感: [113.935734, 30.927955],
    黄冈: [114.906618, 30.446109],
    咸宁: [114.300061, 29.880657],
    随州: [113.379358, 31.717858],
    恩施: [109.517433, 30.308978],
    仙桃: [113.443107, 30.327249],
    天门: [113.16802, 30.663312],
    潜江: [112.900485, 30.40138],
    神农架: [110.487231, 31.595768],
    //新疆维吾尔自治区
    克拉玛依: [84.88118, 45.594331],
    乌鲁木齐: [87.564988, 43.84038],
    巴音郭楞: [86.121688, 41.771362],
    伊犁: [81.297854, 43.922248],
    吐鲁番: [89.181595, 42.96047],
    阿勒泰: [88.137915, 47.839744],
    哈密: [93.528355, 42.858596],
    博尔塔拉: [82.052436, 44.913651],
    阿克苏: [80.269846, 41.171731],
    克孜勒苏: [76.137564, 39.750346],
    昌吉: [87.296038, 44.007058],
    喀什: [75.992973, 39.470627],
    和田: [79.930239, 37.116774],
    塔城: [82.974881, 46.758684],
    新疆: [85.564988, 40.84038],
    //广西壮族自治区
    崇左: [107.357322, 22.415455],
    柳州: [109.422402, 24.329053],
    百色: [106.631821, 23.901512],
    南宁: [108.297234, 22.806493],
    梧州: [111.305472, 23.485395],
    北海: [109.122628, 21.472718],
    桂林: [110.26092, 25.262901],
    河池: [108.069948, 24.699521],
    贵港: [109.613708, 23.103373],
    钦州: [108.638798, 21.97335],
    来宾: [109.231817, 23.741166],
    防城港: [108.351791, 21.617398],
    贺州: [111.552594, 24.411054],
    玉林: [110.151676, 22.643974],
    // 西藏自治区
    山南: [91.750644, 29.229027],
    那曲: [92.067018, 31.48068],
    阿里: [81.107669, 30.404557],
    拉萨: [91.111891, 29.662557],
    昌都: [97.185582, 31.140576],
    林芝: [94.349985, 29.666941],
    日喀则: [88.891486, 29.269023],
    //宁夏回族自治区
    银川: [106.206479, 38.502621],
    吴忠: [106.208254, 37.993561],
    中卫: [105.196754, 37.521124],
    石嘴山: [106.379337, 39.020223],
    固原: [106.285268, 36.021523],
    // 内蒙古自治区
    乌海: [106.831999, 39.683177],
    鄂尔多斯市: [109.993706, 39.81649],
    兴安盟: [122.048167, 46.083757],
    锡林郭勒盟: [116.02734, 43.939705],
    巴彦淖尔: [107.423807, 40.76918],
    赤峰: [118.930761, 42.297112],
    乌兰察布: [113.112846, 41.022363],
    呼伦贝尔: [119.760822, 49.201636],
    通辽: [122.260363, 43.633756],
    阿拉善盟: [105.695683, 38.843075],
    包头: [109.846239, 40.647119],
    呼和浩特: [111.660351, 40.828319],
    //四川省
    遂宁: [105.564888, 30.557491],
    雅安: [103.009356, 29.999716],
    巴中: [106.757916, 31.869189],
    攀枝花: [101.722423, 26.587571],
    自贡: [104.776071, 29.359157],
    凉山: [102.259591, 27.892393],
    广元: [105.819687, 32.44104],
    广安: [106.63572, 30.463984],
    宜宾: [104.633019, 28.769675],
    达州: [107.494973, 31.214199],
    南充: [106.105554, 30.800965],
    成都: [104.067923, 30.679943],
    内江: [105.073056, 29.599462],
    资阳: [104.633019, 28.769675],
    阿坝: [102.228565, 31.905763],
    甘孜: [101.969232, 30.055144],
    绵阳: [104.705519, 31.504701],
    乐山: [103.760824, 29.600958],
    泸州: [105.44397, 28.89593],
    德阳: [104.402398, 31.13114],
    眉山: [103.84143, 30.061115],
    //陕西省
    安康: [109.038045, 32.70437],
    咸阳: [108.707509, 34.345373],
    渭南: [109.483933, 34.502358],
    汉中: [107.045478, 33.081569],
    延安: [109.50051, 36.60332],
    榆林: [109.745926, 38.279439],
    西安: [108.953098, 34.2778],
    铜川: [108.968067, 34.908368],
    宝鸡: [107.170645, 34.364081],
    商洛: [109.934208, 33.873907],
    // 河南省
    焦作: [113.211836, 35.234608],
    南阳: [112.542842, 33.01142],
    三门峡: [111.181262, 34.78332],
    平顶山: [113.300849, 33.745301],
    驻马店: [114.049154, 32.983158],
    新乡: [113.91269, 35.307258],
    许昌: [113.835312, 34.02674],
    洛阳: [112.447525, 34.657368],
    开封: [114.351642, 34.801854],
    安阳: [114.351807, 36.110267],
    周口: [114.654102, 33.623741],
    信阳: [114.085491, 32.128582],
    郑州: [113.649644, 34.75661],
    濮阳: [115.026627, 35.753298],
    商丘: [115.641886, 34.438589],
    漯河: [114.046061, 33.576279],
    鹤壁: [114.29777, 35.755426],
    //浙江省
    丽水: [119.929576, 28.4563],
    衢州: [118.875842, 28.95691],
    台州: [121.440613, 28.668283],
    宁波: [121.579006, 29.885259],
    杭州: [120.219375, 30.259244],
    金华: [119.652576, 29.102899],
    温州: [120.690635, 28.002838],
    绍兴: [120.592467, 30.002365],
    嘉兴: [120.760428, 30.773992],
    湖州: [120.137243, 30.877925],
    舟山: [122.169872, 30.03601],
    // 海南省
    海口: [110.330802, 20.022071],
    三亚: [109.522771, 18.257776],
    海南: [109.9267865, 19.1399235],
    // 山西省
    运城: [111.006854, 35.038859],
    忻州: [112.727939, 38.461031],
    晋城: [112.867333, 35.499834],
    临汾: [111.538788, 36.099745],
    阳泉: [113.569238, 37.869529],
    长治: [113.120292, 36.201664],
    吕梁: [111.143157, 37.527316],
    太原: [112.550864, 37.890277],
    大同: [113.290509, 40.113744],
    朔州: [112.479928, 39.337672],
    晋中: [112.738514, 37.693362],
    // 广东省
    韶关: [113.594461, 24.80296],
    惠州: [114.410658, 23.11354],
    揭阳: [116.379501, 23.547999],
    云浮: [112.050946, 22.937976],
    深圳: [114.025974, 22.546054],
    潮州: [116.630076, 23.661812],
    清远: [113.040773, 23.698469],
    梅州: [116.126403, 24.304571],
    广州: [113.30765, 23.120049],
    东莞: [113.763434, 23.043024],
    江门: [113.078125, 22.575117],
    肇庆: [112.479653, 23.078663],
    茂名: [110.931245, 21.668226],
    阳江: [111.97701, 21.871517],
    汕尾: [115.372924, 22.778731],
    河源: [114.713721, 23.757251],
    中山: [113.42206, 22.545178],
    佛山: [113.134026, 23.035095],
    汕头: [116.72865, 23.383908],
    湛江: [110.365067, 21.257463],
    珠海: [113.562447, 22.256915],
    // 云南省
    怒江: [98.859932, 25.860677],
    迪庆: [99.713682, 27.831029],
    昭通: [103.725021, 27.340633],
    西双版纳: [100.803038, 22.009433],
    玉溪: [102.545068, 24.370447],
    临沧: [100.092613, 23.887806],
    大理: [100.223675, 25.5969],
    丽江: [100.229628, 26.875351],
    楚雄: [101.529382, 25.066356],
    红河: [103.384065, 23.367718],
    文山: [104.089112, 23.401781],
    昆明: [102.714601, 25.049153],
    曲靖: [103.782539, 25.520758],
    保山: [99.177996, 25.120489],
    思茅: [100.980058, 22.788778],
    德宏: [98.589434, 24.44124],
    // 贵州省
    贵阳: [106.709177, 26.629907],
    黔西南: [104.900558, 25.095148],
    铜仁: [109.196161, 27.726271],
    黔东南: [107.985353, 26.583992],
    遵义: [106.93126, 27.699961],
    毕节: [105.300492, 27.302612],
    黔南: [107.523205, 26.264536],
    六盘水: [104.852087, 26.591866],
    安顺: [105.92827, 26.228595],
    // 辽宁省
    鞍山: [123.007763, 41.118744],
    本溪: [123.778062, 41.325838],
    营口: [122.233391, 40.668651],
    大连: [121.593478, 38.94871],
    铁岭: [123.85485, 42.299757],
    朝阳: [120.446163, 41.571828],
    抚顺: [123.92982, 41.877304],
    盘锦: [122.073228, 41.141248],
    丹东: [124.338543, 40.129023],
    葫芦岛: [120.860758, 40.74303],
    锦州: [121.147749, 41.130879],
    沈阳: [123.432791, 41.808645],
    辽阳: [123.172451, 41.273339],
    阜新: [121.660822, 42.01925],
    // 河北省
    廊坊: [116.703602, 39.518611],
    衡水: [115.686229, 37.746929],
    秦皇岛: [119.604368, 39.945462],
    承德: [117.933822, 40.992521],
    沧州: [116.863806, 38.297615],
    张家口: [114.893782, 40.811188],
    石家庄: [114.522082, 38.048958],
    保定: [115.49481, 38.886565],
    唐山: [118.183451, 39.650531],
    邢台: [114.520487, 37.069531],
    邯郸: [114.482694, 36.609308],
    // 青海省
    // 海南: [100.624066, 36.284364],
    海西: [97.342625, 37.373799],
    海东: [102.085207, 36.51761],
    果洛: [100.223723, 34.480485],
    西宁: [101.767921, 36.640739],
    海北: [100.879802, 36.960654],
    黄南: [102.0076, 35.522852],
    玉树: [97.013316, 33.00624],
    // 湖南省
    邵阳: [111.461525, 27.236811],
    张家界: [110.48162, 29.124889],
    益阳: [112.366547, 28.588088],
    怀化: [109.986959, 27.557483],
    湘西: [109.745746, 28.317951],
    郴州: [113.037704, 25.782264],
    衡阳: [112.583819, 26.898164],
    永州: [111.614648, 26.435972],
    株洲: [113.131695, 27.827433],
    岳阳: [113.146196, 29.378007],
    长沙: [112.979353, 28.213478],
    湘潭: [112.935556, 27.835095],
    常德: [111.653718, 29.012149],
    娄底: [111.996396, 27.741073],
    // 江苏省
    镇江: [119.455835, 32.204409],
    常州: [119.981861, 31.771397],
    南通: [120.873801, 32.014665],
    泰州: [119.919606, 32.476053],
    南京: [118.778074, 32.057236],
    苏州: [120.619907, 31.317987],
    盐城: [120.148872, 33.379862],
    宿迁: [118.296893, 33.95205],
    无锡: [120.305456, 31.570037],
    连云港: [119.173872, 34.601549],
    徐州: [117.188107, 34.271553],
    淮安: [119.030186, 33.606513],
    扬州: [119.427778, 32.408505],
    // 山东省
    潍坊: [119.142634, 36.716115],
    日照: [119.50718, 35.420225],
    济宁: [116.600798, 35.402122],
    聊城: [115.986869, 36.455829],
    德州: [116.328161, 37.460826],
    临沂: [118.340768, 35.072409],
    枣庄: [117.279305, 34.807883],
    莱芜: [117.684667, 36.233654],
    烟台: [121.309555, 37.536562],
    淄博: [118.059134, 36.804685],
    滨州: [117.968292, 37.405314],
    泰安: [117.089415, 36.188078],
    荷泽: [115.46336, 35.26244],
    济南: [117.024967, 36.682785],
    威海: [122.093958, 37.528787],
    青岛: [120.384428, 36.105215],
    东营: [118.583926, 37.487121],
    // 安徽省
    宣城: [118.752096, 30.951642],
    阜阳: [115.820932, 32.901211],
    亳州: [115.787928, 33.871211],
    蚌埠: [117.35708, 32.929499],
    黄山: [118.29357, 29.734435],
    六安: [116.505253, 31.755558],
    池州: [117.494477, 30.660019],
    滁州: [118.32457, 32.317351],
    淮南: [117.018639, 32.642812],
    铜陵: [117.819429, 30.94093],
    合肥: [117.282699, 31.866942],
    芜湖: [118.384108, 31.36602],
    马鞍山: [118.515882, 31.688528],
    安庆: [117.058739, 30.537898],
    淮北: [116.791447, 33.960023],
    宿州: [116.988692, 33.636772],
    巢湖: [117.88049, 31.608733],
    //黑龙江省
    双鸭山: [131.171402, 46.655102],
    绥化: [126.989095, 46.646064],
    大兴安岭: [124.196104, 51.991789],
    佳木斯: [130.284735, 46.81378],
    黑河: [127.50083, 50.25069],
    哈尔滨: [126.657717, 45.773225],
    大庆: [125.02184, 46.596709],
    七台河: [131.019048, 45.775005],
    伊春: [128.910766, 47.734685],
    牡丹江: [129.608035, 44.588521],
    鸡西: [130.941767, 45.32154 | 13],
    齐齐哈尔: [123.987289, 47.3477],
    鹤岗: [130.292472, 47.338666],
    // 福建省
    三明: [117.642194, 26.270835],
    厦门: [118.103886, 24.489231],
    龙岩: [117.017997, 25.078685],
    莆田: [119.077731, 25.44845],
    南平: [118.181883, 26.643626],
    宁德: [119.542082, 26.656527],
    泉州: [118.600362, 24.901652],
    漳州: [117.676205, 24.517065],
    福州: [119.330221, 26.047125],
    // 甘肃省
    定西: [104.626638, 35.586056],
    嘉峪关: [98.281635, 39.802397],
    庆阳: [107.644227, 35.726801],
    酒泉: [98.508415, 39.741474],
    临夏: [103.215249, 35.598514],
    金昌: [102.208126, 38.516072],
    张掖: [100.459892, 38.93932],
    白银: [104.171241, 36.546682],
    陇南: [104.934573, 33.39448],
    天水: [105.736932, 34.584319],
    兰州: [103.823305, 36.064226],
    武威: [102.640147, 37.933172],
    平凉: [106.688911, 35.55011],
    甘南: [102.917442, 34.992211],
    // 吉林省
    长春: [125.313642, 43.898338],
    通化: [125.94265, 41.736397],
    吉林: [126.564544, 43.871988],
    白山: [126.435798, 41.945859],
    松原: [124.832995, 45.136049],
    延边: [129.485902, 42.896414],
    辽源: [125.133686, 42.923303],
    白城: [122.840777, 45.621086],
    四平: [124.391382, 43.175525],
    // 江西省
    抚州: [116.360919, 27.954545],
    九江: [115.999848, 29.71964],
    宜春: [114.400039, 27.81113],
    上饶: [117.955464, 28.457623],
    赣州: [114.935909, 25.845296],
    南昌: [115.893528, 28.689578],
    吉安: [114.992039, 27.113848],
    景德镇: [117.186523, 29.303563],
    萍乡: [113.859917, 27.639544],
    新余: [114.947117, 27.822322],
    鹰潭: [117.03545, 28.24131]
  };

  public data: any = [
    {
      name: ‘北京‘,
      value: 900
    },
    {
      name: ‘天津‘,
      value: 90
    },
    {
      name: ‘合肥‘,
      value: 100
    },
    {
      name: ‘上海‘,
      value: 990
    },
    {
      name: ‘武汉‘,
      value: 329
    }
  ];

  public convertData(data: any) {
    let res: any = [];
    for (let i = 0; i < data.length; i++) {
      // console.log(data[i].name);
      this.$nextTick(() => {
        let geoCoord = this.geoCoordMap[data[i].name];
        // console.log(geoCoord);
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      });
    }
    // console.log(res);
    return res;
  }

  convertedData: any = [
    this.convertData(this.data),
    this.convertData(
      this.data
        .sort(function(a: any, b: any) {
          return b.value - a.value;
        })
        .slice(0, 6)
    )
  ];

  public chinaMap() {
    this.chinaEchart.clear();
    let option: any = {
      baseOption: {
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        visualMap: {
          show: true,
          type: ‘continuous‘,
          max: 300,
          min: 0,
          top: ‘center‘,
          right: ‘5%‘,
          align: ‘left‘,
          calculable: true,
          itemWidth: 40,
          itemHeight: 304,
          inRange: {
            color: [‘#00ECFF‘, ‘#FCCE00‘, ‘#E63504‘],
          },
          textStyle: {
            color: ‘#FFF‘,
            fontSize: 28
          }
        },
        geo: {
          map: ‘china‘,
          itemStyle: {
            areaColor: ‘#12B5C0‘,
            borderColor: ‘#000‘
          },
          emphasis: {
            itemStyle: {
              areaColor: ‘green‘,
            },
            label: {
              show: true,
              fontSize: 28,
              color: ‘#FFF‘
            }
          }
        },
        series: [
          {
            name: ‘热图‘,
            type: ‘heatmap‘,
            coordinateSystem: ‘geo‘,
            data: this.convertedData[0]
          },
          {
            name: ‘散点‘,
            type: ‘scatter‘,
            coordinateSystem: ‘geo‘,
            data: this.convertedData[0],
            symbolSize: function(val: any) {
              return 20 + Math.log2(val[2]);
            },
            label: {
              show: true,
              normal: {
                formatter: ‘{b}‘,
                position: ‘right‘,
                show: true,
                textStyle: {
                  fontSize: 28
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 28,
                  color: ‘#FFF‘
                }
              }
            },
            itemStyle: {
              normal: {
                color: ‘#ddb926‘
              }
            },
            tooltip: {
              trigger: ‘item‘,
              formatter: function(params: any) {
                return params.name + ‘ : ‘ + params.value[2];
              }
            }
          }
        ]
      }
      // options: []
    };
    this.chinaEchart.setOption(option);
  }
}
</script>

<style lang="scss">
.map {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  p {
    height: 50px;
    font-size: 36px;
    line-height: 50px;
    position: absolute;
    top: 30px;
    left: 40px;
  }
  .hr {
    position: absolute;
    top: 100px;
    width: 100%;
    height: 2px;
    background: #002f3b;
  }
  .chinaIcon {
    width: 100%;
    height: 660px;
    position: absolute;
    // left: 172px;
    bottom: 0;
    // border: 1px solid #fff;
  }
  // img{
  //   width: 100%;
  //   height: 100%;
  //   position: absolute;
  //   display: block;
  //   top: 0;left: 0;bottom: 0;right: 0;
  //   margin: auto;
  // }
}
</style>

 

效果如图所示；

下面是我参考的别人的配置：

visualMap=[                                     //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。
                                                 // colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。
    {
        show:true,                              //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
        type: ‘continuous‘,                     // 定义为连续型 viusalMap
        min:10,                                  //指定 visualMapContinuous 组件的允许的最小值
        max:100,                                 //指定 visualMapContinuous 组件的允许的最大值
        range:[15, 40],                          //指定手柄对应数值的位置。range 应在 min max 范围内
        calculable:true,                        //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
        realtime:true,                          //拖拽时，是否实时更新
        inverse:false,                          //是否反转 visualMap 组件
        precision:0,                            //数据展示的小数精度，默认为0，无小数点
        itemWidth:20,                           //图形的宽度，即长条的宽度。
        itemHeight:140,                         //图形的高度，即长条的高度。
        align:"auto",                           //指定组件中手柄和文字的摆放位置.可选值为：‘auto‘ 自动决定。‘left‘ 手柄和label在右。‘right‘ 手柄和label在左。‘top‘ 手柄和label在下。‘bottom‘ 手柄和label在上。
        text:[‘High‘, ‘Low‘],                   //两端的文本
        textGap:10,                              //两端文字主体之间的距离，单位为px
        dimension:2,                            //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
        seriesIndex:1,                          //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
        hoverLink:true,                         //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
        inRange:{                               //定义 在选中范围中 的视觉元素
            color: [‘#121122‘, ‘rgba(3,4,5,0.4)‘, ‘red‘],
            symbolSize: [30, 100]
        },
        outOfRange:{  //定义 在选中范围外 的视觉元素。
            color: [‘#121122‘, ‘rgba(3,4,5,0.4)‘, ‘red‘],
            symbolSize: [30, 100]
        },
        zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
        z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        left:"center",                              //组件离容器左侧的距离,‘left‘, ‘center‘, ‘right‘,‘20%‘
        top:"top",                                   //组件离容器上侧的距离,‘top‘, ‘middle‘, ‘bottom‘,‘20%‘
        right:"auto",                               //组件离容器右侧的距离,‘20%‘
        bottom:"auto",                              //组件离容器下侧的距离,‘20%‘
        orient:"vertical",                         //图例排列方向
        padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
        backgroundColor:"transparent",            //标题背景色
        borderColor:"#ccc",                         //边框颜色
        borderWidth:0,                               //边框线宽
        textStyle:mytextStyle,                      //文本样式
        formatter: function (value) {                 //标签的格式化工具。
            return ‘aaaa‘ + value;                    // 范围标签显示内容。
        }
    },
    {
        show:true,                          //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
        type: ‘piecewise‘,                  // 定义为分段型 visualMap
        splitNumber:5,                      //对于连续型数据，自动平均切分成几段。默认为5段
        pieces: [                           //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            {min: 1500},                     // 不指定 max，表示 max 为无限大（Infinity）。
            {min: 900, max: 1500},
            {min: 310, max: 1000},
            {min: 200, max: 300},
            {min: 10, max: 200, label: ‘10 到 200（自定义label）‘},
            {value: 123, label: ‘123（自定义特殊颜色）‘, color: ‘grey‘}, // 表示 value 等于 123 的情况。
            {max: 5}                        // 不指定 min，表示 min 为无限大（-Infinity）。
        ],
        categories:[‘严重污染‘, ‘重度污染‘, ‘中度污染‘, ‘轻度污染‘, ‘良‘, ‘优‘],  //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集
        min:10,                             //指定 visualMapContinuous 组件的允许的最小值
        max:100,                             //指定 visualMapContinuous 组件的允许的最大值
        minOpen:true,                       //界面上会额外多出一个『< min』的选块
        maxOpen:true,                       //界面上会额外多出一个『> max』的选块。
        selectedMode:"multiple",           //选择模式，可以是：‘multiple‘（多选）。‘single‘（单选）。
        inverse:false,                      //是否反转 visualMap 组件
        precision:0,                        //数据展示的小数精度，默认为0，无小数点
        itemWidth:20,                       //图形的宽度，即长条的宽度。
        itemHeight:140,                     //图形的高度，即长条的高度。
        align:"auto",                       //指定组件中手柄和文字的摆放位置.可选值为：‘auto‘ 自动决定。‘left‘ 手柄和label在右。‘right‘ 手柄和label在左。‘top‘ 手柄和label在下。‘bottom‘ 手柄和label在上。
        text:[‘High‘, ‘Low‘],               //两端的文本
        textGap:10,                          //两端文字主体之间的距离，单位为px
        showLabel:true,                     //是否显示每项的文本标签
        itemGap:10,                          //每两个图元之间的间隔距离，单位为px
        itemSymbol:"roundRect",             //默认的图形。可选值为： ‘circle‘, ‘rect‘, ‘roundRect‘, ‘triangle‘, ‘diamond‘, ‘pin‘, ‘arrow‘
        dimension:2,                          //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
        seriesIndex:1,                        //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
        hoverLink:true,                      //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
        inRange:{                             //定义 在选中范围中 的视觉元素
            color: [‘#121122‘, ‘rgba(3,4,5,0.4)‘, ‘red‘],
            symbolSize: [30, 100]
        },
        outOfRange:{                            //定义 在选中范围外 的视觉元素。
            color: [‘#121122‘, ‘rgba(3,4,5,0.4)‘, ‘red‘],
            symbolSize: [30, 100]
        },
        zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
        z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        left:"center",                              //组件离容器左侧的距离,‘left‘, ‘center‘, ‘right‘,‘20%‘
        top:"top",                                   //组件离容器上侧的距离,‘top‘, ‘middle‘, ‘bottom‘,‘20%‘
        right:"auto",                               //组件离容器右侧的距离,‘20%‘
        bottom:"auto",                              //组件离容器下侧的距离,‘20%‘
        orient:"vertical",                        //图例排列方向
        padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
        backgroundColor:"transparent",            //标题背景色
        borderColor:"#ccc",                         //边框颜色
        borderWidth:0,                               //边框线宽
        textStyle:mytextStyle,                      //文本样式
        formatter: function (value) {                //标签的格式化工具。
            return ‘aaaa‘ + value;                   // 范围标签显示内容。
        }
    }
];

 

具体查看echarts官网:

https://echarts.apache.org/zh/option.html#visualMap

 

 

 

visualMap=[                                     //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。                                                 // colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。    {        show:true,                              //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在        type: ‘continuous‘,                     // 定义为连续型 viusalMap        min:10,                                  //指定 visualMapContinuous 组件的允许的最小值        max:100,                                 //指定 visualMapContinuous 组件的允许的最大值        range:[15, 40],                          //指定手柄对应数值的位置。range 应在 min max 范围内        calculable:true,                        //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）        realtime:true,                          //拖拽时，是否实时更新        inverse:false,                          //是否反转 visualMap 组件        precision:0,                            //数据展示的小数精度，默认为0，无小数点        itemWidth:20,                           //图形的宽度，即长条的宽度。        itemHeight:140,                         //图形的高度，即长条的高度。        align:"auto",                           //指定组件中手柄和文字的摆放位置.可选值为：‘auto‘ 自动决定。‘left‘ 手柄和label在右。‘right‘ 手柄和label在左。‘top‘ 手柄和label在下。‘bottom‘ 手柄和label在上。        text:[‘High‘, ‘Low‘],                   //两端的文本        textGap:10,                              //两端文字主体之间的距离，单位为px        dimension:2,                            //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度        seriesIndex:1,                          //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列        hoverLink:true,                         //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮        inRange:{                               //定义 在选中范围中 的视觉元素            color: [‘#121122‘, ‘rgba(3,4,5,0.4)‘, ‘red‘],            symbolSize: [30, 100]        },        outOfRange:{  //定义 在选中范围外 的视觉元素。            color: [‘#121122‘, ‘rgba(3,4,5,0.4)‘, ‘red‘],            symbolSize: [30, 100]        },        zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面        z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖        left:"center",                              //组件离容器左侧的距离,‘left‘, ‘center‘, ‘right‘,‘20%‘        top:"top",                                   //组件离容器上侧的距离,‘top‘, ‘middle‘, ‘bottom‘,‘20%‘        right:"auto",                               //组件离容器右侧的距离,‘20%‘        bottom:"auto",                              //组件离容器下侧的距离,‘20%‘        orient:"vertical",                         //图例排列方向        padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]        backgroundColor:"transparent",            //标题背景色        borderColor:"#ccc",                         //边框颜色        borderWidth:0,                               //边框线宽        textStyle:mytextStyle,                      //文本样式        formatter: function (value) {                 //标签的格式化工具。            return ‘aaaa‘ + value;                    // 范围标签显示内容。        }    },    {        show:true,                          //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在        type: ‘piecewise‘,                  // 定义为分段型 visualMap        splitNumber:5,                      //对于连续型数据，自动平均切分成几段。默认为5段        pieces: [                           //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式            {min: 1500},                     // 不指定 max，表示 max 为无限大（Infinity）。            {min: 900, max: 1500},            {min: 310, max: 1000},            {min: 200, max: 300},            {min: 10, max: 200, label: ‘10 到 200（自定义label）‘},            {value: 123, label: ‘123（自定义特殊颜色）‘, color: ‘grey‘}, // 表示 value 等于 123 的情况。            {max: 5}                        // 不指定 min，表示 min 为无限大（-Infinity）。        ],        categories:[‘严重污染‘, ‘重度污染‘, ‘中度污染‘, ‘轻度污染‘, ‘良‘, ‘优‘],  //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集        min:10,                             //指定 visualMapContinuous 组件的允许的最小值        max:100,                             //指定 visualMapContinuous 组件的允许的最大值        minOpen:true,                       //界面上会额外多出一个『< min』的选块        maxOpen:true,                       //界面上会额外多出一个『> max』的选块。        selectedMode:"multiple",           //选择模式，可以是：‘multiple‘（多选）。‘single‘（单选）。        inverse:false,                      //是否反转 visualMap 组件        precision:0,                        //数据展示的小数精度，默认为0，无小数点        itemWidth:20,                       //图形的宽度，即长条的宽度。        itemHeight:140,                     //图形的高度，即长条的高度。        align:"auto",                       //指定组件中手柄和文字的摆放位置.可选值为：‘auto‘ 自动决定。‘left‘ 手柄和label在右。‘right‘ 手柄和label在左。‘top‘ 手柄和label在下。‘bottom‘ 手柄和label在上。        text:[‘High‘, ‘Low‘],               //两端的文本        textGap:10,                          //两端文字主体之间的距离，单位为px        showLabel:true,                     //是否显示每项的文本标签        itemGap:10,                          //每两个图元之间的间隔距离，单位为px        itemSymbol:"roundRect",             //默认的图形。可选值为： ‘circle‘, ‘rect‘, ‘roundRect‘, ‘triangle‘, ‘diamond‘, ‘pin‘, ‘arrow‘        dimension:2,                          //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度        seriesIndex:1,                        //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列        hoverLink:true,                      //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮        inRange:{                             //定义 在选中范围中 的视觉元素            color: [‘#121122‘, ‘rgba(3,4,5,0.4)‘, ‘red‘],            symbolSize: [30, 100]        },        outOfRange:{                            //定义 在选中范围外 的视觉元素。            color: [‘#121122‘, ‘rgba(3,4,5,0.4)‘, ‘red‘],            symbolSize: [30, 100]        },        zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面        z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖        left:"center",                              //组件离容器左侧的距离,‘left‘, ‘center‘, ‘right‘,‘20%‘        top:"top",                                   //组件离容器上侧的距离,‘top‘, ‘middle‘, ‘bottom‘,‘20%‘        right:"auto",                               //组件离容器右侧的距离,‘20%‘        bottom:"auto",                              //组件离容器下侧的距离,‘20%‘        orient:"vertical",                        //图例排列方向        padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]        backgroundColor:"transparent",            //标题背景色        borderColor:"#ccc",                         //边框颜色        borderWidth:0,                               //边框线宽        textStyle:mytextStyle,                      //文本样式        formatter: function (value) {                //标签的格式化工具。            return ‘aaaa‘ + value;                   // 范围标签显示内容。        }    }];