tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改newData的bug

Browse Source
This commit is contained in:
奔跑的面条
2022-03-30 16:36:14 +08:00
parent febd5aeecb
commit f9a0c962ee
1 changed files with 80 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/echart/bottom/bottomRightChart/chart.vue
+79 -79
View File
@@ -12,28 +12,13 @@
<script> <script>
import Echart from '@/common/echart' import Echart from '@/common/echart'
export default { export default {
data () { data() {
return { return {
options: {}, options: {},
// 定义颜色 // 定义颜色
colorList: { colorList: {
title: {
text: "",
textStyle: {
color: "#D3D6DD",
fontSize: 24,
fontWeight: "normal"
},
subtext: newData.year + "/" + newData.weekCategory[6],
subtextStyle: {
color: "#fff",
fontSize: 16
},
top: 50,
left: 80
},
linearYtoG: { linearYtoG: {
type: "linear", type: 'linear',
x: 0, x: 0,
y: 0, y: 0,
x2: 1, x2: 1,
@@ -41,16 +26,16 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#f5b44d" color: '#f5b44d'
}, },
{ {
offset: 1, offset: 1,
color: "#28f8de" color: '#28f8de'
} }
] ]
}, },
linearGtoB: { linearGtoB: {
type: "linear", type: 'linear',
x: 0, x: 0,
y: 0, y: 0,
x2: 1, x2: 1,
@@ -58,16 +43,16 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#43dfa2" color: '#43dfa2'
}, },
{ {
offset: 1, offset: 1,
color: "#28f8de" color: '#28f8de'
} }
] ]
}, },
linearBtoG: { linearBtoG: {
type: "linear", type: 'linear',
x: 0, x: 0,
y: 0, y: 0,
x2: 1, x2: 1,
@@ -75,16 +60,16 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#1c98e8" color: '#1c98e8'
}, },
{ {
offset: 1, offset: 1,
color: "#28f8de" color: '#28f8de'
} }
] ]
}, },
areaBtoG: { areaBtoG: {
type: "linear", type: 'linear',
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@@ -92,51 +77,66 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "rgba(35,184,210,.2)" color: 'rgba(35,184,210,.2)'
}, },
{ {
offset: 1, offset: 1,
color: "rgba(35,184,210,0)" color: 'rgba(35,184,210,0)'
} }
] ]
} }
} }
}; }
}, },
components: { components: {
Echart, Echart
}, },
props: { props: {
cdata: { cdata: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
}, }
}, },
watch: { watch: {
cdata: { cdata: {
handler (newData) { handler(newData) {
this.options = { this.options = {
title: {
text: '',
textStyle: {
color: '#D3D6DD',
fontSize: 24,
fontWeight: 'normal'
},
subtext: newData.year + '/' + newData.weekCategory[6],
subtextStyle: {
color: '#fff',
fontSize: 16
},
top: 50,
left: 80
},
legend: { legend: {
top: 120, top: 120,
left: 80, left: 80,
orient: "vertical", orient: 'vertical',
itemGap: 15, itemGap: 15,
itemWidth: 12, itemWidth: 12,
itemHeight: 12, itemHeight: 12,
data: ["平均指标", "我的指标"], data: ['平均指标', '我的指标'],
textStyle: { textStyle: {
color: "#fff", color: '#fff',
fontSize: 14 fontSize: 14
} }
}, },
tooltip: { tooltip: {
trigger: "item" trigger: 'item'
}, },
radar: { radar: {
center: ["68%", "27%"], center: ['68%', '27%'],
radius: "40%", radius: '40%',
name: { name: {
color: "#fff" color: '#fff'
}, },
splitNumber: 8, splitNumber: 8,
axisLine: { axisLine: {
@@ -153,29 +153,29 @@ export default {
}, },
splitArea: { splitArea: {
areaStyle: { areaStyle: {
color: "#fff", color: '#fff',
opacity: 0.1, opacity: 0.1,
shadowBlur: 25, shadowBlur: 25,
shadowColor: "#000", shadowColor: '#000',
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 5 shadowOffsetY: 5
} }
}, },
indicator: [ indicator: [
{ {
name: "服务态度", name: '服务态度',
max: newData.maxData max: newData.maxData
}, },
{ {
name: "产品质量", name: '产品质量',
max: 10 max: 10
}, },
{ {
name: "任务效率", name: '任务效率',
max: 12 max: 12
}, },
{ {
name: "售后保障", name: '售后保障',
max: 3.5 max: 3.5
} }
] ]
@@ -184,25 +184,25 @@ export default {
left: 90, left: 90,
right: 80, right: 80,
bottom: 40, bottom: 40,
top: "60%" top: '60%'
}, },
xAxis: { xAxis: {
type: "category", type: 'category',
position: "bottom", position: 'bottom',
axisLine: true, axisLine: true,
axisLabel: { axisLabel: {
color: "rgba(255,255,255,.8)", color: 'rgba(255,255,255,.8)',
fontSize: 12 fontSize: 12
}, },
data: newData.weekCategory data: newData.weekCategory
}, },
// 下方Y轴 // 下方Y轴
yAxis: { yAxis: {
name: "工单", name: '工单',
nameLocation: "end", nameLocation: 'end',
nameGap: 24, nameGap: 24,
nameTextStyle: { nameTextStyle: {
color: "rgba(255,255,255,.5)", color: 'rgba(255,255,255,.5)',
fontSize: 14 fontSize: 14
}, },
max: newData.maxData, max: newData.maxData,
@@ -216,27 +216,27 @@ export default {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#fff", color: '#fff',
opacity: 0.1 opacity: 0.1
} }
}, },
axisLabel: { axisLabel: {
color: "rgba(255,255,255,.8)", color: 'rgba(255,255,255,.8)',
fontSize: 12 fontSize: 12
} }
}, },
series: [ series: [
{ {
name: "", name: '',
type: "radar", type: 'radar',
symbolSize: 0, symbolSize: 0,
data: [ data: [
{ {
value: newData.radarDataAvg[6], value: newData.radarDataAvg[6],
name: "平均指标", name: '平均指标',
itemStyle: { itemStyle: {
normal: { normal: {
color: "#f8d351" color: '#f8d351'
} }
}, },
lineStyle: { lineStyle: {
@@ -246,9 +246,9 @@ export default {
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: "#f8d351", color: '#f8d351',
shadowBlur: 25, shadowBlur: 25,
shadowColor: "rgba(248,211,81,.3)", shadowColor: 'rgba(248,211,81,.3)',
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: -10, shadowOffsetY: -10,
opacity: 1 opacity: 1
@@ -257,10 +257,10 @@ export default {
}, },
{ {
value: newData.radarData[6], value: newData.radarData[6],
name: "我的指标", name: '我的指标',
itemStyle: { itemStyle: {
normal: { normal: {
color: "#43dfa2" color: '#43dfa2'
} }
}, },
lineStyle: { lineStyle: {
@@ -272,7 +272,7 @@ export default {
normal: { normal: {
color: this.colorList.linearGtoB, color: this.colorList.linearGtoB,
shadowBlur: 15, shadowBlur: 15,
shadowColor: "rgba(0,0,0,.2)", shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 5, shadowOffsetY: 5,
opacity: 0.8 opacity: 0.8
@@ -282,14 +282,14 @@ export default {
] ]
}, },
{ {
name: "", name: '',
type: "line", type: 'line',
smooth: true, smooth: true,
symbol: "emptyCircle", symbol: 'emptyCircle',
symbolSize: 8, symbolSize: 8,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#fff" color: '#fff'
} }
}, },
lineStyle: { lineStyle: {
@@ -309,41 +309,41 @@ export default {
silent: true, silent: true,
data: [ data: [
{ {
type: "average", type: 'average',
name: "平均值" name: '平均值'
} }
], ],
precision: 0, precision: 0,
label: { label: {
normal: { normal: {
formatter: "平均值: \n {c}" formatter: '平均值: \n {c}'
} }
}, },
lineStyle: { lineStyle: {
normal: { normal: {
color: "rgba(248,211,81,.7)" color: 'rgba(248,211,81,.7)'
} }
} }
}, },
tooltip: { tooltip: {
position: "top", position: 'top',
formatter: "{c} m", formatter: '{c} m',
backgroundColor: "rgba(28,152,232,.2)", backgroundColor: 'rgba(28,152,232,.2)',
padding: 6 padding: 6
} }
}, },
{ {
name: "占位背景", name: '占位背景',
type: "bar", type: 'bar',
itemStyle: { itemStyle: {
normal: { normal: {
show: true, show: true,
color: "#000", color: '#000',
opacity: 0 opacity: 0
} }
}, },
silent: true, silent: true,
barWidth: "50%", barWidth: '50%',
data: newData.weekMaxData, data: newData.weekMaxData,
animation: false animation: false
} }
@@ -354,5 +354,5 @@ export default {
deep: true deep: true
} }
} }
}; }
</script> </script>