This commit is contained in:
duanxiaohai
parent
f446f1edb3
commit
a3eb85e5c7
|
|
@ -44,12 +44,7 @@
|
|||
<span> {{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<eP2
|
||||
:list="data.DataViewing"
|
||||
:list1="data.leftCenter3"
|
||||
:list2="data.leftCenter4"
|
||||
:year="data.leftCenterYear"
|
||||
></eP2>
|
||||
<eP2 :list="data.DataViewing" :year="data.leftCenterYear"></eP2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -119,7 +114,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
|
||||
<!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
|
||||
<right2></right2>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
|
|
@ -170,38 +165,38 @@ const data = reactive({
|
|||
{
|
||||
name: "医保支出万元以上",
|
||||
value: "11112",
|
||||
show: false,
|
||||
show: true,
|
||||
data: ["100", "120", "199", "133", "210"], //医保支出万元以上
|
||||
},
|
||||
{
|
||||
name: "大病住院",
|
||||
value: "120",
|
||||
show: false,
|
||||
data: ["100", "120", "199", "133", "210"], //大病住院
|
||||
data: ["100", "0", "199", "133", "210"], //大病住院
|
||||
},
|
||||
{
|
||||
name: "高血压",
|
||||
value: "2345",
|
||||
show: false,
|
||||
data: ["100", "120", "199", "133", "210"], //高血压
|
||||
data: ["100", "10", "199", "133", "210"], //高血压
|
||||
},
|
||||
{
|
||||
name: "糖尿病",
|
||||
value: "1241",
|
||||
show: false,
|
||||
data: ["100", "120", "199", "133", "210"], //糖尿病
|
||||
data: ["100", "120", "19", "133", "210"], //糖尿病
|
||||
},
|
||||
{
|
||||
name: "高血脂",
|
||||
value: "1414",
|
||||
show: false,
|
||||
data: ["100", "120", "199", "133", "210"], //高血脂
|
||||
data: ["100", "120", "199", "13", "210"], //高血脂
|
||||
},
|
||||
{
|
||||
name: "高血糖",
|
||||
value: "2355",
|
||||
show: false,
|
||||
data: ["100", "120", "199", "133", "210"], //高血糖
|
||||
data: ["100", "120", "199", "133", "10"], //高血糖
|
||||
},
|
||||
{
|
||||
name: "残疾",
|
||||
|
|
@ -228,11 +223,16 @@ const data = reactive({
|
|||
data: ["100", "120", "199", "133", "210"], //其他疾病
|
||||
},
|
||||
],
|
||||
DataViewing: {}, //数据查看
|
||||
leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
|
||||
leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
|
||||
leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
|
||||
DataViewing: [
|
||||
{
|
||||
name: "医保支出万元以上",
|
||||
data: ["100", "120", "199", "133", "210"], //医保支出万元以上
|
||||
},
|
||||
], //数据查看
|
||||
leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //年份
|
||||
// leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
|
||||
// leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
|
||||
// leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
|
||||
|
||||
zccs1: ["图书馆", "交通出行", "景区"], //一码通
|
||||
zccs2: ["100", "130", "220"], //一码通
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { onBeforeMount, reactive, ref, watch } from "vue";
|
|||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const clear = ref(false);
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
|
|
@ -35,7 +35,17 @@ const props = defineProps({
|
|||
},
|
||||
},
|
||||
});
|
||||
|
||||
const sers = ref([
|
||||
{
|
||||
name: "背景",
|
||||
type: "bar",
|
||||
data: [],
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
]);
|
||||
const data = reactive({
|
||||
list: [],
|
||||
list1: [],
|
||||
|
|
@ -44,6 +54,17 @@ const data = reactive({
|
|||
option: {},
|
||||
bg: [],
|
||||
name: [],
|
||||
ser: [],
|
||||
len: {
|
||||
data: [],
|
||||
top: "0%",
|
||||
right: "5%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
formatter: "{b0}<br />",
|
||||
});
|
||||
|
||||
const getOption = () => {
|
||||
|
|
@ -51,19 +72,11 @@ const getOption = () => {
|
|||
tooltip: {
|
||||
trigger: "axis",
|
||||
padding: [20, 10, 20, 10],
|
||||
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
|
||||
},
|
||||
legend: {
|
||||
data: data.name,
|
||||
top: "5%",
|
||||
right: "10%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
formatter: data.formatter,
|
||||
},
|
||||
legend: data.len,
|
||||
grid: {
|
||||
top: "25%",
|
||||
top: "35%",
|
||||
left: "6%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
|
|
@ -155,102 +168,27 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
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,
|
||||
},
|
||||
],
|
||||
series: data.ser,
|
||||
};
|
||||
};
|
||||
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
if (clear.value) {
|
||||
myChart.clear();
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
data.name = [];
|
||||
if (Object.keys(data.list).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.ser.length = 0;
|
||||
sers.value.forEach((item) => {
|
||||
data.ser.push(item);
|
||||
});
|
||||
if (data.name.length > 0) {
|
||||
data.list.forEach((item) => {
|
||||
// console.log(item, "数据名111");
|
||||
data.option.series.push({
|
||||
data.ser.push({
|
||||
yAxisIndex: 0,
|
||||
name: item.name,
|
||||
type: "line",
|
||||
|
|
@ -268,40 +206,47 @@ const setChart1 = () => {
|
|||
return data.value;
|
||||
},
|
||||
},
|
||||
data: [item.data],
|
||||
|
||||
data: item.data,
|
||||
});
|
||||
});
|
||||
data.list.forEach((item) => {
|
||||
data.name.push(item.name); //数据名
|
||||
});
|
||||
|
||||
console.log(data.list, data.name, "数据名");
|
||||
}
|
||||
console.log("监听", data.ser);
|
||||
console.log("监听1", sers.value);
|
||||
};
|
||||
|
||||
// 监听数据
|
||||
watch(
|
||||
() => props.list,
|
||||
(newVal, oldVal) => {
|
||||
setTimeout(() => {
|
||||
if (newVal.length < oldVal.length) {
|
||||
clear.value = true;
|
||||
} else {
|
||||
clear.value = false;
|
||||
}
|
||||
data.list = newVal;
|
||||
// console.log("救助人1", data.list);
|
||||
getOption();
|
||||
data.name = props.list.map((item) => item.name);
|
||||
data.len.data = data.name;
|
||||
sers.value[0].data = data.year.map((item) => 0);
|
||||
data.formatter = "{b0}<br />";
|
||||
if (data.name.length > 0) {
|
||||
for (let i = 1; i <= data.name.length; i++) {
|
||||
let s1 = `{a${i}}:{c${i}}<br />`;
|
||||
data.formatter += s1;
|
||||
}
|
||||
}
|
||||
|
||||
setChart1();
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
}
|
||||
);
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.list1 = props.list1;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
data.year.forEach(() => {
|
||||
data.bg.push(0);
|
||||
});
|
||||
sers.value[0].data = data.year.map((item) => 0);
|
||||
setChart1();
|
||||
getOption();
|
||||
setChart();
|
||||
|
|
|
|||
Loading…
Reference in New Issue