Browse Source

修改图表

qin_24
herenshan112 4 months ago
parent
commit
2d9401f145
  1. 4
      src/components/DesignForm/app/index.vue
  2. 8
      src/components/DesignForm/tableListPage/index.vue
  3. 57
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue
  4. 4
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue
  5. 94
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue
  6. 1
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue
  7. 2
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue
  8. 5
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/container.vue

4
src/components/DesignForm/app/index.vue

@ -1768,7 +1768,7 @@ const transformOption = (val: string | number, type?: string) => {
}; };
const readerColumnSun = (column: any) => { const readerColumnSun = (column: any) => {
console.log("表头label长度-11->", column); // console.log("label-11->", column);
let labelLong = 0; // label let labelLong = 0; // label
if (column.children) { if (column.children) {
labelLong = column.children.length; labelLong = column.children.length;
@ -1782,7 +1782,7 @@ const readerColumnSun = (column: any) => {
countLenght = countLenght + item.label.length * 15; countLenght = countLenght + item.label.length * 15;
} }
}); });
console.log("表头label长度-->", countLenght); // console.log("label-->", countLenght);
return countLenght; return countLenght;
} else { } else {
return 100; return 100;

8
src/components/DesignForm/tableListPage/index.vue

@ -1644,7 +1644,7 @@ const readerColumnSun = (column: any) => {
countLenght = countLenght + item.label.length * 15; countLenght = countLenght + item.label.length * 15;
} }
}); });
console.log("表头label长度-->", countLenght); // console.log("label-->", countLenght);
return countLenght; return countLenght;
} else { } else {
return 100; return 100;
@ -2047,8 +2047,7 @@ const readerColumnSun = (column: any) => {
:label="item.label" :label="item.label"
:width="readerColumnSun(item)" :width="readerColumnSun(item)"
> >
<template #default="scope" <template #default="scope">
>{{ data.tableProps }}
<el-table <el-table
v-if="item.pattern == 'table'" v-if="item.pattern == 'table'"
v-bind="data.tableProps" v-bind="data.tableProps"
@ -2159,6 +2158,9 @@ const readerColumnSun = (column: any) => {
{{ scope.row[scope.column.property] }} {{ scope.row[scope.column.property] }}
</el-link> </el-link>
</template> </template>
<template v-else #default="scope">
{{ scope.row[scope.column.property] }}
</template>
</el-table-column> </el-table-column>
</template> </template>
</el-table> </el-table>

57
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue

@ -30,6 +30,17 @@ const props = withDefaults(
} }
); );
var myChart = ref<any>(); var myChart = ref<any>();
const seriesAnlay = (listVal: any[]) => {
if (listVal && Array.isArray(listVal)) {
listVal.forEach((item: any) => {
item.label = {
show: true,
position: "top",
};
});
}
return listVal;
};
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2025-06-26 11:34:21 @ 时间: 2025-06-26 11:34:21
@ -45,16 +56,44 @@ const drawPictures = () => {
}).then((data) => { }).then((data) => {
console.log("火1111111兔", data); console.log("火1111111兔", data);
if (data.code == 0 && data.data != null) { if (data.code == 0 && data.data != null) {
let optVal = data.data; // let optVal = data.data;
// optVal.grid = { // let optVal = {
// left: "2%", // tooltip: {
// right: "2%", // trigger: "axis",
// bottom: "15%", // axisPointer: {
// top: "15%", // type: "shadow",
// containLabel: true, // },
// },
// grid: {
// left: "2%",
// right: "2%",
// bottom: "15%",
// top: "15%",
// containLabel: true,
// },
// ...data.data,
// }; // };
myChart.value.setOption(optVal); let optChart = {
myChart.value.resize(); grid: {
left: "2%",
right: "2%",
bottom: "15%",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: data.data.legend,
yAxis: data.data.yAxis,
xAxis: data.data.xAxis,
series: seriesAnlay(data.data.series),
};
myChart.value.setOption(optChart);
// myChart.value.resize();
} else { } else {
myChart.value.setOption({ myChart.value.setOption({
grid: { grid: {

4
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue

@ -87,7 +87,7 @@ const drawBarracetures = () => {
series: seriesList, series: seriesList,
}; };
myChart.value.setOption(optionData); myChart.value.setOption(optionData);
myChart.value.resize(); // myChart.value.resize();
} else { } else {
myChart.value.setOption({ myChart.value.setOption({
grid: { grid: {
@ -120,7 +120,7 @@ const drawBarracetures = () => {
}, },
], ],
}); });
myChart.value.resize(); // myChart.value.resize();
} }
}); });

94
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue

@ -28,7 +28,31 @@ const props = withDefaults(
} }
); );
var myChartPie = ref<any>(); var myChartPie = ref<any>();
const pinhuaOrzejiao = ref(false);
/**
@ 作者: 秦东
@ 时间: 2025-08-04 14:31:20
@ 功能: 解析数据结果
*/
const seriesAnlay = (listVal: any[]) => {
if (listVal && Array.isArray(listVal)) {
listVal.forEach((item: any) => {
item.smooth = pinhuaOrzejiao.value;
item.label = {
show: true,
position: "top",
};
});
}
return listVal;
};
watch(
() => pinhuaOrzejiao.value,
() => {
drawLine();
}
);
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2025-06-26 11:34:21 @ 时间: 2025-06-26 11:34:21
@ -46,18 +70,50 @@ const drawLine = () => {
}).then((data) => { }).then((data) => {
console.log("火兔", data); console.log("火兔", data);
if (data.code == 0 && data.data != null) { if (data.code == 0 && data.data != null) {
let optVal = data.data; let optChart = {
optVal.grid = { grid: {
left: "2%", left: "2%",
right: "2%", right: "2%",
bottom: "15%", bottom: "15%",
top: "15%", top: "15%",
containLabel: true, containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: data.data.legend,
yAxis: data.data.yAxis,
xAxis: data.data.xAxis,
series: seriesAnlay(data.data.series),
}; };
myChartPie.value.setOption(optVal);
myChartPie.value.resize(); // let optVal = data.data;
// optVal.grid = {
// left: "2%",
// right: "2%",
// bottom: "15%",
// top: "15%",
// containLabel: true,
// };
// (optVal.tooltip = {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// },
// }),
myChartPie.value.setOption(optChart);
// myChartPie.value.resize();
} else { } else {
myChartPie.value.setOption({ myChartPie.value.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: { grid: {
left: "2%", left: "2%",
right: "2%", right: "2%",
@ -80,17 +136,17 @@ const drawLine = () => {
name: "销量", name: "销量",
data: [820, 932, 901, 934, 1290, 1330, 1320], data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line", type: "line",
smooth: true, smooth: pinhuaOrzejiao.value,
}, },
{ {
name: "销量科技", name: "销量科技",
data: [822, 942, 951, 4, 1290, 1330, 1320], data: [822, 942, 951, 4, 1290, 1330, 1320],
type: "line", type: "line",
smooth: true, smooth: pinhuaOrzejiao.value,
}, },
], ],
}); });
myChartPie.value.resize(); // myChartPie.value.resize();
} }
}); });
@ -126,9 +182,12 @@ onMounted(() => {
</script> </script>
<template> <template>
<div> <div>
<el-space wrap class="spaceBox"> <el-space wrap class="spaceBox leftOrRight">
<svg-icon icon-class="zydq" :size="20" /> <div>
<el-text>{{ props.data.title }}</el-text> <svg-icon icon-class="zydq" :size="20" />
<el-text>{{ props.data.title }}</el-text>
</div>
<el-switch v-model="pinhuaOrzejiao" active-text="平滑" inactive-text="折角" />
</el-space> </el-space>
<el-form <el-form
v-if="props.data.search" v-if="props.data.search"
@ -248,4 +307,9 @@ onMounted(() => {
.demo-form-inline .el-select { .demo-form-inline .el-select {
--el-select-width: 200px; --el-select-width: 200px;
} }
.leftOrRight {
display: flex;
justify-content: space-between;
align-items: center;
}
</style> </style>

1
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue

@ -145,6 +145,7 @@ const searBut = (val: string) => {
} }
return false; return false;
}; };
watch( watch(
() => props.data, () => props.data,
(val: any) => { (val: any) => {

2
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue

@ -66,7 +66,7 @@ const drawRadar = () => {
], ],
}; };
myChartPie.value.setOption(optionData); myChartPie.value.setOption(optionData);
myChartPie.value.resize(); // myChartPie.value.resize();
} else { } else {
myChartPie.value.setOption({ myChartPie.value.setOption({
grid: { grid: {

5
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/container.vue

@ -106,6 +106,7 @@ const getGroupName = (item: any) => {
} }
}; };
const groupClick = (item: any, ele?: string) => { const groupClick = (item: any, ele?: string) => {
// if (props.types == 5) {
store.setActiveKey(getGroupName(item)); store.setActiveKey(getGroupName(item));
store.setControlAttr(item); store.setControlAttr(item);
// grid // grid
@ -113,7 +114,9 @@ const groupClick = (item: any, ele?: string) => {
// state.clone = !notNested(item.type) // state.clone = !notNested(item.type)
// state.clone = !notNestedTableFlex(item.type); // state.clone = !notNestedTableFlex(item.type);
pickEcharts.value = item; pickEcharts.value = item;
console.log("点击激活当前--->", item, ele); // }
console.log("点击激活当前--->", props.types, item, ele);
}; };
// //
const click = (action: string, index: number, item?: any) => { const click = (action: string, index: number, item?: any) => {

Loading…
Cancel
Save