329 lines
9.0 KiB
Vue
329 lines
9.0 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
data: {
|
|
value: number
|
|
name: string
|
|
}[]
|
|
}>()
|
|
const mapName = 'china'
|
|
const colorMode = useColorMode()
|
|
const option = shallowRef({
|
|
tooltip: {
|
|
// show: false,
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
grid: {
|
|
// show: true,
|
|
right: '10%',
|
|
top: 5,
|
|
bottom: '10%',
|
|
left: '10%',
|
|
},
|
|
geo: [
|
|
{
|
|
map: mapName,
|
|
zlevel: -1,
|
|
zoom: 1.0,
|
|
silent: true,
|
|
layoutCenter: ['50%', '50%'],
|
|
layoutSize: '100%',
|
|
roam: false,
|
|
itemStyle: {
|
|
borderColor: 'rgba(192,245,249,.8)',
|
|
borderWidth: 3,
|
|
shadowColor: '#6FFDFF',
|
|
shadowOffsetY: 0,
|
|
shadowBlur: 10,
|
|
// areaColor: 'rgba(29,85,139,.6)',
|
|
},
|
|
regions: [
|
|
{
|
|
name: '南海诸岛',
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
opacity: 0, // 为 0 时不绘制该图形
|
|
},
|
|
label: {
|
|
show: false, // 隐藏文字
|
|
},
|
|
},
|
|
],
|
|
|
|
emphasis: {
|
|
// 动态展示的样式
|
|
label: {
|
|
show: false,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
label: {
|
|
// 静态的时候展示样式
|
|
show: false, // 是否显示地图省份得名称
|
|
color: '#fff',
|
|
fontSize: 12,
|
|
fontFamily: 'Arial',
|
|
},
|
|
},
|
|
{
|
|
show: true,
|
|
map: mapName,
|
|
zoom: 1.0,
|
|
layoutCenter: ['50%', '50%'],
|
|
layoutSize: '100%',
|
|
|
|
label: {
|
|
// 静态的时候展示样式
|
|
show: false, // 是否显示地图省份得名称
|
|
color: '#fff',
|
|
fontSize: 12,
|
|
fontFamily: 'Arial',
|
|
},
|
|
|
|
blur: {
|
|
label: { show: true, color: '#000' },
|
|
},
|
|
roam: false, // 是否开启鼠标滚轮缩放
|
|
itemStyle: {
|
|
label: {
|
|
show: true,
|
|
color: '#fff',
|
|
},
|
|
color: '#fff',
|
|
borderColor: '#32CBE0',
|
|
borderWidth: 1.5,
|
|
areaColor: {
|
|
type: 'linear-gradient',
|
|
x: 0,
|
|
y: 1000,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0.5,
|
|
color: '#0D59C1', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#53C9C7', // 100% 处的颜色
|
|
},
|
|
],
|
|
global: true, // 缺省为 false
|
|
},
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
color: '#fff',
|
|
},
|
|
borderWidth: 3,
|
|
borderColor: 'rgba(255, 230, 175,0.8)',
|
|
shadowColor: 'rgba(255, 230, 175,0.5)',
|
|
shadowBlur: 30,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 12,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
areaColor: linearColor('#1cfbfe', '#3348e7'),
|
|
},
|
|
},
|
|
{
|
|
type: 'map',
|
|
map: mapName,
|
|
zlevel: -2,
|
|
zoom: 1.0,
|
|
regions: [
|
|
{
|
|
name: '南海诸岛',
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
opacity: 0, // 为 0 时不绘制该图形
|
|
},
|
|
label: {
|
|
show: false, // 隐藏文字
|
|
},
|
|
},
|
|
],
|
|
layoutCenter: ['50%', '51.4%'],
|
|
layoutSize: '100%',
|
|
roam: false,
|
|
silent: true,
|
|
itemStyle: {
|
|
// borderColor: "rgba(35, 161, 184,0.5)",
|
|
// shadowColor: "#193f6bcc",
|
|
// shadowOffsetY: 5,
|
|
// shadowBlur: 1,
|
|
areaColor: '#257AB2',
|
|
},
|
|
},
|
|
{
|
|
type: 'map',
|
|
map: mapName,
|
|
zlevel: -3,
|
|
zoom: 1.0,
|
|
regions: [
|
|
{
|
|
name: '南海诸岛',
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
opacity: 0, // 为 0 时不绘制该图形
|
|
},
|
|
label: {
|
|
show: false, // 隐藏文字
|
|
},
|
|
},
|
|
],
|
|
layoutCenter: ['50%', '52.4%'],
|
|
layoutSize: '100%',
|
|
roam: false,
|
|
silent: true,
|
|
itemStyle: {
|
|
borderColor: 'rgba(7, 65, 117,0.5)',
|
|
shadowColor: 'rgba(7, 65, 117,0.8)',
|
|
shadowOffsetY: 10,
|
|
shadowBlur: 0,
|
|
areaColor: '#0A2763',
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
// {
|
|
// type: 'effectScatter',
|
|
// coordinateSystem: 'geo',
|
|
// symbolSize: 4,
|
|
// itemStyle: {
|
|
// color: '#ffffff', // 圆点的颜色
|
|
// shadowBlur: 1,
|
|
// shadowColor: '#333',
|
|
// },
|
|
// tooltip: {
|
|
// trigger: 'item',
|
|
// backgroundColor: 'transparent',
|
|
// borderColor: 'transparent',
|
|
// extraCssText: 'z-index:100;color:#fff;',
|
|
// confine: true, // 是否将 tooltip 框限制在图表的区域内
|
|
// formatter(params: any) {
|
|
// // 根据业务自己拓展要显示的内容
|
|
// return `<div style="box-shadow: 0 0 10px #00000083; padding: 10px; position: absolute; top: 0; left:0; border-radius: 4px; border: 1px solid #0479ff; background: linear-gradient(to bottom, #0739a7 0%,#174ba0ef 100%);z-index:1000">
|
|
// <div style='color:#ee9803; font-size: 18px;'><b>${
|
|
// params.data.Province
|
|
// }-${params.data.City}</b></div>
|
|
|
|
// ${
|
|
// params.data.DataCenterList.length
|
|
// ? '<div style=\'color:#eeae40; font-size: 14px;\'><b>数据中心</b></div>'
|
|
// : ''
|
|
// }
|
|
|
|
// ${params.data.DataCenterList.map((i: any) => {
|
|
// return `
|
|
// <div style="display: flex; align-items: center;padding-top: 6px;">
|
|
// <div style="height: 6px; width: 6px; border-radius: 50%; background:#F4BD59; margin-right: 10px;"></div> <span style='color:#fff;font-size: 13px;margin-right: 20px;'>${i.DataCenterName}</span>
|
|
// </div>
|
|
// `
|
|
// }).join('')}
|
|
|
|
// ${
|
|
// params.data.CdnList.length
|
|
// ? '<div style=\'color:#eeae40; font-size: 14px;\'><b>CDN</b></div>'
|
|
// : ''
|
|
// }
|
|
|
|
// ${params.data.CdnList.map((i: any) => {
|
|
// return `
|
|
// <div style="display: flex; align-items: center;padding-top: 6px;">
|
|
// <div style="height: 6px; width: 6px; border-radius: 50%; background:#F4BD59; margin-right: 10px;"></div> <span style='color:#fff;font-size: 13px;margin-right: 20px;'>${i.CdnName}</span>
|
|
// </div>
|
|
// `
|
|
// }).join('')}
|
|
|
|
// </div>`
|
|
// },
|
|
// },
|
|
|
|
// label: {
|
|
// show: true,
|
|
// color: '#fff',
|
|
// position: [10, 10],
|
|
// textShadowColor: 'black',
|
|
// textShadowBlur: 4,
|
|
// formatter(obj: any) {
|
|
// return obj.name
|
|
// },
|
|
// },
|
|
// zlevel: 12,
|
|
// data: [...map.values()],
|
|
// },
|
|
// {
|
|
// type: 'effectScatter',
|
|
// coordinateSystem: 'geo',
|
|
// rippleEffect: {
|
|
// brushType: 'fill',
|
|
// },
|
|
// symbolSize(val: any) {
|
|
// const value = val[2]
|
|
// if (value < max)
|
|
// return 15
|
|
|
|
// return 20
|
|
// },
|
|
// showEffectOn: 'render', // 加载完毕显示特效
|
|
// itemStyle: {
|
|
// color: '#FEBE13', // 圆点的颜色
|
|
// shadowBlur: 10,
|
|
// shadowColor: '#333',
|
|
// },
|
|
// zlevel: 6,
|
|
// data: [...map.values()].filter(i => !!i.CdnList.length),
|
|
// },
|
|
// {
|
|
// type: 'custom',
|
|
// geoIndex: 0,
|
|
// coordinateSystem: 'geo',
|
|
// renderItem(params: any, api: any) {
|
|
// // console.log(params);
|
|
|
|
// // 具体实现自定义图标的方法
|
|
// return {
|
|
// type: 'image',
|
|
// style: {
|
|
// height: 50,
|
|
// image: serverSvg, // 自定义的图片地址
|
|
// x:
|
|
// api.coord([
|
|
// [...map.values()][params.dataIndex].value[0],
|
|
// [...map.values()][params.dataIndex].value[1],
|
|
// ])[0] - 16, // 数据的设置
|
|
// y:
|
|
// api.coord([
|
|
// [...map.values()][params.dataIndex].value[0],
|
|
// [...map.values()][params.dataIndex].value[1],
|
|
// ])[1] - 64,
|
|
// },
|
|
// }
|
|
// },
|
|
// zlevel: 10,
|
|
// data: [...map.values()].filter(i => !!i.DataCenterList.length),
|
|
// },
|
|
],
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ClientOnly fallback-tag="div" fallback="Loading comments...">
|
|
<Chart
|
|
class="chart" :options="option"
|
|
/>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|