298 lines
7.3 KiB
Vue
298 lines
7.3 KiB
Vue
<script setup lang="ts">
|
||
const props = defineProps<{
|
||
data: {
|
||
value: number
|
||
name: string
|
||
}[]
|
||
}>()
|
||
|
||
const colorMode = useColorMode()
|
||
const option = shallowRef({
|
||
visualMap: [
|
||
{
|
||
type: 'continuous',
|
||
seriesIndex: 0,
|
||
text: ['bar3D'],
|
||
calculable: true,
|
||
show: false,
|
||
max: 300,
|
||
inRange: {
|
||
color: ['#9ff32b', '#9ff32b'], // 柱图配色
|
||
},
|
||
},
|
||
{
|
||
distance: 250,
|
||
show: false,
|
||
type: 'continuous',
|
||
seriesIndex: 1,
|
||
text: ['scatter3D'],
|
||
left: 'right',
|
||
max: 100,
|
||
calculable: true,
|
||
inRange: {
|
||
color: ['#000', 'blue', 'purple'], // 气泡配色
|
||
},
|
||
},
|
||
],
|
||
geo3D: {
|
||
// zlevel: -10,
|
||
// top: -100,
|
||
type: 'map3D',
|
||
map: 'china',
|
||
name: 'china',
|
||
// zlevel: -10,
|
||
boxWidth: 190,
|
||
boxHeight: 100,
|
||
boxDepth: 150, // 地图倾斜度
|
||
regionHeight: 5, // 地图厚度
|
||
regions: [
|
||
{
|
||
name: '福建',
|
||
regionHeight: 10,
|
||
emphasis: {
|
||
itemStyle: {
|
||
opacity: 0,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
// environment: new graphic.LinearGradient(
|
||
// 0,
|
||
// 0,
|
||
// 0,
|
||
// 1,
|
||
// [
|
||
// {
|
||
// offset: 0,
|
||
// color: "#0a0f1e", // 天空颜色
|
||
// },
|
||
// {
|
||
// offset: 0.5,
|
||
// color: "#0a0f1e", // 地面颜色
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: "#0f1831", // 地面颜色
|
||
// },
|
||
// ],
|
||
// false
|
||
// ),
|
||
// 标签设置
|
||
/* groundPlane:{
|
||
show:true,
|
||
color:'#aaa'
|
||
}, */
|
||
// label: {
|
||
// show: true, //是否显示市
|
||
// textStyle: {
|
||
// color: "#000", //文字颜色
|
||
// fontSize: 16, //文字大小
|
||
// fontFamily: "微软雅黑",
|
||
// // opacity: 0,
|
||
// backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
|
||
// },
|
||
// },
|
||
// 三维视觉属性
|
||
itemStyle: {
|
||
// opacity: 1, // 透明度
|
||
// color: '#4575b4',//地图颜色
|
||
// borderWidth: 1.5,//分界线宽度
|
||
// borderColor: "#459bca",//分界线颜色
|
||
// areaColor: "#051b3d",
|
||
// color: '#6554C0',
|
||
// opacity: 1,
|
||
borderWidth: 0.5,
|
||
borderColor: '#A299DA',
|
||
},
|
||
// 鼠标hover高亮
|
||
emphasis: {
|
||
label: {
|
||
distance: 200,
|
||
show: true, // 是否显示标签
|
||
textStyle: {
|
||
color: 'yellow', // 高亮文字颜色
|
||
fontSize: 32,
|
||
fontFamily: '微软雅黑',
|
||
},
|
||
formatter: (params: any) => {
|
||
// console.log(params);
|
||
return '{b} : test{c}'
|
||
},
|
||
},
|
||
// 高亮区块颜色
|
||
// itemStyle: {
|
||
// color: '#000'
|
||
// }
|
||
regionHeight: 5,
|
||
itemStyle: {
|
||
color: '#063258',
|
||
// color: '#61A4E4',
|
||
opacity: 0,
|
||
|
||
// borderColor: "#052644",
|
||
borderWidth: 2,
|
||
boxShadow: '10px 10px 10px black',
|
||
},
|
||
},
|
||
light: {
|
||
main: {
|
||
intensity: 1,
|
||
shadow: true,
|
||
shadowQuality: 'ultra',
|
||
},
|
||
},
|
||
groundplane: {
|
||
show: false,
|
||
},
|
||
// data: data,
|
||
|
||
// 用了没有效果，还没找到原因，求指点
|
||
/* regions: [
|
||
{ // 可对单个地图区域进行设置
|
||
name: '昌平区', // 所对应的地图区域的名称
|
||
//regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
|
||
itemStyle: { // 单个区域的样式设置
|
||
color: '#00FF00',
|
||
opacity: 1,
|
||
borderWidth: 0.4,
|
||
borderColor: '#5F9EA0'
|
||
},
|
||
}, {
|
||
name: '海淀区',
|
||
itemStyle: {
|
||
color: '#EEEE00',
|
||
opacity: 1,
|
||
borderWidth: 0.4,
|
||
borderColor: '#5F9EA0'
|
||
}
|
||
}
|
||
], */
|
||
/*
|
||
shading三维图形的着色效果,值：
|
||
'color'只显示颜色，不受光照等因素影响。
|
||
'lambert'通过景点的lambert着色表现光照的明暗
|
||
'realistic'真是感渲染
|
||
*/
|
||
shading: 'realistic',
|
||
// 真实感材质相关配置 shading: 'realistic'时有效
|
||
realisticMaterial: {
|
||
detailTexture: '#000', // 纹理贴图
|
||
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||
roughness: 0.8, // 材质粗糙度，0完全光滑，1完全粗糙
|
||
metalness: 0, // 0材质是非金属 ，1金属
|
||
roughnessAdjust: 0,
|
||
},
|
||
viewControl: {
|
||
// distance: 150,// 地图视角 控制初始大小
|
||
// rotateSensitivity: 1,// 旋转
|
||
// zoomSensitivity: 1,// 缩放
|
||
projection: 'perspective',
|
||
autoRotate: false,
|
||
damping: 0,
|
||
rotateSensitivity: 1, // 旋转操作的灵敏度
|
||
rotateMouseButton: 'left', // 旋转操作使用的鼠标按键
|
||
zoomSensitivity: 0, // 缩放操作的灵敏度
|
||
// panSensitivity: 2, //平移操作的灵敏度
|
||
// panMouseButton: "right", //平移操作使用的鼠标按键
|
||
|
||
distance: 230, // 默认视角距离主体的距离
|
||
minDistance: 230,
|
||
maxDistance: 230,
|
||
// orthographicSize:150,
|
||
// maxOrthographicSize:150,
|
||
// minOrthographicSize:150,
|
||
minAlpha: 30,
|
||
maxAlpha: 80,
|
||
// bata:20,
|
||
// minBeta: -25,
|
||
// maxBeta: 45,
|
||
|
||
center: [0, 0, 0],
|
||
|
||
animation: true,
|
||
animationDurationUpdate: 1000,
|
||
animationEasingUpdate: 'cubicInOut',
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '发电量',
|
||
type: 'bar3D',
|
||
coordinateSystem: 'geo3D',
|
||
barSize: 1, // 柱子粗细
|
||
shading: 'lambert',
|
||
opacity: 1,
|
||
bevelSize: 0.2,
|
||
label: {
|
||
show: false,
|
||
formatter: '{b}',
|
||
},
|
||
data: [{ name: '黑龙江', value: [125.03, 46.58, 111] }],
|
||
},
|
||
{
|
||
name: 'Top 5',
|
||
type: 'scatter3D',
|
||
coordinateSystem: 'geo3D',
|
||
symbol: 'pin',
|
||
symbolSize: 30,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 9,
|
||
},
|
||
formatter(value: any) {
|
||
return value.data.value[2]
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#D8BC58', // 标志颜色
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
name: '上海',
|
||
value: [121.4648, 31.2891, 0, 444, 44, 444],
|
||
},
|
||
],
|
||
showEffectOn: 'render',
|
||
rippleEffect: {
|
||
brushType: 'stroke',
|
||
},
|
||
hoverAnimation: true,
|
||
zlevel: 1,
|
||
},
|
||
],
|
||
/* dataRange: {
|
||
splitList: splitList
|
||
}, */
|
||
// ECharts 视觉映射「visualMap」组件 注释掉 dataRange 后可查看效果
|
||
// visualMap: {
|
||
// show: false,
|
||
// min: 0,
|
||
// max: 15,
|
||
// inRange: {
|
||
// color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
|
||
// }
|
||
// }
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<ClientOnly fallback-tag="div" fallback="Loading comments...">
|
||
<Chart
|
||
class="chart" :options="option"
|
||
/>
|
||
</ClientOnly>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.chart {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
</style>
|