You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
354 lines
8.3 KiB
354 lines
8.3 KiB
<template>
|
|
<div>
|
|
<Echart
|
|
:options="options"
|
|
id="centreLeft1Chart"
|
|
height="400px"
|
|
width="100%"
|
|
></Echart>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Echart from './echart'
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: {},
|
|
// 定义颜色
|
|
colorList: {
|
|
linearYtoG: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#f5b44d'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#28f8de'
|
|
}
|
|
]
|
|
},
|
|
linearGtoB: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#43dfa2'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#28f8de'
|
|
}
|
|
]
|
|
},
|
|
linearBtoG: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#1c98e8'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#28f8de'
|
|
}
|
|
]
|
|
},
|
|
areaBtoG: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(35,184,210,.2)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(35,184,210,0)'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
Echart
|
|
},
|
|
props: {
|
|
cdata: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
watch: {
|
|
cdata: {
|
|
handler(newData) {
|
|
this.options = {
|
|
title: {
|
|
text: '',
|
|
textStyle: {
|
|
color: '#D3D6DD',
|
|
fontSize: 24,
|
|
fontWeight: 'normal'
|
|
},
|
|
subtext: newData.asset?.name,
|
|
subtextStyle: {
|
|
color: '#fff',
|
|
fontSize: 15
|
|
},
|
|
top: 14,
|
|
left: 12
|
|
},
|
|
legend: {
|
|
top: 128,
|
|
left: 12,
|
|
orient: 'vertical',
|
|
itemGap: 15,
|
|
itemWidth: 12,
|
|
itemHeight: 12,
|
|
data: ['平均指标','我的指标'],
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
radar: {
|
|
center: ['58%', '24%'],
|
|
radius: '40%',
|
|
name: {
|
|
color: '#fff'
|
|
},
|
|
splitNumber: 8,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: this.colorList.linearYtoG,
|
|
opacity: 0.6
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: this.colorList.linearYtoG,
|
|
opacity: 0.6
|
|
}
|
|
},
|
|
splitArea: {
|
|
areaStyle: {
|
|
color: '#fff',
|
|
opacity: 0.1,
|
|
shadowBlur: 25,
|
|
shadowColor: '#000',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 5
|
|
}
|
|
},
|
|
indicator: [
|
|
{
|
|
name: '教育'
|
|
},
|
|
{
|
|
name: '交通'
|
|
},
|
|
{
|
|
name: '商圈'
|
|
},
|
|
{
|
|
name: '舒适度'
|
|
}
|
|
]
|
|
},
|
|
grid: {
|
|
left: 70,
|
|
right: 60,
|
|
bottom: 40,
|
|
top: '62%'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
position: 'bottom',
|
|
axisLine: true,
|
|
axisLabel: {
|
|
color: 'rgba(255,255,255,.8)',
|
|
fontSize: 12
|
|
},
|
|
data: newData.lease.map(item => item?.zulinkaishiqixian??'')
|
|
},
|
|
// 下方Y轴
|
|
yAxis: {
|
|
name: '租赁面积',
|
|
nameLocation: 'end',
|
|
nameGap: 24,
|
|
nameTextStyle: {
|
|
color: 'rgba(255,255,255)',
|
|
fontSize: 14
|
|
},
|
|
splitNumber: 4,
|
|
|
|
axisLine: {
|
|
lineStyle: {
|
|
opacity: 0
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
opacity: 0.1
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: 'rgba(255,255,255,.8)',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'radar',
|
|
symbolSize: 0,
|
|
data: [
|
|
{
|
|
value: newData.radarDataAvg,
|
|
name: '平均指标',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#f8d351'
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
opacity: 0
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: '#f8d351',
|
|
shadowBlur: 25,
|
|
shadowColor: 'rgba(248,211,81,.3)',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: -10,
|
|
opacity: 1
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: newData.radarData,
|
|
name: '我的指标',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#43dfa2'
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
opacity: 0
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: this.colorList.linearGtoB,
|
|
shadowBlur: 15,
|
|
shadowColor: 'rgba(0,0,0,.2)',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 5,
|
|
opacity: 0.8
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'emptyCircle',
|
|
symbolSize: 8,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: this.colorList.linearBtoG,
|
|
width: 3
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: this.colorList.areaBtoG
|
|
}
|
|
},
|
|
data: newData.lease.map(i => i?.zulinmianji??0),
|
|
lineSmooth: true,
|
|
markLine: {
|
|
silent: true,
|
|
data: [
|
|
{
|
|
type: 'average',
|
|
name: '平均值'
|
|
}
|
|
],
|
|
precision: 0,
|
|
label: {
|
|
normal: {
|
|
formatter: '平均值: \n {c}'
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: 'rgba(248,211,81,.7)'
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
position: 'top',
|
|
formatter: '{c} 平方',
|
|
backgroundColor: 'rgba(28,152,232,.2)',
|
|
padding: 6
|
|
}
|
|
},
|
|
{
|
|
name: '占位背景',
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
show: true,
|
|
color: '#000',
|
|
opacity: 0
|
|
}
|
|
},
|
|
silent: true,
|
|
barWidth: '50%',
|
|
data: newData.lease.map(i => i?.zulinmianji??0),
|
|
animation: false
|
|
}
|
|
]
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|