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

Write Preview
Loading…
Cancel
Save