视觉映射

1.连续型

option = {

  visualMap: {
    type: 'continuous',
    min: 0,
    max: 1000000,
    text: ['High', 'Low'],
    realtime: false,
    calculable: true,
    color: ['orangered', 'yellow', 'lightskyblue']
  },
  series: [
    {
      name: 'World Population (2010)',
      type: 'map',
      mapType: 'world',
      roam: true,
      itemStyle: {
        emphasis: { label: { show: true } }
      },
      data: [
        { name: 'Afghanistan', value: 28397.812 },
        { name: 'Angola', value: 19549.124 },
        { name: 'Albania', value: 3150.143 },
        { name: 'United Arab Emirates', value: 8441.537 },
        { name: 'Argentina', value: 40374.224 },
        { name: 'Armenia', value: 2963.496 },
        { name: 'French Southern and Antarctic Lands', value: 268.065 },
        { name: 'Australia', value: 22404.488 },
        { name: 'Austria', value: 8401.924 },
        { name: 'Azerbaijan', value: 9094.718 },
        { name: 'Burundi', value: 9232.753 },
        { name: 'Belgium', value: 10941.288 },
        { name: 'Benin', value: 9509.798 },
        { name: 'Burkina Faso', value: 15540.284 },
        { name: 'Bangladesh', value: 151125.475 },
        { name: 'Bulgaria', value: 7389.175 },
        { name: 'The Bahamas', value: 66402.316 },
        { name: 'Bosnia and Herzegovina', value: 3845.929 },
        { name: 'Belarus', value: 9491.07 },
        { name: 'Belize', value: 308.595 },
        { name: 'Bermuda', value: 64.951 },
        { name: 'Bolivia', value: 716.939 },
        { name: 'Brazil', value: 195210.154 },
        { name: 'Brunei', value: 27.223 },
        { name: 'Bhutan', value: 716.939 },
        { name: 'Botswana', value: 1969.341 },
        { name: 'Central African Republic', value: 4349.921 },
        { name: 'Canada', value: 34126.24 },
        { name: 'Switzerland', value: 7830.534 },
        { name: 'Chile', value: 17150.76 },
        { name: 'China', value: 1359821.465 },
        { name: 'Ivory Coast', value: 60508.978 },
        { name: 'Cameroon', value: 20624.343 },
        { name: 'Democratic Republic of the Congo', value: 62191.161 },
        { name: 'Republic of the Congo', value: 3573.024 },
        { name: 'Colombia', value: 46444.798 },
        { name: 'Costa Rica', value: 4669.685 },
        { name: 'Cuba', value: 11281.768 },
        { name: 'Northern Cyprus', value: 1.468 },
        { name: 'Cyprus', value: 1103.685 },
        { name: 'Czech Republic', value: 10553.701 },
        { name: 'Germany', value: 83017.404 },
        
      ]
    }
  ]
};

2.分段型

option = {

  visualMap: {
     type: 'piecewise',
    min: 0,
    max: 2000000,
    splitNumber: 5,
    
    color: ['orangered', 'yellow', 'lightskyblue']
  },
  series: [
    {
      name: 'World Population (2010)',
      type: 'map',
      mapType: 'world',
      roam: true,
      itemStyle: {
        emphasis: { label: { show: true } }
      },
      data: [
        { name: 'Afghanistan', value: 28397.812 },
        { name: 'Angola', value: 19549.124 },
        { name: 'Albania', value: 3150.143 },
        { name: 'United Arab Emirates', value: 8441.537 },
        { name: 'Argentina', value: 40374.224 },
        { name: 'Armenia', value: 2963.496 },
        { name: 'French Southern and Antarctic Lands', value: 268.065 },
        { name: 'Australia', value: 22404.488 },
        { name: 'Austria', value: 8401.924 },
        { name: 'Azerbaijan', value: 9094.718 },
        { name: 'Burundi', value: 9232.753 },
        { name: 'Belgium', value: 10941.288 },
        { name: 'Benin', value: 9509.798 },
        { name: 'Burkina Faso', value: 15540.284 },
        { name: 'Bangladesh', value: 151125.475 },
        { name: 'Bulgaria', value: 7389.175 },
        { name: 'The Bahamas', value: 66402.316 },
        { name: 'Bosnia and Herzegovina', value: 3845.929 },
        { name: 'Belarus', value: 9491.07 },
        { name: 'Belize', value: 308.595 },
        { name: 'Bermuda', value: 64.951 },
        { name: 'Bolivia', value: 716.939 },
        { name: 'Brazil', value: 195210.154 },
        { name: 'Brunei', value: 27.223 },
        { name: 'Bhutan', value: 716.939 },
        { name: 'Botswana', value: 1969.341 },
        { name: 'Central African Republic', value: 4349.921 },
        { name: 'Canada', value: 34126.24 },
        { name: 'Switzerland', value: 7830.534 },
        { name: 'Chile', value: 17150.76 },
        { name: 'China', value: 1359821.465 },
        { name: 'Ivory Coast', value: 60508.978 },
        { name: 'Cameroon', value: 20624.343 },
        { name: 'Democratic Republic of the Congo', value: 62191.161 },
        { name: 'Republic of the Congo', value: 3573.024 },
        { name: 'Colombia', value: 46444.798 },
        { name: 'Costa Rica', value: 4669.685 },
        { name: 'Cuba', value: 11281.768 },
        { name: 'Northern Cyprus', value: 1.468 },
        { name: 'Cyprus', value: 1103.685 },
        { name: 'Czech Republic', value: 10553.701 },
        { name: 'Germany', value: 83017.404 },
        
      ]
    }
  ]
};

3.视觉映射方式的配置

option = {
    visualMap: [
        {
            type: 'piecewise'
            min: 0,
            max: 5000,
            dimension: 3,       // series.data 的第四个维度（即 value[3]）被映射
            seriesIndex: 4,     // 对第四个系列进行映射。
            inRange: {          // 选中范围中的视觉配置

　　　　　　　　　　colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。 // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。

                color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，
                                                    // 数据最小值映射到'blue'上，
                                                    // 最大值映射到'red'上，
                                                    // 其余自动线性计算。
                symbolSize: [30, 100]               // 定义了图形尺寸的映射范围，
                                                    // 数据最小值映射到30上，
                                                    // 最大值映射到100上，
                                                    // 其余自动线性计算。
            },
            outOfRange: {       // 选中范围外的视觉配置
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};