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>
|