修改echart
This commit is contained in:
@@ -54,12 +54,12 @@ const initChart = () => {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
// textStyle: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: '14px',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
// },
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0,
|
||||
...(props.options?.tooltip || null)
|
||||
|
||||
@@ -95,8 +95,8 @@ const loading = ref(true)
|
||||
onMounted(() => {
|
||||
if (props.dataLevel == 'Secondary') {
|
||||
form.dataLevel = 'Primary'
|
||||
}else{
|
||||
form.dataLevel=props.dataLevel
|
||||
} else {
|
||||
form.dataLevel = props.dataLevel
|
||||
}
|
||||
init()
|
||||
})
|
||||
@@ -115,6 +115,13 @@ const init = () => {
|
||||
dataLevel: form.dataLevel,
|
||||
statMethod: form.statMethod
|
||||
}).then(res => {
|
||||
console.log(
|
||||
123,
|
||||
res.data.map((item: any[]) => {
|
||||
return item[0].anotherName
|
||||
})
|
||||
)
|
||||
|
||||
if (res.data.length && res.data[0].length) {
|
||||
let arr: any[] = []
|
||||
res.data.forEach((item: any[]) => {
|
||||
@@ -131,9 +138,14 @@ const init = () => {
|
||||
},
|
||||
series: res.data.map((item: any) => {
|
||||
return {
|
||||
data: item.map((item: any) => {
|
||||
return item.statisticalData
|
||||
data: item.map((item: any, i: any) => {
|
||||
return [res.data[0][i].time, item.statisticalData]
|
||||
}),
|
||||
// data: [
|
||||
// [1584086222000, '573'],
|
||||
// [1584086342000, '57'],
|
||||
// [1584086462000, '56']
|
||||
// ],
|
||||
markPoint: {
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
@@ -152,6 +164,23 @@ const init = () => {
|
||||
}
|
||||
})
|
||||
},
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
data: res.data.map((item: any[]) => {
|
||||
return item[0].anotherName
|
||||
@@ -164,28 +193,37 @@ const init = () => {
|
||||
show: true
|
||||
},
|
||||
minInterval: 0.1,
|
||||
min: 0,
|
||||
max: parseInt(
|
||||
(
|
||||
min: parseFloat(
|
||||
arr
|
||||
.map(item => item.statisticalData)
|
||||
.sort((a, b) => {
|
||||
return a - b
|
||||
})[0] / 1.5
|
||||
).toFixed(0),
|
||||
max: parseFloat(
|
||||
arr
|
||||
.map(item => item.statisticalData)
|
||||
.sort((a, b) => {
|
||||
return b - a
|
||||
})[0] * 1.5
|
||||
).toFixed(0)
|
||||
)
|
||||
})[0] * 1.2
|
||||
).toFixed(1)
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.data[0].map((item: any) => {
|
||||
return item.time
|
||||
}),
|
||||
axisLabel: {
|
||||
formatter: function (value: string) {
|
||||
return value.split(' ').join('\n')
|
||||
}
|
||||
type: 'time'
|
||||
// data: res.data[0].map((item: any) => {
|
||||
// return item.time
|
||||
// }),
|
||||
|
||||
// axisLabel: {
|
||||
// formatter: function (value: string) {
|
||||
// return value.split(' ').join('\n')
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
if ((echartsData.value.legend = ['A相', 'B相', 'C相'])) {
|
||||
echartsData.value.color = ['#FFCC00', '#009900', '#CC0000']
|
||||
}
|
||||
} else {
|
||||
echartsData.value = null
|
||||
|
||||
@@ -255,7 +255,7 @@ const init = () => {
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
color: '#00CC99'
|
||||
color: '#FFCC00'
|
||||
// }e
|
||||
},
|
||||
data: yDataList1,
|
||||
@@ -270,7 +270,7 @@ const init = () => {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
|
||||
color: '#FF9900'
|
||||
color: '#009900'
|
||||
// }
|
||||
},
|
||||
data: yDataList2,
|
||||
@@ -284,7 +284,7 @@ const init = () => {
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0]
|
||||
// color: '#FF9900'
|
||||
// color: '#CC0000'
|
||||
// }
|
||||
},
|
||||
data: yDataList3,
|
||||
@@ -380,7 +380,7 @@ const init = () => {
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
color: '#00CC99'
|
||||
color: '#FFCC00'
|
||||
// }e
|
||||
},
|
||||
data: yDataList1
|
||||
@@ -392,7 +392,7 @@ const init = () => {
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
color: '#FF9900'
|
||||
color: '#009900'
|
||||
// }
|
||||
},
|
||||
data: yDataList2
|
||||
@@ -404,7 +404,7 @@ const init = () => {
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0]
|
||||
// color: '#FF9900'
|
||||
// color: '#CC0000'
|
||||
// }
|
||||
},
|
||||
data: yDataList3
|
||||
@@ -498,7 +498,7 @@ const init = () => {
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
color: '#00CC99'
|
||||
color: '#FFCC00'
|
||||
// }e
|
||||
},
|
||||
data: yDataList1
|
||||
@@ -511,7 +511,7 @@ const init = () => {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
|
||||
color: '#FF9900'
|
||||
color: '#009900'
|
||||
// }
|
||||
},
|
||||
data: yDataList2
|
||||
@@ -523,7 +523,7 @@ const init = () => {
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0]
|
||||
// color: '#FF9900'
|
||||
// color: '#CC0000'
|
||||
// }
|
||||
},
|
||||
data: yDataList3
|
||||
|
||||
@@ -215,21 +215,21 @@ const initRadioCharts = () => {
|
||||
value: 180,
|
||||
name: 'A相',
|
||||
itemStyle: {
|
||||
color: '#A5292A'
|
||||
color: '#FFCC00'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 90,
|
||||
name: 'B相',
|
||||
itemStyle: {
|
||||
color: '#DAA521'
|
||||
color: '#009900'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: 'C相',
|
||||
itemStyle: {
|
||||
color: '#2F8A57'
|
||||
color: '#CC0000'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user