chenyuan1
/
dianshang-qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

动态图标回显问题

Browse Source
dev-QQq
HeHaonan 2 years ago
parent a9e5d76213
commit 060092d0b4
1 changed files with 111 additions and 60 deletions
Show Stats Download Patch File Download Diff File

171
src/views/portraitModel/components/bostonAnalysis.vue
Unescape Escape View File

@ -158,7 +158,7 @@
<div class="submit" @click="step4Submit">提交</div> <div class="submit" @click="step4Submit">提交</div>
<div class="drawPoint"> <div class="drawPoint">
<div class="point"> <div class="point">
<div class="pointItem" @click="drawPointStep4('A', '#009FF1')">绘制平均消费次数X,平均消费金额Y</div> <div class="pointItem" @click="drawPointStep4('E', '#009FF1')">绘制平均消费次数X,平均消费金额Y</div>
<span>（5,1000）</span> <span>（5,1000）</span>
</div> </div>
<!-- <div class="point"> <!-- <div class="point">
@ -290,6 +290,17 @@ const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API; const baseUrl = import.meta.env.VITE_APP_BASE_API;
const dialogVisible = ref(false); const dialogVisible = ref(false);
const knowledgeFlag = ref(false); const knowledgeFlag = ref(false);
const chart1OptionData = ref([]);
const chart2OptionData = ref([]);
const chart3OptionData = ref([]);
const quadrant1 = ref("");
const quadrant2 = ref("");
const quadrant3 = ref("");
const quadrant4 = ref("");
const quadrant1Color = ref('')
const quadrant2Color = ref('')
const quadrant3Color = ref('')
const quadrant4Color = ref('')
const step1Data = ref([ const step1Data = ref([
{ {
name: "A", name: "A",
@ -586,9 +597,9 @@ const step4AnswerFlag = ref(false);
const step5AnswerFlag = ref(false); const step5AnswerFlag = ref(false);
onMounted(() => { onMounted(() => {
getData(); getData();
step3EchartInit(); // step3EchartInit();
step4EchartInit(); // step4EchartInit();
step5EchartInit(); // step5EchartInit();
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
saveData(); saveData();
@ -661,16 +672,17 @@ const step3EchartInit = () => {
}, },
borderColor: "#fff", borderColor: "#fff",
}, },
data: [ // data: [
// { value: [3, 800], name: "A" }, // // { value: [3, 800], name: "A" },
// { value: [4, 1200], name: "B" }, // // { value: [4, 1200], name: "B" },
// { value: [6, 600], name: "C" }, // // { value: [6, 600], name: "C" },
// { value: [7, 1400], name: "D" }, // // { value: [7, 1400], name: "D" },
// { value: [10, 1400], }, // // { value: [10, 1400], },
// [4, 1200], // // [4, 1200],
// [6, 600], // // [6, 600],
// [7, 1400], // // [7, 1400],
], // ],
data: chart1OptionData.value,
type: "scatter", type: "scatter",
}, },
], ],
@ -682,6 +694,12 @@ const step3EchartInit = () => {
proxy.$modal.msgError("请选择要绘制的点"); proxy.$modal.msgError("请选择要绘制的点");
return; return;
} }
//有重复的点就重新绘制
for (let i in chart1OptionData.value) {
if (chart1OptionData.value[i].name == drawPointName.value) {
chart1OptionData.value.splice(i, 1);
}
}
const pointInPixel = [param.offsetX, param.offsetY]; const pointInPixel = [param.offsetX, param.offsetY];
console.log("pointInPixel", pointInPixel); console.log("pointInPixel", pointInPixel);
// 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引 值，借助于索引值的获取到其它的信息 // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引 值，借助于索引值的获取到其它的信息
@ -695,7 +713,12 @@ const step3EchartInit = () => {
// let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel); // let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel);
// x轴数据的索引值 // x轴数据的索引值
console.log("pointInGrid", pointInGrid.value); console.log("pointInGrid", pointInGrid.value);
option.value.series[0].data.push({ // option.value.series[0].data.push({
// value: pointInGrid.value,
// name: drawPointName.value,
// color: drawPointColor.value,
// });
chart1OptionData.value.push({
value: pointInGrid.value, value: pointInGrid.value,
name: drawPointName.value, name: drawPointName.value,
color: drawPointColor.value, color: drawPointColor.value,
@ -768,16 +791,17 @@ const step4EchartInit = () => {
}, },
borderColor: "#fff", borderColor: "#fff",
}, },
data: [ // data: [
// { value: [3, 800], name: "A" }, // // { value: [3, 800], name: "A" },
// { value: [4, 1200], name: "B" }, // // { value: [4, 1200], name: "B" },
// { value: [6, 600], name: "C" }, // // { value: [6, 600], name: "C" },
// { value: [7, 1400], name: "D" }, // // { value: [7, 1400], name: "D" },
// { value: [10, 1400], }, // // { value: [10, 1400], },
// [4, 1200], // // [4, 1200],
// [6, 600], // // [6, 600],
// [7, 1400], // // [7, 1400],
], // ],
data: chart2OptionData.value,
type: "scatter", type: "scatter",
}, },
], ],
@ -789,12 +813,23 @@ const step4EchartInit = () => {
proxy.$modal.msgError("请选择要绘制的点"); proxy.$modal.msgError("请选择要绘制的点");
return; return;
} }
//有重复的点就重新绘制
for (let i in chart2OptionData.value) {
if (chart2OptionData.value[i].name == drawPointNameStep4.value) {
chart2OptionData.value.splice(i, 1);
}
}
const pointInPixel = [param.offsetX, param.offsetY]; const pointInPixel = [param.offsetX, param.offsetY];
console.log("pointInPixel4", pointInPixel); console.log("pointInPixel4", pointInPixel);
//将偏移值转化为坐标值 //将偏移值转化为坐标值
pointInGridStep4.value = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel); pointInGridStep4.value = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
console.log("pointInGrid4", pointInGridStep4.value); console.log("pointInGrid4", pointInGridStep4.value);
option2.value.series[0].data.push({ // option2.value.series[0].data.push({
// value: pointInGridStep4.value,
// name: drawPointNameStep4.value,
// color: drawPointColorStep4.value,
// });
chart2OptionData.value.push({
value: pointInGridStep4.value, value: pointInGridStep4.value,
name: drawPointNameStep4.value, name: drawPointNameStep4.value,
color: drawPointColorStep4.value, color: drawPointColorStep4.value,
@ -1063,6 +1098,14 @@ const step5EchartInit = () => {
}, },
], ],
}; };
optionStep5.value.series[0].markArea.data[0][0].name = quadrant1.value;
optionStep5.value.series[0].markArea.data[1][0].name = quadrant2.value
optionStep5.value.series[0].markArea.data[2][0].name = quadrant3.value
optionStep5.value.series[0].markArea.data[3][0].name = quadrant4.value
optionStep5.value.series[0].markArea.data[0][0].itemStyle.color = quadrant1Color.value;
optionStep5.value.series[0].markArea.data[1][0].itemStyle.color = quadrant2Color.value;
optionStep5.value.series[0].markArea.data[2][0].itemStyle.color = quadrant3Color.value;
optionStep5.value.series[0].markArea.data[3][0].itemStyle.color = quadrant4Color.value;
var chartDom = document.getElementById("charts3"); var chartDom = document.getElementById("charts3");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom, "dark");
optionStep5.value && myChart.setOption(optionStep5.value); optionStep5.value && myChart.setOption(optionStep5.value);
@ -1162,25 +1205,25 @@ const step2Submit = () => {
}; };
const step3Submit = () => { const step3Submit = () => {
step3Error.value = 0; step3Error.value = 0;
for (let i in option.value.series[0].data) { for (let i in chart1OptionData.value) {
console.log(option.value.series[0].data[i]); // console.log(option.value.series[0].data[i]);
if (option.value.series[0].data[i].name == "A") { if (chart1OptionData.value[i].name == "A") {
if (Math.round(option.value.series[0].data[i].value[0]) != 3 || Math.round(option.value.series[0].data[i].value[1]) != 800) { if (Math.round(chart1OptionData.value[i].value[0]) != 3 || Math.round(chart1OptionData.value[i].value[1]) != 800) {
step3Error.value++; step3Error.value++;
} }
} }
if (option.value.series[0].data[i].name == "B") { if (chart1OptionData.value[i].name == "B") {
if (Math.round(option.value.series[0].data[i].value[0]) != 4 || Math.round(option.value.series[0].data[i].value[1]) != 1200) { if (Math.round(chart1OptionData.value[i].value[0]) != 4 || Math.round(chart1OptionData.value[i].value[1]) != 1200) {
step3Error.value++; step3Error.value++;
} }
} }
if (option.value.series[0].data[i].name == "C") { if (chart1OptionData.value[i].name == "C") {
if (Math.round(option.value.series[0].data[i].value[0]) != 6 || Math.round(option.value.series[0].data[i].value[1]) != 600) { if (Math.round(chart1OptionData.value[i].value[0]) != 6 || Math.round(chart1OptionData.value[i].value[1]) != 600) {
step3Error.value++; step3Error.value++;
} }
} }
if (option.value.series[0].data[i].name == "D") { if (chart1OptionData.value[i].name == "D") {
if (Math.round(option.value.series[0].data[i].value[0]) != 7 || Math.round(option.value.series[0].data[i].value[1]) != 1400) { if (Math.round(chart1OptionData.value[i].value[0]) != 7 || Math.round(chart1OptionData.value[i].value[1]) != 1400) {
step3Error.value++; step3Error.value++;
} }
} }
@ -1188,13 +1231,17 @@ const step3Submit = () => {
console.log(step3Error.value, "错误数"); console.log(step3Error.value, "错误数");
proxy.$modal.msgSuccess("提交成功"); proxy.$modal.msgSuccess("提交成功");
step3AnswerFlag.value = true; step3AnswerFlag.value = true;
// chart2OptionData.value = chart1OptionData.value;
// step4EchartInit();
}; };
const step4Submit = () => { const step4Submit = () => {
step4Error.value = 0; step4Error.value = 0;
for (let i in option2.value.series[0].data) { for (let i in chart2OptionData.value) {
console.log(option2.value.series[0].data[i]); // console.log(option2.value.series[0].data[i]);
if (option2.value.series[0].data[i].name == "A") {
if (Math.round(option2.value.series[0].data[i].value[0]) != 5 || Math.round(option2.value.series[0].data[i].value[1]) != 1000) { if (chart2OptionData.value[i].name == "E") {
if (Math.round(chart2OptionData.value[i].value[0]) != 5 || Math.round(chart2OptionData.value[i].value[1]) != 1000) {
console.log(chart2OptionData.value[i]);
step4Error.value++; step4Error.value++;
} }
} }
@ -1263,16 +1310,16 @@ const saveData = () => {
stepSixD: step1Data.value[3].params2, stepSixD: step1Data.value[3].params2,
stepSevenA: step2Data.value[4].params1, stepSevenA: step2Data.value[4].params1,
stepSevenB: step2Data.value[4].params2, stepSevenB: step2Data.value[4].params2,
// stepSevenC: JSON.stringify(option.value.series[0].data), stepSevenC: JSON.stringify(chart1OptionData.value),
// stepSevenD: step2Data.value[5].params, stepSevenD: JSON.stringify(chart2OptionData.value),
// stepEightA: step2Data.value[6].params, stepEightA: optionStep5.value.series[0].markArea.data[0][0].name,
// stepEightB: step2Data.value[7].params, stepEightB: optionStep5.value.series[0].markArea.data[1][0].name,
// stepEightC: step2Data.value[8].params, stepEightC: optionStep5.value.series[0].markArea.data[2][0].name,
// stepEightD: step2Data.value[9].params, stepEightD: optionStep5.value.series[0].markArea.data[3][0].name,
// stepNineA: step2Data.value[10].params, stepNineA: optionStep5.value.series[0].markArea.data[0][0].itemStyle.color,
// stepNineB: step2Data.value[11].params, stepNineB: optionStep5.value.series[0].markArea.data[1][0].itemStyle.color,
// stepNineC: step2Data.value[12].params, stepNineC: optionStep5.value.series[0].markArea.data[2][0].itemStyle.color,
// stepNineD: step2Data.value[13].params, stepNineD: optionStep5.value.series[0].markArea.data[3][0].itemStyle.color,
// stepTenA: step2Data.value[14].params, // stepTenA: step2Data.value[14].params,
// stepTenB: step2Data.value[15].params, // stepTenB: step2Data.value[15].params,
// stepTenC: step2Data.value[16].params, // stepTenC: step2Data.value[16].params,
@ -1326,16 +1373,17 @@ const getData = () => {
step1Data.value[3].params2 = res.data.stepSixD; step1Data.value[3].params2 = res.data.stepSixD;
step2Data.value[4].params1 = res.data.stepSevenA; step2Data.value[4].params1 = res.data.stepSevenA;
step2Data.value[4].params2 = res.data.stepSevenB; step2Data.value[4].params2 = res.data.stepSevenB;
// option.value.series[0].data = JSON.parse(res.data.stepSevenC); chart1OptionData.value = JSON.parse(res.data.stepSevenC);
// step2Data.value[5].params = res.data.stepSevenD; // console.log(JSON.parse(res.data.stepSevenC),'666');
// step2Data.value[6].params = res.data.stepEightA; chart2OptionData.value = JSON.parse(res.data.stepSevenD);
// step2Data.value[7].params = res.data.stepEightB; quadrant1.value = res.data.stepEightA;
// step2Data.value[8].params = res.data.stepEightC; quadrant2.value = res.data.stepEightB;
// step2Data.value[9].params = res.data.stepEightD; quadrant3.value = res.data.stepEightC;
// step2Data.value[10].params = res.data.stepNineA; quadrant4.value = res.data.stepEightD;
// step2Data.value[11].params = res.data.stepNineB; quadrant1Color.value = res.data.stepNineA;
// step2Data.value[12].params = res.data.stepNineC; quadrant2Color.value = res.data.stepNineB;
// step2Data.value[13].params = res.data.stepNineD; quadrant3Color.value = res.data.stepNineC;
quadrant4Color.value = res.data.stepNineD;
// step2Data.value[14].params = res.data.stepTenA; // step2Data.value[14].params = res.data.stepTenA;
// step2Data.value[15].params = res.data.stepTenB; // step2Data.value[15].params = res.data.stepTenB;
// step2Data.value[16].params = res.data.stepTenC; // step2Data.value[16].params = res.data.stepTenC;
@ -1363,6 +1411,9 @@ const getData = () => {
// step5DataTable3.value[4].params1 = res.data.stepNewSix; // step5DataTable3.value[4].params1 = res.data.stepNewSix;
// step5DataTable3.value[4].params2 = res.data.stepNewEight; // step5DataTable3.value[4].params2 = res.data.stepNewEight;
// console.log(JSON.parse(res.data.stepSevenC)); // console.log(JSON.parse(res.data.stepSevenC));
step3EchartInit();
step4EchartInit();
step5EchartInit();
}) })
.catch((error) => {}); .catch((error) => {});
}; };

Write Preview
Loading…
Cancel
Save