This commit is contained in:
姚宇浩 2024-06-14 16:57:58 +08:00
parent 60f96b6900
commit 5099a627e3
2 changed files with 26 additions and 107 deletions

View File

@ -177,13 +177,13 @@ const data = reactive({
name: "大病住院", name: "大病住院",
value: "120", value: "120",
show: false, show: false,
data: ["100", "120", "199", "133", "210"], // data: ["10", "12", "19", "13", "21"], //
}, },
{ {
name: "高血压", name: "高血压",
value: "2345", value: "2345",
show: false, show: false,
data: ["100", "120", "199", "133", "210"], // data: ["100", "10", "199", "13", "210"], //
}, },
{ {
name: "糖尿病", name: "糖尿病",
@ -260,7 +260,7 @@ const onViewData = (value, i) => {
name: item.name, name: item.name,
data: item.data, data: item.data,
})); }));
// console.log(data.DataViewing, 666); console.log(data.DataViewing, 666);
// switch (value) { // switch (value) {
// case "": // case "":

View File

@ -35,7 +35,17 @@ const props = defineProps({
}, },
}, },
}); });
const ser = ref([
{
name: "背景",
type: "bar",
data: [],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
]);
const data = reactive({ const data = reactive({
list: [], list: [],
list1: [], list1: [],
@ -44,6 +54,7 @@ const data = reactive({
option: {}, option: {},
bg: [], bg: [],
name: [], name: [],
ser: [],
}); });
const getOption = () => { const getOption = () => {
@ -54,7 +65,7 @@ const getOption = () => {
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}", formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
}, },
legend: { legend: {
data: data.name, data: ['医保支出万元以上','大病住院','高血压','糖尿病'],
top: "5%", top: "5%",
right: "10%", right: "10%",
textStyle: { textStyle: {
@ -155,59 +166,7 @@ const getOption = () => {
}, },
}, },
], ],
series: [ series: data.ser,
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
yAxisIndex: 0,
name: "大病住院",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
label: {
show: true,
color: "#2468FF",
formatter: function (data) {
return data.value;
},
},
data: data.list1,
},
{
yAxisIndex: 1,
name: "糖尿病",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: " #00FCFF ",
borderWidth: 1,
color: "#00FCFF ",
},
label: {
show: true,
color: "#00FCFF",
formatter: function (data) {
return data.value;
},
},
data: data.list2,
},
],
}; };
}; };
@ -215,42 +174,12 @@ const setChart = () => {
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
myChart.setOption(data.option); myChart.setOption(data.option);
}; };
// const setChart1 = () => {
// if (Object.keys(data.list).length !== 0) {
// data.list1 = [];
// data.list2 = [];
// data.list.data.forEach((item) => {
// // data.list1.push(item.jzrs); //
// // data.list2.push(item.jzje); //
// data.option.series.push();
// });
// data.name = [];
// data.list.forEach((item) => {
// data.name.push(item.name); //
// });
// console.log(data.list, data.name, "");
// }
// };
const setChart1 = () => { const setChart1 = () => {
data.name = []; data.ser = ser.value;
if (Object.keys(data.list).length !== 0) { if (data.name.length > 0) {
data.list1 = [];
data.list2 = [];
// data.name = [];
data.option.series = [];
// Define background series
data.option.series.push({
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
});
data.list.forEach((item) => { data.list.forEach((item) => {
// console.log(item, "111"); data.ser.push({
data.option.series.push({
yAxisIndex: 0, yAxisIndex: 0,
name: item.name, name: item.name,
type: "line", type: "line",
@ -268,14 +197,10 @@ const setChart1 = () => {
return data.value; return data.value;
}, },
}, },
data: [item.data],
data: item.data,
}); });
}); });
data.list.forEach((item) => {
data.name.push(item.name); //
});
console.log(data.list, data.name, "数据名");
} }
}; };
@ -283,25 +208,19 @@ const setChart1 = () => {
watch( watch(
() => props.list, () => props.list,
(newVal, oldVal) => { (newVal, oldVal) => {
setTimeout(() => {
data.list = newVal; data.list = newVal;
// console.log("1", data.list); data.name = props.list.map((item) => item.name);
getOption(); // console.log(55555, data.name);
setChart1(); setChart1();
setChart(); setChart();
}, 600);
} }
); );
// 使 // 使
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list = props.list;
data.list1 = props.list1;
data.list2 = props.list2;
data.year = props.year; data.year = props.year;
data.year.forEach(() => { ser.value[0].data=data.year.map((item) => 0);
data.bg.push(0);
});
setChart1(); setChart1();
getOption(); getOption();
setChart(); setChart();