上海找做网站公司,.加强网站安全建设,西安广告设计公司有哪些,临沂网站制作专业1.引言
最近在做一个管理系统#xff0c;主要技术栈使用的是Vue3TSViteElementPlus#xff0c;主要参考项目是yudao-ui-admin-vue3#xff0c;其中用到ECharts5做数字大屏#xff0c;展示中国地图相关信息#xff0c;以此基础做一个分享#xff0c;写下这篇文章。
主要技术栈使用的是Vue3TSViteElementPlus主要参考项目是yudao-ui-admin-vue3其中用到ECharts5做数字大屏展示中国地图相关信息以此基础做一个分享写下这篇文章。
dependencies: {element-plus/icons-vue: ^2.1.0,kjgl77/datav-vue3: ^1.6.1,vueuse/core: ^10.2.1,echarts: ^5.4.2,echarts-wordcloud: ^2.1.0,element-plus: 2.3.7,vue: 3.3.4,vue-i18n: 9.2.2,vue-router: ^4.2.4,vue-types: ^5.1.0,vuedraggable: ^4.1.0}
在读这篇文章之前建议先读一下自适应大屏容器组件这篇文章。
2.封装ECharts组件
通常在实际项目中需要用到ECharts图表的地方肯定很多我们可以封装一个ECharts组件方便使用这里在 yudao-ui-admin-vue3基础上添加了一个响应式变量为了在引用ECharts父组件中获取到ECharts初始化实例在地图中自动随机显示各省份数据的函数中使用。
为什么要添加这个响应式变量了我实际使用中遇到的问题如果把ECharts初始化实例赋值为响应式变量会导致tooltip提示框在设置trigger: ‘axis’显示不出来如果赋值为非响应式变量父组件接受变量时数据为空拿不到数据所以我的解决办法是添加一个响应式变量这样双方都可以满足。
script langts setup
import type { EChartsOption } from echarts
import echarts from /plugins/echarts
import { debounce } from lodash-es
import echarts-wordcloud
import { propTypes } from /utils/propTypes
import { PropType } from vue
import { useAppStore } from /store/modules/app
import { isString } from /utils/is
import { useDesign } from /hooks/web/useDesigndefineOptions({ name: EChart })const { getPrefixCls, variables } useDesign()const prefixCls getPrefixCls(echart)const appStore useAppStore()const props defineProps({options: {type: Object as PropTypeEChartsOption,required: true},width: propTypes.oneOfType([Number, String]).def(100%),height: propTypes.oneOfType([Number, String]).def(100%)
})const isDark computed(() appStore.getIsDark)const theme computed(() {const echartTheme: boolean | string unref(isDark) ? true : autoreturn echartTheme
})const options computed(() {return Object.assign(props.options, {darkMode: unref(theme)})
})const elRef refElRef()let echartRef: Nullableecharts.ECharts null
/**********************添加的响应式变量******************/
const eChart ref()const contentEl refElement()const styles computed(() {const width isString(props.width) ? props.width : ${props.width}pxconst height isString(props.height) ? props.height : ${props.height}pxreturn {width,height}
})const initChart () {if (unref(elRef) props.options) {echartRef echarts.init(unref(elRef) as HTMLElement)echartRef?.setOption(unref(options))/**********************初始化后再赋值******************/eChart.value echartRef}
}watch(() options.value,(options) {if (echartRef) {echartRef?.setOption(options)}},{deep: true}
)const resizeHandler debounce(() {if (echartRef) {echartRef.resize()}
}, 100)const contentResizeHandler async (e: TransitionEvent) {if (e.propertyName width) {resizeHandler()}
}onMounted(() {initChart()window.addEventListener(resize, resizeHandler)contentEl.value document.getElementsByClassName(${variables.namespace}-layout-content)[0]unref(contentEl) (unref(contentEl) as Element).addEventListener(transitionend, contentResizeHandler)
})onBeforeUnmount(() {window.removeEventListener(resize, resizeHandler)unref(contentEl) (unref(contentEl) as Element).removeEventListener(transitionend, contentResizeHandler)
})onActivated(() {if (echartRef) {echartRef.resize()}
})defineExpose({ eChart })
/scripttemplatediv refelRef :class[$attrs.class, prefixCls] :stylestyles/div
/template3.数据的准备
数据主要分为ECharts5需要的中国地图数据需要显示的自定义数据以及各个省份的中心经纬度数据。
1.地图数据。由于ECharts5地图不能直接引入需要自己下载JSON数据然后引入。地图数据下载地址为阿里云数据可视化平台下载JSON数据可根据自己的需要对南海诸岛的数据做编辑。数据下载后放入asserts目录中引入。 2.自定义显示数据。自定义显示数据就是想要在地图上显示的信息当鼠标点击某个省份后tooltip显示框显示的数据内容。本地中显示的数据为各个省份合同数以及合同金额如下图所示。 数据格式为
interface digitalScreenDataType {name: stringvalue: number
}
interface contractInfoForFirstArea {name: stringcontractInfoByFirstArea: digitalScreenDataType[]
}
数据内容举例
[{name: 北京市,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 0.9923 },{ name: 合同总数, value: 51 }]},{name: 天津市,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 170.2683 },{ name: 合同总数, value: 30790 }]}
]
3.各个省份的中心经纬度数据。此数据主要为了显示各省份的中心点利用的ECharts的配置可以让中心点具有不同的显示效果。ECharts文档传送门。
数据定义
const geoCodeMap [{ name: 北京市, delay: 63, lossPercent: 2, value: [119.337634104, 26.0911937119] },{ name: 天津市, delay: 63, lossPercent: 2, value: [117.190182, 39.125596] },{ name: 河北省, delay: 63, lossPercent: 2, value: [114.502461, 38.045474] },{ name: 山西省, delay: 63, lossPercent: 2, value: [112.549248, 37.857014] },{ name: 内蒙古自治区, delay: 63, lossPercent: 2, value: [111.670801, 40.818311] },{ name: 辽宁省, delay: 63, lossPercent: 2, value: [123.429096, 41.796767] },{ name: 吉林省, delay: 63, lossPercent: 2, value: [125.3245, 43.886841] },{ name: 黑龙江省, delay: 63, lossPercent: 2, value: [126.642464, 45.756967] },{ name: 上海市, delay: 63, lossPercent: 2, value: [121.487899486, 31.24916171] },{ name: 江苏省, delay: 63, lossPercent: 2, value: [118.767413, 32.041544] },{ name: 浙江省, delay: 63, lossPercent: 2, value: [120.153576, 30.287459] },{ name: 安徽省, delay: 63, lossPercent: 2, value: [117.283042, 31.86119] },{ name: 福建省, delay: 63, lossPercent: 2, value: [119.306239, 26.075302] },{ name: 江西省, delay: 63, lossPercent: 2, value: [115.892151, 28.676493] },{ name: 山东省, delay: 63, lossPercent: 2, value: [117.000923, 36.675807] },{ name: 河南省, delay: 63, lossPercent: 2, value: [113.665412, 34.757975] },{ name: 湖北省, delay: 63, lossPercent: 2, value: [114.298572, 30.584355] },{ name: 湖南省, delay: 63, lossPercent: 2, value: [112.982279, 28.19409] },{ name: 广东省, delay: 63, lossPercent: 2, value: [113.280637, 23.125178] },{ name: 广西壮族自治区, delay: 63, lossPercent: 2, value: [108.320004, 22.82402] },{ name: 海南省, delay: 63, lossPercent: 2, value: [110.33119, 20.031971] },{ name: 重庆市, delay: 63, lossPercent: 2, value: [106.504962, 29.533155] },{ name: 四川省, delay: 63, lossPercent: 2, value: [104.065735, 30.659462] },{ name: 贵州省, delay: 63, lossPercent: 2, value: [106.713478, 26.578343] },{ name: 云南省, delay: 63, lossPercent: 2, value: [102.712251, 25.040609] },{ name: 西藏自治区, delay: 63, lossPercent: 2, value: [91.132212, 29.660361] },{ name: 陕西省, delay: 63, lossPercent: 2, value: [108.948024, 34.263161] },{ name: 甘肃省, delay: 63, lossPercent: 2, value: [103.823557, 36.058039] },{ name: 青海省, delay: 63, lossPercent: 2, value: [96.07, 36.62] },{ name: 宁夏回族自治区, delay: 63, lossPercent: 2, value: [106.278179, 38.46637] },{ name: 新疆维吾尔自治区, delay: 63, lossPercent: 2, value: [87.617733, 43.792818] },{ name: 台湾省, delay: 63, lossPercent: 2, value: [121.509062, 25.044332] },{ name: 香港特别行政区, delay: 63, lossPercent: 2, value: [114.173355, 22.320048] },{ name: 澳门特别行政区, delay: 63, lossPercent: 2, value: [113.54909, 22.198951] }
]
配置项
{type: effectScatter,coordinateSystem: geo,symbolSize: 7,effectType: ripple,legendHoverLink: false,showEffectOn: render,rippleEffect: {period: 4,scale: 2.5,brushType: stroke},zlevel: 1,itemStyle: {color: #99FBFE,shadowBlur: 5,shadowColor: #fff},data: geoCodeMap}
4.地图展示组件
/** * LeftTop.vue * author: zgr * createTime: 2023/9/25 */templateEChart :optionsoptions refchinaMapRef /
/templatescript langts setupinterface digitalScreenDataType {name: stringvalue: number
}
interface contractInfoForFirstArea {name: stringcontractInfoByFirstArea: digitalScreenDataType[]
}import * as echarts from echarts
import chinaData from /assets/map/china.json
echarts.registerMap(china, chinaData)defineOptions({ name: ContractMap })
//计时器
const timer reactive({//地图动态显示数据mapIntervalTimer: null
})
const geoCodeMap [{ name: 北京市, delay: 63, lossPercent: 2, value: [119.337634104, 26.0911937119] },{ name: 天津市, delay: 63, lossPercent: 2, value: [117.190182, 39.125596] },{ name: 河北省, delay: 63, lossPercent: 2, value: [114.502461, 38.045474] },{ name: 山西省, delay: 63, lossPercent: 2, value: [112.549248, 37.857014] },{ name: 内蒙古自治区, delay: 63, lossPercent: 2, value: [111.670801, 40.818311] },{ name: 辽宁省, delay: 63, lossPercent: 2, value: [123.429096, 41.796767] },{ name: 吉林省, delay: 63, lossPercent: 2, value: [125.3245, 43.886841] },{ name: 黑龙江省, delay: 63, lossPercent: 2, value: [126.642464, 45.756967] },{ name: 上海市, delay: 63, lossPercent: 2, value: [121.487899486, 31.24916171] },{ name: 江苏省, delay: 63, lossPercent: 2, value: [118.767413, 32.041544] },{ name: 浙江省, delay: 63, lossPercent: 2, value: [120.153576, 30.287459] },{ name: 安徽省, delay: 63, lossPercent: 2, value: [117.283042, 31.86119] },{ name: 福建省, delay: 63, lossPercent: 2, value: [119.306239, 26.075302] },{ name: 江西省, delay: 63, lossPercent: 2, value: [115.892151, 28.676493] },{ name: 山东省, delay: 63, lossPercent: 2, value: [117.000923, 36.675807] },{ name: 河南省, delay: 63, lossPercent: 2, value: [113.665412, 34.757975] },{ name: 湖北省, delay: 63, lossPercent: 2, value: [114.298572, 30.584355] },{ name: 湖南省, delay: 63, lossPercent: 2, value: [112.982279, 28.19409] },{ name: 广东省, delay: 63, lossPercent: 2, value: [113.280637, 23.125178] },{ name: 广西壮族自治区, delay: 63, lossPercent: 2, value: [108.320004, 22.82402] },{ name: 海南省, delay: 63, lossPercent: 2, value: [110.33119, 20.031971] },{ name: 重庆市, delay: 63, lossPercent: 2, value: [106.504962, 29.533155] },{ name: 四川省, delay: 63, lossPercent: 2, value: [104.065735, 30.659462] },{ name: 贵州省, delay: 63, lossPercent: 2, value: [106.713478, 26.578343] },{ name: 云南省, delay: 63, lossPercent: 2, value: [102.712251, 25.040609] },{ name: 西藏自治区, delay: 63, lossPercent: 2, value: [91.132212, 29.660361] },{ name: 陕西省, delay: 63, lossPercent: 2, value: [108.948024, 34.263161] },{ name: 甘肃省, delay: 63, lossPercent: 2, value: [103.823557, 36.058039] },{ name: 青海省, delay: 63, lossPercent: 2, value: [96.07, 36.62] },{ name: 宁夏回族自治区, delay: 63, lossPercent: 2, value: [106.278179, 38.46637] },{ name: 新疆维吾尔自治区, delay: 63, lossPercent: 2, value: [87.617733, 43.792818] },{ name: 台湾省, delay: 63, lossPercent: 2, value: [121.509062, 25.044332] },{ name: 香港特别行政区, delay: 63, lossPercent: 2, value: [114.173355, 22.320048] },{ name: 澳门特别行政区, delay: 63, lossPercent: 2, value: [113.54909, 22.198951] }
]
let preSelectMapIndex 0
const dataList refcontractInfoForFirstArea[]([])
const options reactiveecharts.EChartsOption({showLegendSymbol: false,tooltip: {trigger: item,//是否显示提示框组件show: true,backgroundColor: rgba(0,0,55,0.4),textStyle: {color: white,fontSize: 14,lineHeight: 20},// 如果需要自定义 tooltip样式需要使用formatterformatter: function (params) {let toolTipHtml let data dataList.valuefor (let i 0; i data.length; i) {if (params.name data[i].name) {toolTipHtml data[i].name :brfor (let j 0; j data[i].contractInfoByFirstArea.length; j) {toolTipHtml data[i].contractInfoByFirstArea[j].name : data[i].contractInfoByFirstArea[j].value br}}}return toolTipHtml}},visualMap: {min: 0,max: 800,show: false,seriesIndex: 0,// 颜色inRange: {color: [rgba(41,166,206, .5), rgba(69,117,245, .9)]}},// 底部背景geo: {show: true,aspectScale: 0.85, //长宽比zoom: 1.6,top: 30%,left: 25%,map: china,roam: false,itemStyle: {areaColor: rgba(0,0,0,0),shadowColor: rgba(138,181,218,0.8),borderColor: #232652,borderWidth: 2},emphasis: {itemStyle: {areaColor: #00aeef,shadowColor: rgba(138,181,218,0.8)}}},series: [{name: ,type: map,aspectScale: 0.85, //长宽比zoom: 1.6,map: china, // 自定义扩展图表类型top: 30%,left: 25%,itemStyle: {color: red,areaColor: rgba(19,54,162, .5),borderColor: rgba(0,242,252,.3),borderWidth: 1,shadowBlur: 7,shadowColor: #00f2fc},emphasis: {itemStyle: {areaColor: #4f7fff,borderColor: rgba(0,242,252,.6),borderWidth: 2,shadowBlur: 10,shadowColor: #00f2fc}},label: {formatter: (params) ${params.name},show: true,position: insideRight,fontSize: 12,color: #efefef},data: [] as contractInfoForFirstArea[]},{type: effectScatter,coordinateSystem: geo,symbolSize: 7,effectType: ripple,legendHoverLink: false,showEffectOn: render,rippleEffect: {period: 4,scale: 2.5,brushType: stroke},zlevel: 1,itemStyle: {color: #99FBFE,shadowBlur: 5,shadowColor: #fff},data: geoCodeMap}]
})
const getData async () {let resData: contractInfoForFirstArea[] [{name: 北京市,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 0.9923 },{ name: 合同总数, value: 51 }]},{name: 天津市,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 170.2683 },{ name: 合同总数, value: 30790 }]},{name: 上海市,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 0.2098 },{ name: 合同总数, value: 5 }]},{name: 重庆市,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 4.5777 },{ name: 合同总数, value: 144 }]},{name: 新疆维吾尔自治区,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 2.5839 },{ name: 合同总数, value: 78 }]},{name: 西藏自治区,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 0.2476 },{ name: 合同总数, value: 14 }]},{name: 宁夏回族自治区,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 1.3043 },{ name: 合同总数, value: 353 }]},{name: 内蒙古自治区,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 4.4069 },{ name: 合同总数, value: 256 }]},{name: 广西壮族自治区,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 0.9392 },{ name: 合同总数, value: 47 }]},{name: 黑龙江省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 1.5711 },{ name: 合同总数, value: 53 }]},{name: 吉林省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 5.3852 },{ name: 合同总数, value: 157 }]},{name: 辽宁省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 5.1029 },{ name: 合同总数, value: 193 }]},{name: 河北省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 17.9545 },{ name: 合同总数, value: 1101 }]},{name: 山东省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 9.7 },{ name: 合同总数, value: 568 }]},{name: 江苏省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 6.6828 },{ name: 合同总数, value: 239 }]},{name: 安徽省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 7.2328 },{ name: 合同总数, value: 260 }]},{name: 浙江省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 7.7085 },{ name: 合同总数, value: 309 }]},{name: 福建省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 3.15 },{ name: 合同总数, value: 241 }]},{name: 广东省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 28.461 },{ name: 合同总数, value: 1102 }]},{name: 海南省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 8.5549 },{ name: 合同总数, value: 423 }]},{name: 云南省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 5.5561 },{ name: 合同总数, value: 422 }]},{name: 贵州省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 2.8905 },{ name: 合同总数, value: 82 }]},{name: 四川省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 10.9661 },{ name: 合同总数, value: 409 }]},{name: 湖南省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 3.0104 },{ name: 合同总数, value: 144 }]},{name: 湖北省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 3.7586 },{ name: 合同总数, value: 157 }]},{name: 河南省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 8.2312 },{ name: 合同总数, value: 230 }]},{name: 山西省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 6.1501 },{ name: 合同总数, value: 322 }]},{name: 陕西省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 3.265 },{ name: 合同总数, value: 133 }]},{name: 甘肃省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 1.4853 },{ name: 合同总数, value: 58 }]},{name: 青海省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 1.2578 },{ name: 合同总数, value: 30 }]},{name: 江西省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 2.8155 },{ name: 合同总数, value: 67 }]},{name: 台湾省,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 0.0032 },{ name: 合同总数, value: 2 }]},{name: 香港特别行政区,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 0 },{ name: 合同总数, value: 0 }]},{name: 澳门特别行政区,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 0 },{ name: 合同总数, value: 0 }]},{name: 南海诸岛,contractInfoByFirstArea: [{ name: 合同总额(亿), value: 0 },{ name: 合同总数, value: 0 }]}]dataList.value resDataoptions.series[0].data resData
}// 重新随机选中地图区域
const reSelectMapRandomArea () {const length 34nextTick(() {try {const map chinaMapRef.value.eChartlet index Math.floor(Math.random() * length)while (index preSelectMapIndex || index length) {index Math.floor(Math.random() * length)}map.dispatchAction({type: unselect,seriesIndex: 0,dataIndex: preSelectMapIndex})map.dispatchAction({type: showTip,seriesIndex: 0,dataIndex: index})map.dispatchAction({type: select,seriesIndex: 0,dataIndex: index})preSelectMapIndex index} catch (error) {console.log(2345 error)}})
}
const chinaMapRef ref()
const handleMapRandomSelect () {nextTick(() {try {const map chinaMapRef.value.eChartsetTimeout(() {reSelectMapRandomArea()}, 0)// 移入区域清除定时器、取消之前选中并选中当前map.on(mouseover, function (params) {clearInterval(timer.mapIntervalTimer)map.dispatchAction({type: unselect,seriesIndex: 0,dataIndex: preSelectMapIndex})map.dispatchAction({type: select,seriesIndex: 0,dataIndex: params.dataIndex})preSelectMapIndex params.dataIndex})// 移出区域重新随机选中地图区域并开启定时器map.on(globalout, function () {reSelectMapRandomArea()startInterval()})startInterval()} catch (error) {console.log(134 error)}})
}
// 开启定时器
const startInterval () {// 应通过接口获取配置时间暂时写死5sconst time 2000if (timer.mapIntervalTimer ! null) {clearInterval(timer.mapIntervalTimer)}timer.mapIntervalTimer setInterval(() {reSelectMapRandomArea()}, time)
}//去除定时器
const clearData () {if (timer.mapIntervalTimer) {clearInterval(timer.mapIntervalTimer)timer.mapIntervalTimer null}
}onMounted(() {getData()handleMapRandomSelect()
})onUnmounted(() {clearData()
})
/scriptstyle scoped/style几个需要说明的地方
1.option配置中的显示数据。本例中数据直接写死赋值在实际使用中我们可能是从后端异步拉取数据然后再显示这就会有一个问题组件加载完毕数据却还没有获取完毕。本人在实际项目的办法是初始化一个定时器1秒钟获取一次数据如果加载到数据就销毁定时器继续赋值给option中的数据。
const getData async () {let resData: contractInfoForFirstArea[] digitalScreenStore.getContractInfoForFirstAreaif (resData.length 0 timer.initDataTimer ! null) {// 清除多次执行定时器clearInterval(Number(timer.initDataTimer))timer.initDataTimer null}dataList.value resDataoptions.series[0].data resData
}const getInitDataTimer () {timer.initDataTimer setInterval(getData, 1000)
}onMounted(() {getInitDataTimer()getData()
})
2.tooltip中的formatter函数。如果简单的字符串满足不了显示数据的要求可以自定义函数返回一段自定义HTML显示对应数据。
3.自动随机选择省份区域并显示tooltip数据。主要为三个函数handleMapRandomSelectreSelectMapRandomAreastartInterval最初引用链接为koi-screen Vue2版ECharts5的配置也有一些变化所以改进为现在的Vue3ECharts5版。
5.总结
本篇文章简单介绍了ECharts组件的封装以及地图组件的封装大概描述了实际项目中遇到的问题以及自己的一些解决办法行文比较简单概括所给代码并不能达到文章开始图片效果对于一些问题可能还不是能很好的理解欢迎批评指正一起探讨交流进步。
