This commit is contained in:
duanxiaohai 2024-07-11 10:46:45 +08:00
parent ca2212401a
commit 428c6c0013
6 changed files with 40 additions and 35 deletions

View File

@ -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();

View File

@ -103,7 +103,7 @@ const getOption = () => {
}, },
}, },
axisLine: { axisLine: {
show: false, show: false,
lineStyle: { lineStyle: {
type: "dotted", type: "dotted",
}, },
@ -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);

View File

@ -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();
}); setChart();
getOption(); }
setChart();
}, 600); }, 600);
}); });
</script> </script>
<style scoped> <style scoped></style>
</style>

View File

@ -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;
setChart1(); if (Object.keys(data.list).length !== 0) {
// console.log(data.list, data.list1, data.list2, ""); setChart1();
getOption(); // console.log(data.list, data.list1, data.list2, "");
setChart(); getOption();
setChart();
};
}, 600); }, 600);
}); });
</script> </script>

View File

@ -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;

View File

@ -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;