This commit is contained in:
姚宇浩 2024-07-12 17:16:11 +08:00
parent e8b04c4f0a
commit 9a0c658cb6
2 changed files with 22 additions and 33 deletions

View File

@ -106,7 +106,7 @@
v-for="option in data.options" v-for="option in data.options"
:key="option.value" :key="option.value"
:class="jz === option.value ? 'choose_1' : 'choose_2'" :class="jz === option.value ? 'choose_1' : 'choose_2'"
@click="jzChange(option.value)" @click="jzChange(option.value,option.label)"
class="choose_0" class="choose_0"
> >
{{ option.label }} {{ option.label }}
@ -115,6 +115,7 @@
<ePie4 <ePie4
:list="data.list.data" :list="data.list.data"
:year="data.list.year" :year="data.list.year"
:name="data.jzfxName"
v-if="showEchart" v-if="showEchart"
></ePie4> ></ePie4>
</div> </div>
@ -344,8 +345,9 @@ const jypxList = reactive([
]); ]);
// tap // tap
const jz = ref("1"); const jz = ref("1");
const jzChange = (value) => { const jzChange = (value,label) => {
jz.value = value; jz.value = value;
data.jzfxName=label;
data.list = data.dataAnalysis[value - 1]; data.list = data.dataAnalysis[value - 1];
}; };
const showEchart = ref(false); const showEchart = ref(false);
@ -356,6 +358,7 @@ const data = reactive({
}, },
list1: {}, list1: {},
list2: {}, list2: {},
jzfxName:'特困',
options: [ options: [
{ value: "1", label: "特困" }, { value: "1", label: "特困" },
{ value: "2", label: "低保" }, { value: "2", label: "低保" },

View File

@ -3,7 +3,14 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref, onBeforeMount, defineProps,watch } from "vue"; import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
} from "vue";
// echarts // echarts
import * as echarts from "echarts"; import * as echarts from "echarts";
@ -16,9 +23,14 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
name: {
type: String,
default: () => "",
},
}); });
const chart = ref(); // DOM const chart = ref(); // DOM
const data = reactive({ const data = reactive({
name:'特困',
list: [6280, 6280, 6280, 5924, 1824], list: [6280, 6280, 6280, 5924, 1824],
year: [2020, 2021, 2022, 2023, 2024], year: [2020, 2021, 2022, 2023, 2024],
bg: [0, 0, 0, 0, 0], bg: [0, 0, 0, 0, 0],
@ -94,7 +106,7 @@ const getOption = () => {
}, },
series: [ series: [
{ {
name: "手工零星报销人数", name: data.name,
type: "line", type: "line",
stack: "Total", stack: "Total",
symbol: "emptyCircle", symbol: "emptyCircle",
@ -114,32 +126,6 @@ const getOption = () => {
borderWidth: 1, borderWidth: 1,
color: "#00FCFF", color: "#00FCFF",
}, },
// areaStyle: {
// color: "#F4F65B",
// normal: {
// //线4x0,y0,x2,y2(0~1);true
// color: new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// // color: 'RGBA(184, 204, 241, 1)'
// color: "rgba(0, 252, 255, 0.50)",
// },
// {
// offset: 1,
// color: "rgba(0, 252, 255, 0)",
// },
// ],
// false
// ),
// shadowBlur: 0, //shadowBlurshadowColor,shadowOffsetX/Y,
// },
// },
data: data.list, data: data.list,
}, },
{ {
@ -165,8 +151,7 @@ watch(
() => props.list, () => props.list,
(newVal, oldVal) => { (newVal, oldVal) => {
data.list = newVal; data.list = newVal;
// data.year = props.year; data.name = props.name;
console.log(data.list,data.year,newVal,'数据分析');
getOption(); getOption();
setChart(); setChart();
} }
@ -175,6 +160,7 @@ watch(
() => props.year, () => props.year,
(newVal, oldVal) => { (newVal, oldVal) => {
data.year = newVal; data.year = newVal;
data.name = props.name;
getOption(); getOption();
setChart(); setChart();
} }
@ -184,7 +170,7 @@ onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list = props.list;
data.year = props.year; data.year = props.year;
// console.log(data.list,data.year,''); data.name = props.name;
getOption(); getOption();
setChart(); setChart();
}, 600); }, 600);