Browse Source
# Conflicts: # .env.production # src/views/dike/runManage/supervisionInspetion/statisticAnalysis/index.vuemaster_tdsql
13 changed files with 234 additions and 83 deletions
@ -1,6 +1,9 @@ |
|||||
# 生产环境配置 |
# 生产环境配置 |
||||
ENV = 'admin' |
ENV = 'admin' |
||||
|
|
||||
|
# 服务路径 |
||||
|
VUE_APP_BASE_URL = /sgcyy-slgcyxgl |
||||
|
|
||||
# 若依管理系统/生产环境 |
# 若依管理系统/生产环境 |
||||
VUE_APP_BASE_API = '/sgcyy-slgcyxgl/thinking' |
VUE_APP_BASE_API = ${VUE_APP_BASE_URL}/thinking |
||||
VUE_APP_FAST_BASE_URL = 'http://192.168.1.20:9080/' |
VUE_APP_FAST_BASE_URL = http://192.168.1.20:9080/ |
||||
|
@ -0,0 +1,3 @@ |
|||||
|
<template> |
||||
|
<router-view /> |
||||
|
</template> |
@ -0,0 +1,154 @@ |
|||||
|
<template> |
||||
|
<div class="pie-component"> |
||||
|
<div class="title">{{ title }}</div> |
||||
|
<div ref="pieEle" class="canvas"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
myChart: null, |
||||
|
}; |
||||
|
}, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
echartsTitle: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
itemData: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initEcharts(); |
||||
|
}, |
||||
|
watch: { |
||||
|
itemData() { |
||||
|
this.initEcharts(); |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
initEcharts() { |
||||
|
const colorList = ["#28CE8E", "#165DFF", "#FFAB00", "#F86220"]; |
||||
|
let sum = 0; |
||||
|
let seriesData = this.itemData.map((item, index) => { |
||||
|
if (!isNaN(item.value)) sum += item.value; |
||||
|
return { |
||||
|
name: item.text, |
||||
|
value: item.value, |
||||
|
itemStyle: { |
||||
|
color: colorList[index], |
||||
|
}, |
||||
|
}; |
||||
|
}); |
||||
|
if (!this.myChart) { |
||||
|
this.myChart = echarts.init(this.$refs.pieEle); |
||||
|
} |
||||
|
let option = { |
||||
|
title: { |
||||
|
left: "29%", |
||||
|
top: "38%", |
||||
|
text: sum, |
||||
|
textAlign: "center", |
||||
|
textStyle: { |
||||
|
fontSize: 18, |
||||
|
fontWeight: "bold", |
||||
|
textAlign: "center", |
||||
|
color: "#333", |
||||
|
}, |
||||
|
subtext: this.echartsTitle, |
||||
|
subtextStyle: { |
||||
|
fontSize: 14, |
||||
|
textAlign: "center", |
||||
|
color: "#666", |
||||
|
}, |
||||
|
}, |
||||
|
legend: { |
||||
|
// type: "scroll", |
||||
|
orient: "vertical", |
||||
|
left: "60%", |
||||
|
top: 20, |
||||
|
bottom: 20, |
||||
|
data: seriesData, |
||||
|
formatter: function (name) { |
||||
|
return `{a|${name}}\n{b|${ |
||||
|
seriesData.find((item) => item.name === name).value |
||||
|
}}`; |
||||
|
}, |
||||
|
itemWidth: 4, |
||||
|
itemHeight: 50, |
||||
|
itemGap: 25, |
||||
|
itemStyle: { |
||||
|
borderJoin: "round", |
||||
|
}, |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
rich: { |
||||
|
a: { |
||||
|
fontSize: 12, |
||||
|
lineHeight: 20, |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 18, |
||||
|
fontWeight: "bold", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
label: {}, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "", |
||||
|
type: "pie", |
||||
|
radius: ["50%", "75%"], |
||||
|
center: ["30%", "50%"], |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: false, |
||||
|
fontSize: 16, |
||||
|
fontWeight: "bold", |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: seriesData, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
this.myChart.setOption(option); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.pie-component { |
||||
|
border: 1px solid #e5e5e5; |
||||
|
border-radius: 5px; |
||||
|
|
||||
|
.title { |
||||
|
padding: 10px; |
||||
|
border-bottom: 1px solid #e5e5e5; |
||||
|
} |
||||
|
.canvas { |
||||
|
width: 500px; |
||||
|
height: 200px; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue