ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

图表

master_tdsql
xzt 1 year ago
parent
18875f0a3e
commit
7bbf250f25
5 changed files with 366 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      src/api/yg/fzr.js
  2. 47
      src/views/safetyManage/declarationManage/sluice/declare/components/dataCharts.vue
  3. 159
      src/views/safetyManage/declarationManage/sluice/examine/components/dataCharts.vue
  4. 6
      src/views/safetyManage/declarationManage/sluice/examine/components/listPage/index.vue
  5. 156
      src/views/safetyManage/responsiblePersonManage/sluice/dataCharts.vue

16
src/api/yg/fzr.js
View File

@ -1,5 +1,21 @@
import request from '@/utils/request'
// 饼图
export function getPie() {
return request({
url: '/yg/fzr/getPie',
method: 'get',
})
}
// 柱状图图
export function getHistogram() {
return request({
url: '/yg/fzr/getHistogram',
method: 'get',
})
}
// 查询水闸负责人列表
export function listFzr(query) {
return request({

47
src/views/safetyManage/declarationManage/sluice/declare/components/dataCharts.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="content">
<div ref="pieEle" style="width: 40%; height: 100%"></div>
<div ref="barEle" style="width: 60%; height: 100%"></div>
<div ref="pieEle" style="width: 30%; height: 100%"></div>
<div ref="barEle" style="width: 70%; height: 100%"></div>
</div>
</template>
<script>
@ -42,7 +42,7 @@ export default {
// subtext: "Fake Data",
left: "center",
},
color: ["#5DB1FF", "#FBD437", "#36CBCB", "#6DD48C"],
color: ["#6DD48C", "#5DB1FF", "#FBD437", "#36CBCB"],
tooltip: {
trigger: "item",
},
@ -55,8 +55,14 @@ export default {
{
name: "水闸占比",
type: "pie",
radius: "50%",
radius: "65%",
data: this.pieChartData,
label: {
formatter: (params) => {
// console.log(11, params);
return `${params.name}: ${params.value}`;
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
@ -74,6 +80,7 @@ export default {
});
},
barInit() {
Object.values(this.barChartData);
let chartDom = this.$refs.barEle;
let myChart = echarts.init(chartDom);
let option = {
@ -92,31 +99,47 @@ export default {
bottom: "2%",
icon: "circle",
},
// grid: {
// left: "3%",
// right: "4%",
// bottom: "10%",
// containLabel: true,
// },
grid: {
left: "3%",
right: "4%",
bottom: "12%",
containLabel: true,
},
xAxis: {
type: "category",
data: Object.keys(this.barChartData),
},
yAxis: {
type: "value",
splitLine: {
//网格线
show: true, //是否显示
lineStyle: {
//网格线样式
// color: "#0735a2", //网格线颜色
// width: 1, //网格线的加粗程度
type: "dashed", //网格线类型
},
},
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
max: function (value) {
return value.max + Math.ceil(0.2 * value.max);
},
// boundaryGap: [0, 1],
},
series: [
{
name: "已登记",
type: "bar",
data: Object.values(this.barChartData)[0],
data: Object.values(this.barChartData).map((res) => res["1"]),
barMaxWidth: "10%",
},
{
name: "未登记",
type: "bar",
data: Object.values(this.barChartData)[1],
data: Object.values(this.barChartData).map((res) => res["0"]),
barMaxWidth: "10%",
},
],
};

159
src/views/safetyManage/declarationManage/sluice/examine/components/dataCharts.vue
View File

@ -1,9 +1,164 @@
<template>
<div class="content"></div>
<div class="content">
<div ref="pieEle" style="width: 30%; height: 100%"></div>
<div ref="barEle" style="width: 70%; height: 100%"></div>
</div>
</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: ["#6DD48C", "#5DB1FF", "#FBD437", "#36CBCB"],
tooltip: {
trigger: "item",
},
legend: {
orient: "horizontal",
bottom: "2%",
icon: "circle",
},
series: [
{
name: "水闸占比",
type: "pie",
radius: "65%",
data: this.pieChartData,
label: {
formatter: (params) => {
// console.log(11, params);
return `${params.name}: ${params.value}`;
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
barInit() {
Object.values(this.barChartData);
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: "12%",
containLabel: true,
},
xAxis: {
type: "category",
data: Object.keys(this.barChartData),
},
yAxis: {
type: "value",
splitLine: {
//网格线
show: true, //是否显示
lineStyle: {
//网格线样式
// color: "#0735a2", //网格线颜色
// width: 1, //网格线的加粗程度
type: "dashed", //网格线类型
},
},
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
max: function (value) {
return value.max + Math.ceil(0.2 * value.max);
},
// boundaryGap: [0, 1],
},
series: [
{
name: "已登记",
type: "bar",
data: Object.values(this.barChartData).map((res) => res["1"]),
barMaxWidth: "10%",
},
{
name: "未登记",
type: "bar",
data: Object.values(this.barChartData).map((res) => res["0"]),
barMaxWidth: "10%",
},
],
};
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
},
};
</script>
<style lang="scss" scoped>
.content {
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>

6
src/views/safetyManage/declarationManage/sluice/examine/components/listPage/index.vue
View File

@ -1047,12 +1047,14 @@ export default {
}
});
},
zxForm(row) {
const id = row.id;
zxForm() {
const id = this.form.id;
delJbxx(id).then((response) => {
if (response.code === 200) {
this.getList();
this.msgSuccess("注销成功");
this.zxOpen = false;
this.zxVisible = false;
}
});
},

156
src/views/safetyManage/responsiblePersonManage/sluice/dataCharts.vue
View File

@ -1,9 +1,161 @@
<template>
<div class="content"></div>
<div class="content">
<!-- <div ref="pieEle" style="width: 30%; height: 100%"></div> -->
<div ref="barEle" style="width: 100%; height: 100%"></div>
</div>
</template>
<script>
import { getPie, getHistogram } from "@/api/yg/fzr";
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 });
// }
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: ["#6DD48C", "#5DB1FF", "#FBD437", "#36CBCB"],
// tooltip: {
// trigger: "item",
// },
// legend: {
// orient: "horizontal",
// bottom: "2%",
// icon: "circle",
// },
// series: [
// {
// name: "水闸占比",
// type: "pie",
// radius: "65%",
// data: this.pieChartData,
// label: {
// formatter: (params) => {
// // console.log(11, params);
// return `${params.name}: ${params.value}`;
// },
// },
// 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: "12%",
containLabel: true,
},
xAxis: {
type: "category",
data: Object.keys(this.barChartData),
},
yAxis: {
type: "value",
splitLine: {
//网格线
show: true, //是否显示
lineStyle: {
//网格线样式
// color: "#0735a2", //网格线颜色
// width: 1, //网格线的加粗程度
type: "dashed", //网格线类型
},
},
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
max: function (value) {
return value.max + Math.ceil(0.2 * value.max);
},
// boundaryGap: [0, 1],
},
series: [
{
name: "大坝管理责任人",
type: "bar",
data: Object.values(this.barChartData).map((res) => res["1"]),
barMaxWidth: "10%",
},
{
name: "防汛责任人",
type: "bar",
data: Object.values(this.barChartData).map((res) => res["0"]),
barMaxWidth: "10%",
},
],
};
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
},
};
</script>
<style lang="scss" scoped>
.content {
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>

Write Preview
Loading…
Cancel
Save