vue用echarts实现中国地图和世界地图

 部分代码和实现效果图如下


  // 引入文件
  import echarts from 'echarts'
  import '../../../../node_modules/echarts/map/js/china.js'
  import '../../../../node_modules/echarts/map/js/world.js'

  // 地图配置代码
　 chinaConfigure(mapData) {
      const chinaMap = echarts.init(this.$refs.chinaMap)  // 绑定页面div盒子
      window.onresize = chinaMap.resize //实现地图自适应

      chinaMap.setOption({
        backgroundColor: '#071748',
        geo: {
          map: 'china',
          roam: false,
          zoom: 1,
          label: {
            normal: {
              show: false, // 是否显示对应地名
              textStyle: {
                color: '#02F6F9'
              }
            },
            emphasis: { // 对应的鼠标悬浮效果
              show: true,
              textStyle: {
                color: '#02F6F9'
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#091E64',
              borderColor: '#024DBA'
            },
            emphasis: {
              borderWidth: 1,
              areaColor: '#091E64',
              borderColor: '#024DBA'
            }
          }
        },
        visualMap: {
          type: 'piecewise',
          inRange: {
            color: ['#02F6F9', '#02F6F9', '#02F6F9']
          },
          pieces: [
            { min: 0, max: 99, color: 'rgba(2,246,249, 1)' },
            {
              min: 100,
              max: 10000,
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  { offset: 0, color: 'rgba(11,28,92,0)' },
                  { offset: 0.8, color: 'rgba(10,94,137, 0.5)' },
                  { offset: 1, color: 'rgba(2, 246, 249, 1)' }
                ],
                globalCoord: false // 缺省为 false
              }
            }
          ],
          show: false,
          textStyle: {
            color: '#ffffff',
            fontSize: 16
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: function(val) { // 每个省市泡泡大小
              val[2] === 1 ? val[2] = val[2]+1 : val[2] = val[2]
              if (val[2] < 100) {
                return Math.log(val[2]) * 3
              } else {
                return Math.log(val[2]) * 6
              }
            },
            label: {
              normal: {
                show: true,
                color: '#fff',
                fontWeight: 'normal',
                position: 'inside',
                formatter: function(para) {
                  if (para.data.value[2] >= 100 && para.data.value[2] < 200) {
                    return '{cnNum|' + para.data.value[2] + '}'
                  } else if (para.data.value[2] >= 200) {
                    return '{txtFontsize|' + para.data.name + '}\n{cnNum|' + para.data.value[2] + '}'
                  } else {
                    return ''
                  }
                },
                rich: {
                  cnNum: {
                    fontSize: 14,
                    fontWeight: 'bold',
                    align: 'center',
                    color: '#fff'
                  },
                  txtFontsize: {
                    fontSize: 10,
                    align: 'center',
                    color: '#02F6F9'
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(12, 30, 99, 0.2)',
                color: '#fff'
              }
            },
            data: mapData
          }]
      })
    },

   // 世界地图配置代码    worldConfigure(mapData) {       const worldMap = echarts.init(this.$refs.worldMap)  // 绑定页面div盒子       window.onresize = worldMap.resize  //实现地图自适应
      worldMap.setOption({         nameMap: wolrdName(),         visualMap: {           type: 'piecewise',           inRange: {color: ['#02F6F9', '#02F6F9', '#02F6F9']},           pieces: [             { min: 0, max: 99, color: 'rgba(2,246,249, 1)' },             {               min: 100,               max: 100000,               color: {                 type: 'radial',                 x: 0.5,                 y: 0.5,                 r: 0.5,                 colorStops: [                   { offset: 0, color: 'rgba(11,28,92,0)' },                   { offset: 0.9, color: 'rgba(10,94,137, 0.5)' },                   { offset: 1, color: 'rgba(2, 246, 249, 1)' }                 ],                 globalCoord: false // 缺省为 false               }             }           ],           show: false,           textStyle: {             color: '#ffffff',             fontSize: 16           }         },         geo: {           map: 'world',           roam: false,           zoom: 1,           label: {             normal: {               show: false, // 是否显示对应地名               textStyle: {                 color: '#02F6F9'               }             },             emphasis: { // 对应的鼠标悬浮效果               show: true,               textStyle: {                 color: '#02F6F9'               }             }           },           itemStyle: {             normal: {               areaColor: '#091E64',               borderColor: '#024DBA'             },             emphasis: {               borderWidth: 1,               areaColor: '#091E64',               borderColor: '#024DBA'             }           }         },         series: [{           type: 'scatter',           coordinateSystem: 'geo',           mapType: 'world',           symbol: 'circle',           symbolSize: function(val) {             val[2] === 1 ? val[2] = val[2]+1 : val[2] = val[2]             if (val[2] < 100) {               return Math.log(val[2]) * 3             } else {               return Math.log(val[2]) * 6             }           },           label: {             normal: {               show: true,               color: '#fff',               fontWeight: 'normal',               position: 'inside',               formatter: function(para) {                 if (para.data.value[2] >= 100 && para.data.value[2] < 200) {                   return '{cnNum|' + para.data.value[2] + '}'                 } else if (para.data.value[2] >= 200) {                   return '{txtFontsize|' + para.data.name + '}\n{cnNum|' + para.data.value[2] + '}'                 } else {                   return ''                 }               },               rich: {                 cnNum: {                   fontSize: 14,                   fontWeight: 'bold',                   align: 'center',                   color: '#fff'                 },                 txtFontsize: {                   fontSize: 10,                   align: 'center',                   color: '#02F6F9'                 }               }             },             emphasis: {               show: true             }           },           itemStyle: {             normal: {               borderColor: 'rgba(12, 30, 99, 0.2)',               color: '#fff'             }           },           data: mapData         }]       })     },

 

标签：vue,val,para,show,color,02F6F9,世界地图,data,echarts
来源： https://www.cnblogs.com/lyxzxp/p/15683200.html