xzt
1 year ago
5 changed files with 518 additions and 110 deletions
@ -1,9 +1,141 @@ |
|||||
<template> |
<template> |
||||
<div class="content"></div> |
<div class="content"> |
||||
|
<div ref="pieEle" style="width: 40%; height: 100%"></div> |
||||
|
<div ref="barEle" style="width: 60%; height: 100%"></div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
<script> |
||||
|
import { getPie, getHistogram } from "@/api/yg/jbxx"; |
||||
|
import * as echarts from "echarts"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
pieChartData: [], |
||||
|
barChartData: [], |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
async getData() { |
||||
|
const res1 = await getPie(); |
||||
|
const res2 = await getHistogram(); |
||||
|
for (let key in res1[0]) { |
||||
|
this.pieChartData.push({ value: res1[0][key], name: key }); |
||||
|
} |
||||
|
// for (let key in res1[0]) { |
||||
|
// this.barChartData.push({ value: res1[0][key], name: key }); |
||||
|
// } |
||||
|
this.barChartData = res2; |
||||
|
this.pieInit(); |
||||
|
this.barInit(); |
||||
|
console.log("pieChartData", this.pieChartData); |
||||
|
console.log("barChartData", this.barChartData); |
||||
|
}, |
||||
|
pieInit() { |
||||
|
let chartDom = this.$refs.pieEle; |
||||
|
let myChart = echarts.init(chartDom); |
||||
|
let option = { |
||||
|
title: { |
||||
|
// text: "Referer of a Website", |
||||
|
// subtext: "Fake Data", |
||||
|
left: "center", |
||||
|
}, |
||||
|
color: ["#5DB1FF", "#FBD437", "#36CBCB", "#6DD48C"], |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: "horizontal", |
||||
|
bottom: "2%", |
||||
|
icon: "circle", |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "水闸占比", |
||||
|
type: "pie", |
||||
|
radius: "50%", |
||||
|
data: this.pieChartData, |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: "rgba(0, 0, 0, 0.5)", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
option && myChart.setOption(option); |
||||
|
window.addEventListener("resize", function () { |
||||
|
myChart.resize(); |
||||
|
}); |
||||
|
}, |
||||
|
barInit() { |
||||
|
let chartDom = this.$refs.barEle; |
||||
|
let myChart = echarts.init(chartDom); |
||||
|
let option = { |
||||
|
title: { |
||||
|
// text: "World Population", |
||||
|
}, |
||||
|
color: ["#38A0FF", "#4CCA73"], |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "shadow", |
||||
|
}, |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: "horizontal", |
||||
|
bottom: "2%", |
||||
|
icon: "circle", |
||||
|
}, |
||||
|
// grid: { |
||||
|
// left: "3%", |
||||
|
// right: "4%", |
||||
|
// bottom: "10%", |
||||
|
// containLabel: true, |
||||
|
// }, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: Object.keys(this.barChartData), |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: "value", |
||||
|
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。 |
||||
|
// boundaryGap: [0, 1], |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "已登记", |
||||
|
type: "bar", |
||||
|
data: Object.values(this.barChartData)[0], |
||||
|
}, |
||||
|
{ |
||||
|
name: "未登记", |
||||
|
type: "bar", |
||||
|
data: Object.values(this.barChartData)[1], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
option && myChart.setOption(option); |
||||
|
window.addEventListener("resize", function () { |
||||
|
myChart.resize(); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.content { |
.content { |
||||
height: 300px; |
height: 300px; |
||||
border: 1px solid #000; |
// border: 1px solid #000; |
||||
|
background: #fff; |
||||
|
box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.2); |
||||
|
margin-bottom: 10px; |
||||
|
display: flex; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue