This commit is contained in:
parent
ca2212401a
commit
428c6c0013
|
@ -173,13 +173,11 @@ const setChart1 = () => {
|
||||||
watch(
|
watch(
|
||||||
() => props.list,
|
() => props.list,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
console.log(2222,newVal, oldVal)
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
data.list = props.list;
|
data.list = props.list;
|
||||||
console.log(1111,data.list)
|
|
||||||
setChart1();
|
setChart1();
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
|
|
|
@ -262,7 +262,7 @@ onBeforeMount(() => {
|
||||||
data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
|
data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
|
||||||
data.bg.push("");
|
data.bg.push("");
|
||||||
});
|
});
|
||||||
console.log(data.zgffrc,data.cxffrc);
|
// console.log(data.zgffrc,data.cxffrc);
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
}, 600);
|
}, 600);
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div ref="chart" style="width: 100%; height: 260px"></div>
|
<div ref="chart" style="width: 100%; height: 260px"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup >
|
<script setup>
|
||||||
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
|
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
|
||||||
// 局部引入echarts核心模块
|
// 局部引入echarts核心模块
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
|
@ -191,27 +191,33 @@ const getOption = () => {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
const setChart = () => {
|
const setChart = () => {
|
||||||
// Vue3中: 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
var myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(data.option);
|
myChart.setOption(data.option);
|
||||||
};
|
};
|
||||||
|
const setChart1 = () => {
|
||||||
|
data.zgffje = [];
|
||||||
|
data.cxffje = [];
|
||||||
|
data.bg = [];
|
||||||
|
|
||||||
|
data.list.forEach((item) => {
|
||||||
|
data.zgffje.push(item.zgffje);
|
||||||
|
data.cxffje.push(item.cxffje);
|
||||||
|
data.bg.push("");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
data.list = props.list;
|
data.list = props.list;
|
||||||
data.year = props.year;
|
data.year = props.year;
|
||||||
data.list.forEach((item) => {
|
if (data.list.length !== 0) {
|
||||||
data.zgffje.push(item.zgffje);
|
// console.log("城乡医疗保险金额", data.list, data.year);
|
||||||
data.cxffje.push(item.cxffje);
|
setChart1();
|
||||||
data.bg.push("");
|
|
||||||
});
|
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
|
}
|
||||||
}, 600);
|
}, 600);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
</style>
|
|
||||||
|
|
|
@ -39,7 +39,7 @@ const props = defineProps({
|
||||||
const chart = ref(); // 创建DOM引用
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
list: [],
|
list: {},
|
||||||
list1: [],
|
list1: [],
|
||||||
list2: [],
|
list2: [],
|
||||||
year: [],
|
year: [],
|
||||||
|
@ -306,7 +306,6 @@ watch(
|
||||||
() => props.list,
|
() => props.list,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
data.list = newVal;
|
data.list = newVal;
|
||||||
// console.log("补贴人1", data.list);
|
|
||||||
setChart1();
|
setChart1();
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
|
@ -317,10 +316,12 @@ watch(
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
data.list = props.list;
|
data.list = props.list;
|
||||||
|
if (Object.keys(data.list).length !== 0) {
|
||||||
setChart1();
|
setChart1();
|
||||||
// console.log(data.list, data.list1, data.list2, "教育");
|
// console.log(data.list, data.list1, data.list2, "教育");
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
|
};
|
||||||
}, 600);
|
}, 600);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1148,8 +1148,8 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex11 {
|
.flex11 {
|
||||||
padding: 12px 0;
|
padding: 50px 0;
|
||||||
margin-top: 54px;
|
// margin-top: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.czr-sl {
|
.czr-sl {
|
||||||
|
@ -1168,8 +1168,8 @@ onMounted(() => {
|
||||||
padding-left: 70px;
|
padding-left: 70px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
font-size: 16px;
|
font-size: 17px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
|
@ -1298,7 +1298,7 @@ onMounted(() => {
|
||||||
.czr-bj {
|
.czr-bj {
|
||||||
width: 529px;
|
width: 529px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
padding-top: 20px;
|
// padding-top: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -1588,8 +1588,8 @@ onMounted(() => {
|
||||||
// justify-content: space-between;
|
// justify-content: space-between;
|
||||||
span {
|
span {
|
||||||
font-family: PingFangSC, PingFang SC;
|
font-family: PingFangSC, PingFang SC;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 17px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
|
@ -1619,8 +1619,8 @@ onMounted(() => {
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-family: PingFangSC, PingFang SC;
|
font-family: PingFangSC, PingFang SC;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 17px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
|
@ -1160,7 +1160,7 @@ onBeforeUnmount(() => {
|
||||||
span {
|
span {
|
||||||
font-family: PingFangSC, PingFang SC;
|
font-family: PingFangSC, PingFang SC;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
|
@ -1190,8 +1190,8 @@ onBeforeUnmount(() => {
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-family: PingFangSC, PingFang SC;
|
font-family: PingFangSC, PingFang SC;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
Loading…
Reference in New Issue