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

若依框架Ruoyi-vue整合图表Echarts中国地图

概述
创作灵感
预期效果
整合教程
- 前期准备
- 整合若依框架
- - 1、引入china.json
  - 2、方法
  - 3、data演示数据
  - 4、核心代码
- 完整代码[毫无保留]
- 组件调用
总结

概述

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

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

需要考虑到用户可能在使用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'
            }
         },
         animation: false,
         data: data
      },
      // 散点
      {
         name: '散点',
         type: 'scatter',
         coordinateSystem: 'geo',
         symbolSize: 5,
         label: {
            normal: {
               show: false,
               position: 'right'
            }
         },
         itemStyle: {
            normal: {
               color: 'red'
            }
         },
         zlevel: 10,
         data: data
      },
      {
         name: '点',
         type: 'scatter',
         coordinateSystem: 'geo',
         symbol: 'pin', //气泡
         symbolSize: function (val) {
            return 40
         },
         label: {
            show: true,
            formatter: function (parm) {
               return parm.value[4]
            },
            textStyle: {
               color: '#fff'
            }
         },
         itemStyle: {
            color: '#F62157' //标志颜色
         },
         zlevel: 6,
         data: data
      },
   ]
}

我们需要将 option 塞到若依已有的 echarts this.chart.setOption(option)

整合若依框架

思路：结合若依框架自带的 echarts 图表组件，我们直接复制一个 demo，将上面的 option 替换掉模板里的 option

1、引入china.json

首先引入 china.json

import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'
// GeoJSON资源在线查询、下载工具
import chinaJson from '../mixins/china.json'

2、方法

initChart() {
  const option = {
   //复制上面的 option
   ...
}
}

3、data演示数据

// 放到 initChart()
let data = [
   {
      name: "北京",
      value: [116.405285, 39.904989, 116.405285, 39.904989, 49]
   },
   {
      name: "天津",
      value: [117.190182, 39.125596, 117.190182, 39.125596, 18]
   },
   {
      name: "河北",
      value: [114.502461, 38.045474, 114.502461, 38.045474, 97]
   },
   {
      name: "山西",
      value: [112.549248, 37.857014, 112.549248, 37.857014, 85]
   },
   {
      name: "内蒙古",
      value: [111.670801, 40.818311, 111.670801, 40.818311, 83]
   },

]

4、核心代码

// 防止重复初始化
      if (this.isChartInitialized) return
      this.isChartInitialized = true

      if (!this.$el) return

      // this.chart = echarts.init(this.$el, 'macarons')
      // this.chart.showLoading()

      // 校验地理数据
      if (!this.geoJsonData) {
        this.geoJsonData = chinaJson
      }

      if (!this.geoJsonData || !this.geoJsonData.features) {
        throw new Error('Invalid or missing geoJson data')
      }

      // 注册地图
      if (!echarts.getMap(MAP_NAME)) {
        echarts.registerMap(MAP_NAME, this.geoJsonData)
      }

      this.chart.setOption(option)

完整代码[毫无保留]

十年磨一剑！🌹🌹🌹🌹
冰冻三尺非一日之寒！🤣🤣🤣🤣🤣🤣
最好的内容是产品，最好的产品是体验、服务、信用！👍
授之以渔不入授之鱼🤣🤣🤣🤣🤣🤣
更多开源请登录网址 www.xnqys.com

<template>
  <div :class="className" :style="{ height: height, width: width }"/>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'
import chinaJson from '../json/china.json'

const MAP_NAME = 'china'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  data() {
    return {
      chart: null,
      _initChartPending: false
    }
  },
  mounted() {
    this._initChartPending = true
    this.$nextTick(() => {
      if (this._initChartPending) {
        this.initChart()
      }
    })
  },
  beforeDestroy() {
    this._initChartPending = false
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      const data = [
        {
          name: "北京",
          value: [116.405285, 39.904989, 454]
        },
        {
          name: "内蒙古",
          value: [111.670801, 40.818311, 399]
        },
        {
          name: "青海",
          value: [96.778916, 36.123178, 59]
        },
        {
          name: "新疆",
          value: [85.617733, 41.792818, 19]
        },
        {
          name: "云南",
          value: [101.712251, 24.040609, 19]
        }
      ]

      const option = {
        title: {
          text: '工程项目全国分布图',
          subtext: 'Data from Wikipedia'
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (!params || !params.data) return '0'
            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 || '')
              )
            }
            return ''
          }
        },
        visualMap: {
          show: true,
          min: 0,
          max: 500,
          left: 'right',
          top: 'top',
          text: ['高', '低'],
          realtime: false,
          calculable: true,
          seriesIndex: [0],
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }

        },
        geo: [
          {
            map: 'china',
            zoom: 1,
            z: 70,
            top: '10px',
            selected: false,
            label: {
              show: true,
              padding: 4,
              color: '#000',
              fontFamily: 'pf-zh'
            },
            itemStyle: {
              areaColor: '#DCDFE6',
              borderColor: '#fff',
              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,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#2b2b2b'
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: JSON.parse(JSON.stringify(data))
          },
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 5,
            label: {
              normal: {
                show: false,
                position: 'right'
              }
            },
            itemStyle: {
              normal: {
                color: '#f00'
              }
            },
            zlevel: 10,
            data: JSON.parse(JSON.stringify(data))
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: () => 40,
            label: {
              show: true,
              formatter: function (parm) {
                return parm.value[2]
              },
              textStyle: {
                color: '#ff0'
              }
            },
            itemStyle: {
              color: '#F62157' //标志颜色
            },
            zlevel: 1,
            data: JSON.parse(JSON.stringify(data))
          }
        ]
      }

      // 防止重复初始化
      if (this.isChartInitialized) return
      this.isChartInitialized = true

      if (!this.$el) return

      // this.chart = echarts.init(this.$el, 'macarons')
      // this.chart.showLoading()

      // 校验地理数据
      if (!this.geoJsonData) {
        this.geoJsonData = chinaJson
      }

      if (!this.geoJsonData || !this.geoJsonData.features) {
        throw new Error('Invalid or missing geoJson data')
      }

      // 注册地图
      if (!echarts.getMap(MAP_NAME)) {
        echarts.registerMap(MAP_NAME, this.geoJsonData)
      }

      this.chart.setOption(option)
    }
  }
}
</script>