echarts地图(按范围区分颜色)

注意：echarts 5开头的版本是不支持地图的，可以采取双版本公用的模式，下载4开头的版本 npm install echarts4@npm:echarts@^4.9.0下载后，用如下方法引用   

 

import * as echarts from "echarts";

import echarts4 from 'echarts4';

import china from 'echarts4/map/json/china.json';

echarts4.registerMap('china', china)

<div id="mapSituation"></div>

 //很重要的引入

import echarts from 'echarts'

import china from 'echarts/map/json/china.json'

echarts.registerMap('china', china)

data(){
  return{
      mapSituation: {},//地图  
    }  
}

methods:{
  initMapSituation () {//地图init方法
      this.mapSituation.setOption({
        tooltip: {
          formatter: function (params) {//提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            return params.name + '<br />' + params.seriesName + '：' + params.value;
          }
        },
        dataRange: {//左下角的颜色块。start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值
          x: 'left',
          y: 'bottom',
          left: '20px',
          textStyle: {
            fontSize: '10',
          },
          itemHeight: 14,
          itemWidth: 14,
          marginLeft: '20px',
          splitList: [
            { start: 0, end: 0, label: '0', color: '#b9c3f2' },
            { start: 1, end: 99, label: '1-99人', color: '#5bc9a0' },
            { start: 100, end: 199, label: '100-199人', color: '#927df2' },
            { start: 200, end: 299, label: '200-299人', color: '#eda83c' },
            { start: 300, label: '300人以上', color: '#e94d26' },
          ]
        },

        geo: {
          map: name,
          zoom: 1.2,
          label: {
            normal: {
              show: true,
              color: '#333',
              fontSize: 9
            },
            emphasis: {
              show: false,
              color: '#fff'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#fff',
              borderColor: '#fff',
            },
            emphasis: {
              areaColor: '#ff0000'
            }
          }
        },
        series: [{
          name: this.mapName,// 系列名称
          type: 'map',//图表类型
          map: 'china',
          mapType: 'china',
          roam: false,
          top: '50px',
          bottom: '50px',
          itemStyle: {// 图形样式
            normal: {
              label: { show: true },
              borderColor: '#bfcbf4',
            },// 默认状态下地图的文字
            emphasis: { label: { show: true } },// 鼠标放到地图上面显示文字
            fontSize: '6'
          },
          zoom: 1.2,
          data: [
            { name: '北京', value: 0 },
            { name: '天津', value: 2 },
            { name: '上海', value: 0 },
            { name: '重庆', value: 0 },
            { name: '河北', value: 0 },
            { name: '河南', value: 0 },
            { name: '云南', value: 0 },
            { name: '辽宁', value: 0 },
            { name: '黑龙江', value: 0 },
            { name: '湖南', value: 0 },
            { name: '安徽', value: 0 },
            { name: '山东', value: 0 },
            { name: '新疆', value: 130 },
            { name: '江苏', value: 140 },
            { name: '浙江', value: 150 },
            { name: '江西', value: 16 },
            { name: '湖北', value: 0 },
            { name: '广西', value: 228 },
            { name: '甘肃', value: 19 },
            { name: '山西', value: 0 },
            { name: '内蒙古', value: 21 },
            { name: '陕西', value: 22 },
            { name: '吉林', value: 223 },
            { name: '福建', value: 24 },
            { name: '贵州', value: 0 },
            { name: '广东', value: 26 },
            { name: '青海', value: 27 },
            { name: '西藏', value: 301 },
            { name: '四川', value: 0 },
            { name: '宁夏', value: 30 },
            { name: '海南', value: 31 },
            { name: '台湾', value: 32 },
            { name: '香港', value: 33 },
            { name: '澳门', value: 34 },
            { name: '南海诸岛', value: 0 },
          ],
        }]
      })
    }  
}

mounted(){
    this.mapSituation = echarts.init(document.getElementById('mapSituation'));
    this.initMapSituation();
}

#mapSituation {//可自适应父级宽高，但要有最小值

    width: 100%;

    min-height: 390px;

    height: 100%;

}