echarts地图 可视化大屏使用echarts-map实现地图轮播效果

记录一下大屏开发中使用到的echartsMap
大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改
这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了

初始效果

效果图:
适应大屏风格的发光地图效果,用了两个图层实现叠加背景图片实现:
在这里插入图片描述
地图配置代码:
到这里是简单实现了图中有高度效果的地图

// 地图初始化
    render_echartsMap(mapData) {
      var chartDom = document.getElementById('map_wrapper') // 挂载元素
      var myChart = chartDom && echarts.init(chartDom) // 初始化echarts地图
      echarts.registerMap('JS', jiaxing) // 注册地图 注意这里的地图json文件需要换成自己需要的
      var option
      option = {
        geo: [
          {
            map: 'JS',
            aspectScale: 1, // 横向拉伸
            zoom: 1.2,
            zlevel: 2,
            label: {
              show: true,
              color: '#eee'
            },
            itemStyle: {
              color: 'rgba(23, 89, 151, 0.35)', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: '#5FD7FF' // 边框颜色
            },
            emphasis: {
              areaColor: '#195BB9',
              label: {
                show: true
              }
            }
          },
          {
            map: 'JS',
            top: '13%',
            aspectScale: 1, // 横向拉伸
            zoom: 1.2,
            zlevel: 1,
            itemStyle: {
              color: 'rgba(23, 89, 151, 0.1)', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: 'RGBA(129, 222, 227, 0.3)', // 边框颜色
              shadowColor: '#fff', // 外部阴影
              shadowBlur: '10',
              colorStops: [
                {
                  offset: 0,
                  color: 'black' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'blue' // 100% 处的颜色
                }
              ]
            }
          }
        ]
      }
      myChart && myChart.setOption(option)
    }
echarts-map 叠加散点图层

效果图:
在这里插入图片描述
根据需求,需要渲染辖区内的数据量,对辖区内的高危数据进行展示,又加了散点图层
由于用户的设备屏幕尺寸较小影响渲染,发光效果会导致文字看不清就取消了

代码:
在上述代码的 render_echartsMap() 方法中,增加以下内容:

    render_echartsMap(mapData) {
      // 地图json文件中的
      const geoCoordMap = {
        南湖区: [120.842186, 30.711139],
        秀洲区: [120.686302, 30.768878],
        嘉善县: [120.902273, 30.8996],
        海盐县: [120.929474, 30.474419],
        海宁市: [120.623175, 30.425385],
        平湖市: [121.103105, 30.705649],
        桐乡市: [120.483851, 30.605938],
        经开区: [120.726302, 30.728878]
      }
      // 转化为需要渲染的数据
      const convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }
      option = {
        geo: [...], // ...... 这里是geo图层
        series: [
          {
            name: '散点', // 自定义名称
            type: 'effectScatter', // scatter  effectScatter
            coordinateSystem: 'geo', // 设置坐标系类型
            data: convertData(mapData), // 设置散点位置和数据
            symbolSize: function(val) {
              // 设置散点大小
              return 10
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true, // 是否显示鼠标悬浮动画
            label: {
              // 静态显示时的样式
              normal: {
                show: true, // 显示地区名称
                formatter: function(data) {
                  // 显示模板
                  return '高危企业:' + data.value[2]
                },
                position: 'bottom' // 显示位置
              },
              // 鼠标悬浮上去的样式
              emphasis: {
                // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                label: {
                  // label高亮时的配置
                  show: true,
                  textStyle: {
                    color: '#ffffff', // 高亮时标签颜色变为 白色
                    fontSize: 20 // 高亮时标签字体 变大
                  }
                },
                itemStyle: {
                  // itemStyle高亮时的配置
                  areaColor: '#006cff' // 高亮时地图板块颜色改变
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#27d3c3',
                shadowBlur: 10
              },
              // 鼠标悬浮上去的样式
              emphasis: {
                fontSize: 20
              }
            },
            zlevel: 3
          }
        ]
      }
    },
echarts-map 实现轮播效果 tooltip formatter

