This commit is contained in:
duanxiaohai 2024-06-03 09:29:05 +08:00
parent 6afe929a0c
commit bae0b94e1f
4 changed files with 340 additions and 272 deletions

BIN
dist.zip

Binary file not shown.

View File

@ -3,26 +3,60 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import {
onBeforeMount,
onMounted,
ref,
reactive,
defineProps,
watch,
nextTick,
} from "vue";
// echarts // echarts
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
year: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // DOM const chart = ref(); // DOM
const data = reactive({
list: [],
list1: [],
list2: [],
list3: [],
lineData: [],
lineData1: [],
year: [],
option: {},
initialLegendData: ["特困救助金额", "低保救助金额"],
initialLegendData1: ["特困救助人次", "低保救助人次", "低边救助人次"],
});
const data = [120, 200, 50, 80, 70]; const data1 = [120, 200, 50, 80, 70];
const data2 = [12, 20, 5, 8, 7]; const data2 = [12, 20, 5, 8, 7];
const data3 = [20, 100, 40, 80, 70]; const data3 = [20, 100, 40, 80, 70];
const lineData = [1500, 2300, 240, 2180, 1350]; const lineData = [1500, 2300, 240, 2180, 1350];
const lineData2 = [1000, 2000, 400, 1800, 2333]; const lineData2 = [1000, 2000, 400, 1800, 2333];
const max = data // const max = data
.concat(lineData, lineData2, data2, data3) // .concat(lineData, lineData2, data2, data3)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); // // .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
const maxRs = data // const maxRs = data
.concat(data2, data3) // .concat(data2, data3)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); // .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
const maxJe = lineData // const maxJe = lineData
.concat(lineData2) // .concat(lineData2)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); // .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
// //
const color = [ const color = [
{ {
@ -33,284 +67,301 @@ const color = [
y2: 1, y2: 1,
}, },
]; ];
const option = { const getOption = () => {
tooltip: { data.option = {
trigger: "axis", tooltip: {
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}<br/>{a4}:{c4}", trigger: "axis",
formatter:
}, "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}<br/>{a4}:{c4}",
legend: [
{
data: ["特困救助金额", "低保救助金额"],
top: "3%",
textStyle: {
fontSize: 14,
color: "#ffffff", //
},
}, },
{ legend: [
data: ["特困救助人次", "低保救助人次", "低边救助人次"], {
top: "13%", data: data.initialLegendData,
textStyle: { top: "3%",
fontSize: 14,
color: "#ffffff", //
},
},
],
grid: {
top: "28%",
left: "6%",
right: "9%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
fontSize: 14,
},
calculable: true,
color,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: { textStyle: {
color: "#ffffff",
fontSize: 14, fontSize: 14,
color: "#ffffff", //
}, },
}, },
axisTick: { {
show: false, // data: data.initialLegendData1,
}, top: "13%",
data: ["2019", "2020", "2021", "2022", "2023"],
},
{
type: "category",
show: false,
data: ["2019", "2020", "2021", "2022", "2023"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "救助人数",
splitLine: {
//线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 14,
width: 1,
},
},
axisLabel: {
//y
textStyle: { textStyle: {
color: "#ffffff",
fontSize: 14, fontSize: 14,
color: "#ffffff", //
}, },
}, },
axisLine: { ],
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 14,
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
min: 0,
name: "救助金额/万", grid: {
splitLine: { top: "28%",
show: false, left: "6%",
lineStyle: { right: "9%",
color: "rgba(226, 226, 226, 0.3)", bottom: "0%",
width: 1, containLabel: true,
}, color: "#ffffff",
}, fontSize: 14,
axisLabel: { },
//y calculable: true,
textStyle: { color,
color: "#ffffff", xAxis: [
fontSize: 14, {
}, type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 14,
},
},
axisTick: {
show: false, //
},
data: data.year,
}, },
axisLine: { {
//y线 type: "category",
show: false, show: false,
lineStyle: { data: data.year,
color: "#ffffff", },
],
yAxis: [
{
type: "value",
scale: true,
name: "救助人数",
splitLine: {
//线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 14,
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
fontSize: 14,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 14,
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
min: 0,
name: "救助金额/万",
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
fontSize: 14,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 14,
width: 1,
type: "solid",
},
},
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 14, fontSize: 14,
width: 1, color: "#ffffff",
type: "solid", lineHeight: 19,
fontFamily: "MicrosoftYaHei",
}, },
}, },
}, ],
{ series: [
type: "value", {
min: 0, yAxisIndex: 1,
max: 100, name: "特困救助金额",
splitLine: { data: data.lineData,
show: false, type: "line", //线
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 14,
color: "#ffffff",
lineHeight: 19,
fontFamily: "MicrosoftYaHei",
},
},
],
series: [
{
yAxisIndex: 1,
name: "特困救助金额",
data: lineData,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
yAxisIndex: 1,
name: "低保救助金额",
data: lineData2,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#2468FF",
},
},
{
yAxisIndex: 0,
name: "特困救助人次",
data: data,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
]),
},
},
{
yAxisIndex: 0,
name: "低保救助人次",
data: data2,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 136, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 136, 255, 0.20)",
},
]),
},
},
{
yAxisIndex: 0,
name: "低边救助人次",
data: data3,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
{
yAxisIndex: 2,
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.map(() => 100),
barWidth: 60, //
emphasis: {
itemStyle: { itemStyle: {
color: { borderColor: "#00FCFF",
type: "linear", borderWidth: 1,
x: 0, color: "#00FCFF",
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
}, },
}, },
type: "bar", {
}, yAxisIndex: 1,
], name: "低保救助金额",
data: data.lineData1,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#2468FF",
},
},
{
yAxisIndex: 0,
name: "特困救助人次",
data: data.list1,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
]),
},
},
{
yAxisIndex: 0,
name: "低保救助人次",
data: data.list2,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 136, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 136, 255, 0.20)",
},
]),
},
},
{
yAxisIndex: 0,
name: "低边救助人次",
data: data.list3,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
{
yAxisIndex: 2,
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.list.subsidyInformation.map(() => 100),
barWidth: 60, //
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
},
},
type: "bar",
},
],
};
};
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
};
const setChart1 = () => {
data.list1 = [];
data.list2 = [];
data.list3 = [];
data.lineData = [];
data.lineData1 = [];
data.list.subsidyInformation.forEach((item) => {
data.list1.push(item.btsx); //
data.list2.push(item.btje1); //
data.list3.push(item.btje2); //
data.lineData.push(item.btje3); //
data.lineData1.push(item.btje4); //
});
// console.log("2", data.list1, data.list2);
}; };
// 使 // 使
onMounted(() => { onBeforeMount(() => {
// domecharts setTimeout(() => {
// var myChart = echarts.init(document.getElementById('main')); data.list = props.list;
// Vue3 data.year = props.list.year;
var myChart = echarts.init(chart.value); // console.log(data.list, "");
setChart1();
// init(); // vue3.2this getOption();
// 使 setChart();
myChart.setOption(option); }, 600);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
}); });
</script> </script>

