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