Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
lnn19986213 2024-06-14 11:33:28 +08:00
commit 75973f0345
8 changed files with 353 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

View File

@ -24,7 +24,19 @@
</div>
</div>
<div class="ViewData">
<div class="ViewDatalist"></div>
<div class="ViewDatalist">
<!-- <div class="ViewDataTop" v-for="item in data.ViewData.name">
<div class="ViewDataTopimg">
{{ item }}
</div>
<div class="ViewDataTopimg_1"></div>
<span>{{ item }}</span>
</div>
<div class="ViewDataBottom" v-for="item in 5">
<div class="ViewDataBottomimg"></div>
<div class="ViewDataBottomimg_1"></div>
</div> -->
</div>
<eP2
:list1="data.leftCenter1"
:list2="data.leftCenter2"
@ -77,6 +89,7 @@
<i></i>
</div>
</div>
<ylXZZC :list1="data.zccs1" :list2="data.zccs2"></ylXZZC>
</div>
</div>
<div class="displayFlex right_bg">
@ -127,9 +140,11 @@ import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
import right2 from "./echart_analyze/right2.vue";
import right1 from "./echart_analyze/right1.vue";
import http from "@/utils/request.js";
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
import edxs from "./echart_analyze/edXS.vue";
import eP2 from "./echart_analyze/eP2.vue";
import ylXZZC from "./echart_analyze/ylXZZC.vue";
const showR = ref(false); //loading
const data = reactive({
@ -144,6 +159,34 @@ const data = reactive({
leftCenter1: ["100", "80", "199", "133", "210"], //
leftCenter2: ["100", "120", "199", "133", "210"], //尿
leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //
ViewData: {
data: [
"11112",
"120",
"2345",
"1241",
"1414",
"2355",
"455",
"142",
"98",
"144",
],
name: [
"医保支出万元以上",
"大病住院",
"高血压",
"高血压",
"高血脂",
"高血糖",
"残疾",
"低保",
"特困",
"其他疾病",
],
},
zccs1: [ "图书馆","交通出行","景区",],//
zccs2: [ "100","130","220",],//
});
const minData = reactive({
minTop: ["4", "9", "1", "6", "2", "人"],
@ -429,9 +472,58 @@ onBeforeMount(() => { });
.hypertension {
display: flex;
}
// .ViewData{
.ViewData {
.ViewDatalist {
// display: flex;
// flex-wrap: wrap;
// }
background-image: url(@/assets/images/sjfx/sjfx11.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 550px;
height: 300px;
.ViewDataTop {
display: flex;
align-items: center;
flex-direction: column;
}
.ViewDataBottom {
display: flex;
align-items: center;
flex-direction: column;
}
.ViewDataTopimg {
background-image: url(@/assets/images/sjfx/sjfx.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 80px;
height: 80px;
margin-bottom: -24px;
}
.ViewDataTopimg_1 {
background-image: url(@/assets/images/sjfx/sjfx1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 105px;
height: 57px;
}
.ViewDataBottomimg {
background-image: url(@/assets/images/sjfx/sjfx2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 80px;
height: 80px;
margin-bottom: -24px;
}
.ViewDataBottomimg_1 {
background-image: url(@/assets/images/sjfx/sjfx3.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 105px;
height: 57px;
}
}
}
.minTopTitle {
width: 100%;
height: 28px;

View File

@ -0,0 +1,258 @@
<template>
<div ref="chart" style="width: 100%; height: 160px"></div>
</template>
<script setup>
import {
onBeforeMount,
onMounted,
reactive,
ref,
defineProps,
nextTick,
} from "vue";
// echarts
import * as echarts from "echarts";
const emit = defineEmits(["village"]);
const props = defineProps({
list1: {
type: Array,
default: () => {
return [];
},
},
list2: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(null); // DOM
// const data = ["", "", "", "", "", ""];
// const datas = ["8", "10", "7", " 23", "25", "250"];
const data = reactive({
list1: [],
list2: [],
option: {},
});
let zoomShow = true;
// if (data.length > 7) {
// zoomShow = true;
// } else {
// zoomShow = false;
// }
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {},
grid: {
top: "10%",
left: "3%",
right: "8%",
bottom: "3%",
containLabel: true,
color: "#ffffff",
fontSize: 14,
},
// dataZoom: [
// {
// //
// show: zoomShow,
// type: "inside",
// startValue: 0,
// endValue: 10,
// minValueSpan: 2,
// maxValueSpan: 10,
// yAxisIndex: [0],
// zoomOnMouseWheel: false, //
// moveOnMouseWheel: true, //
// moveOnMouseMove: true, //
// },
// {
// //使
// show: zoomShow,
// type: "slider",
// realtime: true,
// startValue: 0,
// endValue: 2,
// width: "8",
// height: "90%",
// yAxisIndex: [0], // y
// fillerColor: "rgba(154, 181, 215, 1)", //
// borderColor: "rgba(17, 100, 210, 0.12)",
// backgroundColor: "#cfcfcf", //
// handleSize: 0, //
// showDataShadow: false, // auto
// showDetail: false, //
// top: "1%",
// right: "8", //
// },
// ],
calculable: true,
xAxis: {
// name: '/',
type: "value",
data: data.list2,
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 14,
},
// formatter: `{value}/` // x
// formatter: function (value, index) {
// if (index === data.list2.length - 1) {
// //
// return value + "/"; //
// } else {
// return value; //
// }
// },
},
splitLine: {
//线
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
fontSize: 14,
width: 1,
},
},
axisPointer: {
label: {
autoSplitNumber: 5,
},
},
},
yAxis: {
type: "category", //
data: data.list1,
// max:10,
//y
axisLabel: {
inside: false,
// bargap: 0.5, //
textStyle: {
color: "#ffffff",
fontSize: 14,
},
},
//y线
axisLine: {
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 14,
width: 1,
type: "solid",
},
},
axisTick: {
show: false, // y
},
//线
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
fontSize: 14,
width: 1,
},
},
},
series: [
{
type: "bar",
data: data.list2,
barWidth: 15, //
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
// barCategoryGap: "10" /**/,
barMaxWidth: 20, //
barMinWidth: 5, //
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(0, 183, 255, 1)",
borderRadius: [0, 0, 50, 0], //
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(26, 255, 217, 0)" },
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
]),
},
},
label: {
show: true,
position: "right",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
},
],
};
};
// onMounted(() => {
// // domecharts
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3
// var myChart = echarts.init(chart.value);
// // init(); // vue3.2this
// // 使
// myChart.setOption(option);
// myChart.on("scroll", function (event) {
// // bargap
// var bargap = event.scrollData / 10000; // 1%0.5bargap
// myChart.setOption({
// yAxis: {
// axisLabel: {
// bargap: bargap,
// },
// },
// });
// });
// // :
// // window.addEventListener("resize", () => {
// // myChart.resize();
// // });
// });
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
myChart.on("click", function (params) {
emit('village',params.name);
});
};
// 使
onBeforeMount(() => {
setTimeout(() => {
data.list1 = props.list1;
data.list2 = props.list2;
data.year = props.year;
// data.max = data.list1
// .concat(data.list2)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
// console.log(data.max,data.list1, data.list2,111);
getOption();
setChart();
}, 600);
});
</script>
<style scoped></style>