vue3+echarts5 中国地图+散点地图
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
var mapData = [
{
id: 1,
name: '北京市',
value: 30,
adcode: 110000
},
{
id: 2,
name: '广东省',
value: 29,
adcode: 440000
},
{
id: 3,
name: '四川省',
value: 28,
adcode: 510000
},
{
id: 4,
name: '上海市',
value: 27,
adcode: 310000
},
{
id: 5,
name: '山东省',
value: 26,
adcode: 370000
},
{
id: 6,
name: '江苏省',
value: 25,
adcode: 320000
},
{
id: 7,
name: '浙江省',
value: 4.51,
adcode: 330000
},
{
id: 8,
name: '河南省',
value: 24,
adcode: 410000
},
{
id: 9,
name: '湖南省',
value: 23,
adcode: 430000
},
{
id: 10,
name: '陕西省',
value: 22,
adcode: 610000
},
{
id: 11,
name: '河北省',
value: 21,
adcode: 130000
},
{
id: 12,
name: '山西省',
value: 20,
adcode: 140000
},
{
id: 13,
name: '湖北省',
value: 19,
adcode: 420000
},
{
id: 14,
name: '安徽省',
value: 18,
adcode: 340000
},
{
id: 15,
name: '福建省',
value: 17,
adcode: 350000
},
{
id: 16,
name: '重庆市',
value: 16,
adcode: 500000
},
{
id: 17,
name: '天津市',
value: 15,
adcode: 120000
},
{
id: 18,
name: '江西省',
value: 14,
adcode: 360000
},
{
id: 19,
name: '广西壮族自治区',
value: 13,
adcode: 450000
},
{
id: 20,
name: '辽宁省',
value: 12,
adcode: 210000
},
{
id: 21,
name: '内蒙古自治区',
value: 11,
adcode: 150000
},
{
id: 22,
name: '吉林省',
value: 10,
adcode: 220000
},
{
id: 23,
name: '贵州省',
value: 9,
adcode: 520000
},
{
id: 24,
name: '黑龙江省',
value: 8,
adcode: 230000
},
{
id: 25,
name: '甘肃省',
value: 6,
adcode: 620000
},
{
id: 26,
name: '云南省',
value: 7,
adcode: 530000
},
{
id: 27,
name: '新疆维吾尔自治区',
value: 5,
adcode: 650000
},
{
id: 28,
name: '海南省',
value: 5,
adcode: 460000
},
{
id: 29,
name: '宁夏回族自治区',
value: 4,
adcode: 640000
},
{
id: 30,
name: '香港特别行政区',
value: 4,
adcode: 810000
},
{
id: 31,
name: '青海省',
value: 3,
adcode: 630000
},
{
id: 32,
name: '台湾省',
value: 3,
adcode: 710000
},
{
id: 33,
name: '澳门特别行政区',
value: 2,
adcode: 820000
},
{
id: 34,
name: '西藏自治区',
value: 1,
adcode: 540000
}
]
const option = {
tooltip: {
show: true,
triggerOn: 'none',
backgroundColor: 'rgba(0, 228, 255, 0.5)', //提示标签背景颜色
borderColor: 'rgb(0 0 0 / 0%)',
textStyle: {
color: '#fff',
fontSize: 16,
width: 80,
height: 40,
overflow: 'break'
},
confine: true,
formatter: `<span style='border-radius:20px!important'>{b}:{c}</span>`
},
geo: {
show: true,
//设置中心点
center: [105, 36],
map: 'china',
roam: true, //是否允许缩放，拖拽
zoom: 1, //初始化大小
//缩放大小限制
scaleLimit: {
min: 1.2, //最小
max: 12 //最大
},
label: {
normal: {
show: true,
fontSize: '14',
color: 'rgba(226, 246, 255, 0.8)'
},
emphasis: {
show: true
}
},
//各个省份模块样式设置
itemStyle: {
areaColor: 'rgb(10,28,112)', //背景色
color: 'rgba(226, 246, 255, 0.8)', //字体颜色
borderColor: '#5e84fd',
borderWidth: 1
},
//高亮状态
emphasis: {
itemStyle: {
areaColor: '#0582bb',
color: 'rgba(226, 246, 255, 0.8)'
},
label: {
show: true,
color: '#fff'
}
},
// 显示层级
z: 10
// silent: true
},
// dataset: { ...dataJson },
series: [
{
type: 'map',
mapType: 'china',
geoIndex: 0,
data: mapData,
hoverAnimation: false,
label: {
formatter: `<span >{b}:{c}</span>`
}
// silent: true
}
]
}
以下代码是组件封的
<template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
</template>
<script setup lang="ts">
import { computed, PropType, ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { MapChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import chinaMap from './china.json'
const props = defineProps({
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartConfig: {
type: Object as PropType<config>,
required: true
}
})
use([DatasetComponent, CanvasRenderer, MapChart, GridComponent, TooltipComponent, LegendComponent])
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
if (vChartRef.value) {
let nowOption = vChartRef.value.getOption()
vChartRef.value.setOption({
...nowOption,
series: [
{
...nowOption.series[0],
data: newData
}
]
})
let dataJson = newData
let selectData: any = []
dataJson.forEach((item: any) => {
if (item.value > 0) {
selectData.push(item)
}
})
//高亮当前的城市
vChartRef.value.dispatchAction({
type: 'highlight',
seriesIndex: 0,
name: selectData[0].name
})
vChartRef.value.dispatchAction({
type: 'showTip',
seriesIndex: 0,
name: selectData[0].name
})
}
})
</script>
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 全国json数据
地图散点
<template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
</template>
<script setup lang="ts">
import { computed, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { MapChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
// import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { mapData } from './config'
import chinaMap from './china.json'
const props = defineProps({
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartConfig: {
type: Object as PropType<config>,
required: true
}
})
use([DatasetComponent, CanvasRenderer, MapChart, GridComponent, TooltipComponent, LegendComponent])
var convertData = function (mapData: any) {
let geoCoordMap: any = {}
// 获取地区详细信息
let mapFeatures = chinaMap.features
// 遍历获取每个地区的经纬度
mapFeatures.forEach(function (v, i) {
// 获取当前地区名
let name = v.properties.name
if (name) {
// 获取当前地区的经纬度
geoCoordMap[name] = v.properties.center
}
})
var res = []
for (var i = 0; i < mapData.length; i++) {
var geoCoord = geoCoordMap[mapData[i].name]
if (geoCoord) {
res.push({
name: mapData[i].name,
value: geoCoord.concat(mapData[i].value, mapData[i].ratio),
ratio: mapData[i].ratio
})
}
}
return res
}
const option = {
tooltip: {
triggerOn: 'item',
formatter: function (params: any) {
if (isNaN(params.value)) {
params.value = 0
}
if (params.seriesName === '散点') {
params.value = params.data.value[2]
}
var html = '<span>' + params.name + '：</span><br/>'
html += '<span>值：' + params.value + '</span><br/>'
return html
},
color: '#fff'
},
geo: {
show: true,
//设置中心点
center: [105, 36],
map: 'china',
roam: true, //是否允许缩放，拖拽
zoom: 1, //初始化大小
//缩放大小限制
scaleLimit: {
min: 1.2, //最小
max: 12 //最大
},
label: {
normal: {
show: true,
fontSize: '14',
color: 'rgba(226, 246, 255, 0.8)'
},
emphasis: {
show: true, // 显示地区名称
color: 'rgba(226, 246, 255, 0.8)'
}
},
//各个省份模块样式设置
itemStyle: {
areaColor: 'rgb(10,28,112)', //背景色
color: 'rgba(226, 246, 255, 0.8)', //字体颜色
borderColor: '#5e84fd',
borderWidth: 1
},
//高亮状态
emphasis: {
itemStyle: {
areaColor: 'rgb(10,28,112)',
color: 'rgba(226, 246, 255, 0.8)'
},
label: {
show: true
}
},
// 显示层级
z: 10
},
//进行气泡标点
series: [
{
type: 'map',
map: mapData,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: true,
data: mapData
},
{
name: '', // 自定义名称
type: 'effectScatter', // scatter effectScatter
coordinateSystem: 'geo', // 设置坐标系类型
data: convertData(mapData), // 设置散点位置和数据
symbolSize: function (val: any) {
// 设置散点大小
return val[3] * 10
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true, // 是否显示鼠标悬浮动画
label: {
// 静态显示时的样式
normal: {
show: true, // 显示地区名称
fontSize: '16',
formatter: function (data: any) {
// 显示模板
return data.name + ':' + data.value[2]
},
position: 'right' // 显示位置
}
},
itemStyle: {
normal: {
color: function (res: any) {
let value = res.value[2]
//根据value值对标点进行不同颜色显示 /crm-api/view/toker/entCount
return '#4ed7fa'
},
shadowBlur: 5
}
},
zlevel: 3
}
]
}
//这里是组件封装过后 接口调用返回的数据 newData
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
if (vChartRef.value) {
let nowOption = vChartRef.value.getOption()
vChartRef.value.setOption({
...option,
//进行气泡标点
series: [
{
data: newData
},
{
name: '', // 自定义名称
type: 'effectScatter', // scatter effectScatter
coordinateSystem: 'geo', // 设置坐标系类型
data: convertData(newData), // 设置散点位置和数据
symbolSize: function (val: any) {
let nowValue = val[3] * 2
if (nowValue < 6) {
nowValue = 6
} else if (nowValue > 16) {
nowValue = 16
}
// 设置散点大小
return nowValue
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true, // 是否显示鼠标悬浮动画
label: {
// 静态显示时的样式
normal: {
show: true, // 显示地区名称
fontSize: '16',
formatter: function (data: any) {
// 显示模板
return data.value[2] > '0' ? data.name + ':' + data.value[2] : ''
},
position: 'right', // 显示位置
color: '#fff'
}
},
itemStyle: {
normal: {
color: function (res: any) {
let value = res.value[2]
//根据value值对标点进行不同颜色显示 /crm-api/view/toker/entCount
return '#4ed7fa'
},
shadowBlur: 1
}
}
}
]
})
}
})
</script>
GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：4 个月前 )
9e887079
[skip ci] 2 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)