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

2024-01-15 10:00:10

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


  // 引入文件
  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 }] }) },

码农公寓

相关文章