效果图:
在这里插入图片描述
完整代码:

    // 地图初始化
    render_echartsMap(mapData) {
      const geoCoordMap = {
        南湖区: [120.842186, 30.711139],
        秀洲区: [120.686302, 30.768878],
        嘉善县: [120.902273, 30.8996],
        海盐县: [120.929474, 30.474419],
        海宁市: [120.623175, 30.425385],
        平湖市: [121.103105, 30.705649],
        桐乡市: [120.483851, 30.605938],
        经开区: [120.726302, 30.728878]
      }
      const convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value[0], data[i].value[1], data[i].value[2])
            })
          }
        }
        return res
      }
      var chartDom = document.getElementById('map_wrapper')
      var myChart = chartDom && echarts.init(chartDom) // 初始化echarts
      echarts.registerMap('JS', jiaxing) // 注册地图
      var option
      option = {
        tooltip: {
          show: true,
          confine: true,
          textStyle: {
            align: 'left'
          },
          formatter: function(data) {
            // 显示模板
            return [
              data.data.name,
              '高危企业:' + data.data.value[2] + ' 家',
              '高危车辆:' + data.data.value[3] + ' 辆',
              '高危驾驶人:' + data.data.value[4] + ' 人'
            ].join('<br>')
          }
        },
        series: [
          {
            name: '嘉兴市高危数据统计',
            type: 'map',
            map: 'JS',
            aspectScale: 1, // 横向拉伸
            zoom: 1.35,
            radius: '80%',
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            data: convertData(mapData),
            label: {
              normal: {
                show: true,
                textStyle: { color: '#fff' }
              },
              emphasis: {
                show: true,
                textStyle: { color: '#fff' }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, // 区域边框宽度
                borderColor: '#5FD7FF', // 区域边框颜色
                areaColor: 'rgba(23, 89, 151, 0.35)' // 区域颜色
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#fff',
                areaColor: 'rgba(37, 200, 249, 0.75)'
              }
            }
          }
        ]
      }
      myChart && myChart.setOption(option)
      this.mapActive(mapData, myChart)
    },
    // 地图高亮轮播
    mapActive(mapData, myChart) {
      if (!myChart) {
        return
      }
      const dataLength = mapData.length
      // 用定时器控制高亮
      this.mTime = setInterval(() => {
        // 清除之前的高亮
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.dataIndex
        })
        this.dataIndex++
        // 当前下标高亮
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.dataIndex
        })
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: this.dataIndex
        })
        if (this.dataIndex > dataLength) {
          this.dataIndex = 0
        }
      }, 3000)
      myChart.on('mouseover', () => {
        console.log('mouseover')
        // 停止定时器,清除之前的高亮
        clearInterval(this.mTime)
        this.mTime = ''
        console.log(this.mTime)
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.dataIndex
        })
      })
      // 鼠标划出重新定时器开始
      myChart.on('mouseout', () => {
        this.mapActive(mapData, myChart)
      })
    },
  • 9
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
基于echarts可以实现强大的可视化大屏展示,通过将数据以图形的方式展现出来,使得数据更加直观和易于理解。 首先,我们可以使用echarts的各种图表类型,如折线图、柱状图、饼图等来展示数据。可以根据不同的需求选择合适的图表类型,并通过数据的组织和配置,使得图表能够准确地展示数据的趋势、分布等信息。 其次,echarts提供了丰富的交互功能,使得大屏展示更加生动和灵活。我们可以通过鼠标滚动、拖拽等方式来对图表进行交互,改变视角和放大细节,从而更好地理解数据。同时,echarts还支持添加图例、数据标签、工具栏等元素,提高用户的交互体验和数据的可读性。 此外,echarts还支持数据的实时更新和动态展示。我们可以通过定时刷新数据,使得大屏展示能够实时地反映数据的变化。同时,我们还可以通过动画效果,使得数据的变化过程更加平滑和直观,增强大屏展示的吸引力和引导性。 最后,echarts支持跨平台的展示。我们可以将基于echarts可视化大屏展示运行在各种终端上,如PC、手机、平板等。这样方便了数据的展示和分享,在不同的场景和设备上都能够获得良好的可视化体验。 总的来说,基于echarts实现可视化大屏展示可以帮助我们更好地理解和分析数据,使得数据变得更加有说服力和有影响力。无论是用于商业决策、数据分析、舆情监测等领域,都能够发挥重要的作用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值