View File

@ -300,7 +300,7 @@ onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list = props.list;
setChart1(); setChart1();
console.log(data.list, data.list1, data.list2, "教育"); // console.log(data.list, data.list1, data.list2, "");
getOption(); getOption();
setChart(); setChart();
}, 600); }, 600);

View File

@ -56,7 +56,7 @@
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title center_1"></div> <div class="yd_title center_1"></div>
<eP3></eP3> <eP3 :list="data.lifeAssistance1"></eP3>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="fundingBox"> <div class="fundingBox">
@ -181,8 +181,8 @@ const jz = ref([
const jzChange = (index, value) => { const jzChange = (index, value) => {
jz.value[index].choose = value; jz.value[index].choose = value;
if (index === 0) { if (index === 0) {
data.list2 = value === "1" ? data.education : data.education1; data.list2 = value === "1" ? data.education : data.medical;
console.log(111, jz.value[index].choose); // console.log(111, jz.value[index].choose);
} else if (index === 1) { } else if (index === 1) {
data.list = value === "1" ? data.housing : data.temporary; data.list = value === "1" ? data.housing : data.temporary;
} else if (index === 2) { } else if (index === 2) {
@ -209,7 +209,7 @@ const data = reactive({
], ],
year: ["2019"], year: ["2019"],
}, // }, //
education1: { medical: {
data: [ data: [
{ {
nf: "2019", // nf: "2019", //
@ -248,6 +248,19 @@ const data = reactive({
}, },
], ],
}, // }, //
lifeAssistance1: {
subsidyInformation: [
{
nf: "2019", //
btsx: "11", //
btje1: "22", //
btje2: "33", //
btje3: "44", //
btje4: "55", //
},
],
year: ["2019"],
}, //
difficultSoldiers: { difficultSoldiers: {
data: [ data: [
{ {
@ -308,6 +321,10 @@ const getData = async () => {
data.education.data = res.data.specialAssistance.education.data; data.education.data = res.data.specialAssistance.education.data;
data.education.year = res.data.specialAssistance.education.year; data.education.year = res.data.specialAssistance.education.year;
data.list2 = data.education; data.list2 = data.education;
data.medical.data = res.data.specialAssistance.medical.data;
data.medical.year = res.data.specialAssistance.medical.year;
data.list2 = data.medical;
// & // &
data.housing.data = res.data.specialAssistance.housing.data; data.housing.data = res.data.specialAssistance.housing.data;
data.housing.year = res.data.specialAssistance.housing.year; data.housing.year = res.data.specialAssistance.housing.year;