若依框架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'
}
},
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>
组件调用
参考若依框架index图表调用方法！
总结
整合过程中需注意版本兼容性、异步加载时序问题及图表性能优化，最终实现高效、灵活的数据可视化功能，满足企业级应用复杂需求。
扫一扫
1219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
