This commit is contained in:
姚宇浩 2024-06-17 09:52:45 +08:00
parent c0f66dc0a9
commit c891f18df1
1 changed files with 34 additions and 10 deletions

View File

@ -8,7 +8,7 @@ import { onBeforeMount, reactive, ref, watch } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
const chart = ref(); // DOM const chart = ref(); // DOM
const clear = ref(false);
const props = defineProps({ const props = defineProps({
list: { list: {
type: Array, type: Array,
@ -35,7 +35,7 @@ const props = defineProps({
}, },
}, },
}); });
const ser = ref([ const sers = ref([
{ {
name: "背景", name: "背景",
type: "bar", type: "bar",
@ -57,13 +57,14 @@ const data = reactive({
ser: [], ser: [],
len: { len: {
data: [], data: [],
top: "5%", top: "0%",
right: "10%", right: "5%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: "#ffffff", color: "#ffffff",
}, },
}, },
formatter: "{b0}<br />",
}); });
const getOption = () => { const getOption = () => {
@ -71,11 +72,11 @@ const getOption = () => {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
padding: [20, 10, 20, 10], padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}", formatter: data.formatter,
}, },
legend: data.len, legend: data.len,
grid: { grid: {
top: "25%", top: "35%",
left: "6%", left: "6%",
right: "6%", right: "6%",
bottom: "3%", bottom: "3%",
@ -173,11 +174,18 @@ const getOption = () => {
const setChart = () => { const setChart = () => {
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
if (clear.value) {
myChart.clear();
}
myChart.setOption(data.option); myChart.setOption(data.option);
}; };
const setChart1 = () => { const setChart1 = () => {
data.ser = ser.value; data.ser.length = 0;
sers.value.forEach((item) => {
data.ser.push(item);
});
if (data.name.length > 0) { if (data.name.length > 0) {
data.list.forEach((item) => { data.list.forEach((item) => {
data.ser.push({ data.ser.push({
@ -203,17 +211,33 @@ const setChart1 = () => {
}); });
}); });
} }
console.log("监听", data.ser);
console.log("监听1", sers.value);
}; };
// //
watch( watch(
() => props.list, () => props.list,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal.length < oldVal.length) {
clear.value = true;
} else {
clear.value = false;
}
data.list = newVal; data.list = newVal;
data.name = props.list.map((item) => item.name); data.name = props.list.map((item) => item.name);
data.len.data = data.name; data.len.data = data.name;
// console.log(55555, 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(); setChart1();
getOption();
setChart(); setChart();
} }
); );
@ -222,7 +246,7 @@ onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list = props.list;
data.year = props.year; data.year = props.year;
ser.value[0].data = data.year.map((item) => 0); sers.value[0].data = data.year.map((item) => 0);
setChart1(); setChart1();
getOption(); getOption();
setChart(); setChart();