若依框架Ruoyi-vue整合图表Echarts中国地图标注动态数据

该文章已生成可运行项目,

概述

首先,我需要回忆之前给出的回答,确保这次的内容不重复,但又能补充关键注意事项。之前已经提到了版本兼容性、跨域问题、性能优化和权限控制,这些可能需要进一步细化。

接下来,用户的需求可能包括如何正确引入地图数据、处理注册问题、地图显示不出来的常见原因,数据格式是否正确,以及如何优化性能等。另外,用户可能还关心地图的更新策略,比如动态数据加载时的注意事项,以及如何保持代码的可维护性。

需要考虑到用户可能在使用Vue时的特殊问题,比如组件销毁时如何正确释放ECharts实例以避免内存泄漏,响应式布局的处理,还有地图JSON文件的正确引入方式。另外,中国地图的JSON文件可能需要从官方渠道获取,避免使用过时或错误的版本,这点也很重要。

还要注意ECharts的地图注册方法,确保在Vue组件中正确注册,可能需要使用echarts.registerMap。同时,用户可能遇到的地图显示空白的问题,可能和容器大小有关,或者没有在mounted钩子中初始化图表,这些都需要提到。

另外,数据格式方面,需要确保传给ECharts的数据是符合要求的数组结构,每个数据项包含name和value,这也是常见的问题点。动态数据更新时,是否需要销毁旧实例或重用实例,避免内存泄漏。

创作灵感

工程项目管理系统少不了动态图表显示,若依框架Ruoyi-vue整合图表Echarts中国地图来自开源项目的功能扩展:
开源地址:https://gitee.com/xnqysabout/ry-vue-flowable-xg

开源不易,您的 star 将是我们动力的源泉!

预期效果

在这里插入图片描述

整合教程

前期准备

在Echart demo集网址:https://www.isqqw.com选择适合自己的地图图表 demo,主要是用到 option,通过GeoJSON资源在线查询、下载工具下载 china.json 文件
在这里插入图片描述

const option = {
   
   
   backgroundColor: '#101c5e',
   tooltip: {
   
   
      trigger: "item",
      formatter: function (params, ticket, callback) {
   
   
         if (params.seriesType == "scatter") {
   
   
            return "线路:" + params.data.name + "" + params.data.value[2];
         } else if (params.seriesType == "lines") {
   
   
            return (
               params.data.fromName +
               ">" +
               params.data.toName +
               "<br />" +
               params.data.value
            );
         }
      }
   },
   visualMap: {
   
   
      show: false,
      min: 0,
      max: 100,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], // 文本,默认为数值文本
      calculable: true,
      seriesIndex: [1],
      inRange: {
   
   
         color: ['#004693'] // 蓝绿
      }
   },
   geo: [
      {
   
   
         map: 'china',
         zoom: 1.25,
         z: 70,
         top: '100px',
         selected: false,
         label: {
   
   
            show: true,
            padding: 4,
            color: '#ddd',
            fontFamily: 'pf-zh'
         },
         itemStyle: {
   
   
            areaColor: '#0c4c91',
            borderColor: 'rgba(147,234,245,.5)',
            borderWidth: 1
         },
         emphasis: {
   
   
            disabled: true
         },
         regions: [
            {
   
   
               name: '南海诸岛',
               emphasis: {
   
   
                  disabled: true
               },
               itemStyle: {
   
   
                  borderWidth: 1
               }
            }
         ]
      }
   ],
   series: [
      {
   
   
         type: 'map',
         map: 'china',
         geoIndex: 0,
         roam: true,
         aspectScale: 0.75, //长宽比
         showLegendSymbol: false, // 存在legend时显示
         label: {
   
   
            normal: {
   
   
               show: true
            },
            emphasis: {
   
   
               show: false,
               textStyle: {
   
   
                  color: '#fff'
               }
            }
         },
         itemStyle: {
   
   
            normal: {
   
   
               areaColor: '#031525',
               borderColor: '#3B5077'
            },
            emphasis: {
   
   
               areaColor: '#2B91B7'
            }
         
本文章已经生成可运行项目
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值