Browse Source

实时改变数据

qin_24
herenshan112 4 months ago
parent
commit
4612f1d252
  1. 32
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue
  2. 2
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue
  3. 8
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue
  4. 7
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue
  5. 7
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue
  6. 6
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/target.vue
  7. 2
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/winBox/dimMea.vue

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

@ -7,6 +7,8 @@
import { analyzeChartData } from "@/api/chart/index"; import { analyzeChartData } from "@/api/chart/index";
import { echatsViews } from "@/api/DesignForm/types"; import { echatsViews } from "@/api/DesignForm/types";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { useDesignEchartsStore } from "@/store/DesignForm/designForm";
const store = useDesignEchartsStore() as any; //
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -36,18 +38,23 @@ var myChart = ref<any>();
const drawPictures = () => { const drawPictures = () => {
if (props.uuid && props.uuid != "") { if (props.uuid && props.uuid != "") {
myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement); myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement);
analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => { analyzeChartData({
console.log("火兔", data); tableKey: props.tableKey,
chartId: props.uuid,
setConfig: controlData.value,
}).then((data) => {
console.log("火1111111兔", data);
if (data.code == 0) { if (data.code == 0) {
let optVal = data.data; let optVal = data.data;
optVal.grid = { // optVal.grid = {
left: "2%", // left: "2%",
right: "2%", // right: "2%",
bottom: "15%", // bottom: "15%",
top: "15%", // top: "15%",
containLabel: true, // containLabel: true,
}; // };
myChart.value.setOption(optVal); myChart.value.setOption(optVal);
myChart.value.resize();
} else { } else {
myChart.value.setOption({ myChart.value.setOption({
grid: { grid: {
@ -77,6 +84,7 @@ const drawPictures = () => {
}, },
], ],
}); });
myChart.value.resize();
} }
}); });
// myChart.value.setOption({ // myChart.value.setOption({
@ -111,6 +119,10 @@ const drawPictures = () => {
// myChart.value.resize(); // myChart.value.resize();
} }
}; };
//
const controlData = computed(() => {
return store.controlAttr;
});
watch( watch(
() => props.kuandu, () => props.kuandu,
(val: any) => { (val: any) => {
@ -120,7 +132,7 @@ watch(
{ deep: true } { deep: true }
); );
watch( watch(
() => props.data, () => controlData.value,
(val: any) => { (val: any) => {
console.log("画图完毕--改变-->", val); console.log("画图完毕--改变-->", val);
drawPictures(); drawPictures();

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

@ -78,6 +78,7 @@ const drawPictures = () => {
series: seriesList, series: seriesList,
}; };
myChart.value.setOption(optionData); myChart.value.setOption(optionData);
myChart.value.resize();
} else { } else {
myChart.value.setOption({ myChart.value.setOption({
grid: { grid: {
@ -110,6 +111,7 @@ const drawPictures = () => {
}, },
], ],
}); });
myChart.value.resize();
} }
}); });

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

@ -34,7 +34,11 @@ const drawPie = () => {
myChartPie.value = echarts.init( myChartPie.value = echarts.init(
document.getElementById(props.uuid) as HTMLDivElement document.getElementById(props.uuid) as HTMLDivElement
); );
analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => { analyzeChartData({
tableKey: props.tableKey,
chartId: props.uuid,
etConfig: controlData.value,
}).then((data) => {
console.log("火兔", data); console.log("火兔", data);
if (data.code == 0) { if (data.code == 0) {
let optVal = data.data; let optVal = data.data;
@ -46,6 +50,7 @@ const drawPie = () => {
containLabel: true, containLabel: true,
}; };
myChartPie.value.setOption(optVal); myChartPie.value.setOption(optVal);
myChartPie.value.resize();
} else { } else {
myChartPie.value.setOption({ myChartPie.value.setOption({
grid: { grid: {
@ -80,6 +85,7 @@ const drawPie = () => {
}, },
], ],
}); });
myChartPie.value.resize();
} }
}); });

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

@ -34,7 +34,11 @@ const drawPie = () => {
myChartPie.value = echarts.init( myChartPie.value = echarts.init(
document.getElementById(props.uuid) as HTMLDivElement document.getElementById(props.uuid) as HTMLDivElement
); );
analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => { analyzeChartData({
tableKey: props.tableKey,
chartId: props.uuid,
etConfig: controlData.value,
}).then((data) => {
console.log("火兔---->1", data); console.log("火兔---->1", data);
if (data.code == 0) { if (data.code == 0) {
let optionData = { let optionData = {
@ -92,6 +96,7 @@ const drawPie = () => {
}; };
console.log("火兔---->2", optionData); console.log("火兔---->2", optionData);
myChartPie.value.setOption(optionData); myChartPie.value.setOption(optionData);
myChartPie.value.resize();
} else { } else {
myChartPie.value.setOption({ myChartPie.value.setOption({
legend: { legend: {

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

@ -34,7 +34,11 @@ const drawRadar = () => {
myChartPie.value = echarts.init( myChartPie.value = echarts.init(
document.getElementById(props.uuid) as HTMLDivElement document.getElementById(props.uuid) as HTMLDivElement
); );
analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => { analyzeChartData({
tableKey: props.tableKey,
chartId: props.uuid,
etConfig: controlData.value,
}).then((data) => {
console.log("画图雷达---->1", data); console.log("画图雷达---->1", data);
if (data.code == 0) { if (data.code == 0) {
let radMap = data.data; let radMap = data.data;
@ -58,6 +62,7 @@ const drawRadar = () => {
], ],
}; };
myChartPie.value.setOption(optionData); myChartPie.value.setOption(optionData);
myChartPie.value.resize();
} else { } else {
myChartPie.value.setOption({ myChartPie.value.setOption({
grid: { grid: {

6
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/target.vue

@ -27,7 +27,11 @@ const listAry = ref<targetInfo>([]);
*/ */
const getTargetData = () => { const getTargetData = () => {
if (props.uuid && props.uuid != "") { if (props.uuid && props.uuid != "") {
analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => { analyzeChartData({
tableKey: props.tableKey,
chartId: props.uuid,
etConfig: controlData.value,
}).then((data) => {
console.log("获取指标数据---->1", data); console.log("获取指标数据---->1", data);
listAry.value = data.data; listAry.value = data.data;
}); });

2
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/winBox/dimMea.vue

@ -636,7 +636,7 @@ const duliangBianhua = () => {
:title="drawTitle" :title="drawTitle"
direction="rtl" direction="rtl"
:before-close="handleClose" :before-close="handleClose"
>{{ controlData.type }}--->{{ props.dimMeaType }} >
<div class="drawBodyBox"> <div class="drawBodyBox">
<el-divider <el-divider
v-if="props.dimMeaType == 3 || props.dimMeaType == 4" v-if="props.dimMeaType == 3 || props.dimMeaType == 4"

Loading…
Cancel
Save