当前位置：首页 > news >正文

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

news 来源：原创 2025/8/11 21:33:10

若依框架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) returnthis.isChartInitialized = trueif (!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 = truethis.$nextTick(() => {if (this._initChartPending) {this.initChart()}})},beforeDestroy() {this._initChartPending = falseif (!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) returnthis.isChartInitialized = trueif (!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>

组件调用

参考若依框架index图表调用方法！

总结

整合过程中需注意版本兼容性、异步加载时序问题及图表性能优化，最终实现高效、灵活的数据可视化功能，满足企业级应用复杂需求。