SheYuWu03
/
front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

解决图例问题

This commit is contained in:
chen 2024-07-11 19:58:42 +08:00
parent c78b8ca7b3
commit f4fb0a2c11
3 changed files with 89 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/graph/Entity1Form.vue
View File

@ -26,20 +26,7 @@
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="demo-select">
<div class="block">
<span class="demonstration">图形样式</span>
<el-select v-model="selectedChartType" placeholder="请选择图形样式">
<el-option
v-for="type in chartTypes"
:key="type.value"
:label="type.label"
:value="type.value"
></el-option>
</el-select>
</div>
</div>
<div class="demo-select"> <div class="demo-select">
<div class="block"> <div class="block">
<span class="demonstration">纵坐标参考列</span> <span class="demonstration">纵坐标参考列</span>
@ -61,6 +48,20 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="demo-select">
<div class="block">
<span class="demonstration">图形样式</span>
<el-select v-model="selectedChartType" placeholder="请选择图形样式">
<el-option
v-for="type in chartTypes"
:key="type.value"
:label="type.label"
:value="type.value"
></el-option>
</el-select>
</div>
</div>
</div> </div>
</template> </template>

2
src/components/graph/Entity4Form.vue
View File

@ -73,7 +73,7 @@
watch(() => props.rowOptions, (newVal) => { watch(() => props.rowOptions, (newVal) => {
// 更新rowOptions2，将新数据插入到指定位置 // 更新rowOptions2，将新数据插入到指定位置
rowOptions2.value = [ rowOptions2.value = [
{ value: 'entity', label: '线索数' }, // 保留原有数据 { value: '线索数量', label: '线索数量' }, // 保留原有数据
...newVal // 将新的选项添加进来 ...newVal // 将新的选项添加进来
]; ];
}, { immediate: true }); }, { immediate: true });

136
src/views/ShowGraph.vue
View File

@ -51,7 +51,7 @@ import * as echarts from 'echarts';
placeholder="输入需要选择的实体名称" placeholder="输入需要选择的实体名称"
clearable clearable
/> />
<el-button type="info" @click="AddSelectedName">确定</el-button> <el-button type="primary" @click="AddSelectedName">确定</el-button>
</div> </div>
</div> </div>
<el-divider /> <el-divider />
@ -401,7 +401,7 @@ export default {
for (let i=0;i<this.srow2.length;i++) for (let i=0;i<this.srow2.length;i++)
{ {
this.handletwodata(this.srow,this.srow2[i]); this.handletwodata(this.srow,this.srow2[i]);
if (this.srow2[i]=='entity') if (this.srow2[i]=='线索数量')
{ {
counts[i]=this.countStrings(); counts[i]=this.countStrings();
} }
@ -409,6 +409,35 @@ export default {
counts[i]=this.countsumbystring(); counts[i]=this.countsumbystring();
} }
return counts; return counts;
},
convertname(cul)
{
const selectname=[];
for (let i=0;i<cul.length;i++)
{
if (cul[i]=='线索数量')
{
selectname.push('线索数量')
}
else
{
let foundLabel = null;
let num=cul[i].match(/\d+/)
foundLabel = this.mycolumns[num-1].label;
selectname.push(foundLabel)
}
}
console.log(selectname)
return selectname;
}, },
generateyAxis(counts) generateyAxis(counts)
{ {
@ -435,7 +464,7 @@ return yAxis;
for (let i = 0; i < counts.length; i++) { for (let i = 0; i < counts.length; i++) {
Series.push({ Series.push({
name: this.srow2[i], name: this.convertname(this.srow2)[i],
type: this.stype, type: this.stype,
data: Object.values(counts[i]), data: Object.values(counts[i]),
}); });
@ -454,17 +483,23 @@ return yAxis;
} }
}, },
grid: { grid: {
right: '20%' right: '0%'
}, },
toolbox: { toolbox: {
feature: { show: true,
dataView: { show: true, readOnly: false }, orient: 'vertical',
restore: { show: true }, left: 'right',
saveAsImage: { show: true } top: 'center',
} feature: {
}, mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: { legend: {
data: Object.values(this.srow2) data: this.convertname(this.srow2)
}, },
xAxis: [ xAxis: [
{ {
@ -630,10 +665,7 @@ currentDate.setDate(currentDate.getDate()+1);
handleSelectedRow2(value) { handleSelectedRow2(value) {
// console.log('Selected Row2:', value); // console.log('Selected Row2:', value);
this.srow2=value this.srow2=value
if (this.selectedEntity=='emtity4' &&this.srow2.length()>1)
{
this.ISmul4=true;
}
}, },
handleSelectedRow3(value) { handleSelectedRow3(value) {
// console.log('Selected Row3:', value); // console.log('Selected Row3:', value);
@ -741,8 +773,8 @@ currentDate.setDate(currentDate.getDate()+1);
this.chartInstance =markRaw( echarts.init(chartContainer)); this.chartInstance =markRaw( echarts.init(chartContainer));
// console.log(chartContainer); // console.log(chartContainer);
let option; let option;
if (!this.entity)
{
if (this.stype === 'bar' || this.stype == 'line') { if (this.stype === 'bar' || this.stype == 'line') {
option = { option = {
toolbox: { toolbox: {
@ -920,7 +952,9 @@ currentDate.setDate(currentDate.getDate()+1);
} }
else{ else{
option.legend.data = this.Selectedcul; let legend=this.convertname(this.Selectedcul);
option.legend.data = legend;
if(this.gap === 'year'){ if(this.gap === 'year'){
let datas = this.mytable; let datas = this.mytable;
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow])) datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
@ -939,7 +973,7 @@ currentDate.setDate(currentDate.getDate()+1);
else ydata[ydata.length-1] += c[now_i]; else ydata[ydata.length-1] += c[now_i];
} }
option.series.push({ option.series.push({
name: now_i, name: legend[this.Selectedcul.indexOf(now_i)],
type: this.stype, type: this.stype,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -984,7 +1018,7 @@ currentDate.setDate(currentDate.getDate()+1);
else ydata[ydata.length-1] += c[now_i]; else ydata[ydata.length-1] += c[now_i];
} }
option.series.push({ option.series.push({
name: now_i, name: legend[this.Selectedcul.indexOf(now_i)],
type: this.stype, type: this.stype,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -1027,7 +1061,7 @@ currentDate.setDate(currentDate.getDate()+1);
else ydata[ydata.length-1] += c[now_i]; else ydata[ydata.length-1] += c[now_i];
} }
option.series.push({ option.series.push({
name: now_i, name: legend[this.Selectedcul.indexOf(now_i)],
type: this.stype, type: this.stype,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -1205,7 +1239,8 @@ currentDate.setDate(currentDate.getDate()+1);
} }
} }
else{ else{
option.legend.data = this.Selectedcul; let legend=this.convertname(this.Selectedcul);
option.legend.data = legend;
if(this.gap == 'year'){ if(this.gap == 'year'){
let datas = this.mytable; let datas = this.mytable;
datas.sort((a,b) => new Date(a[this.srow2]) - new Date(b[this.srow2])) datas.sort((a,b) => new Date(a[this.srow2]) - new Date(b[this.srow2]))
@ -1236,7 +1271,7 @@ currentDate.setDate(currentDate.getDate()+1);
ydata.push(Number(0)); ydata.push(Number(0));
} }
option.series.push({ option.series.push({
name: now_i, name: legend(this.Selectedcul.indexOf(now_i)),
type: this.stype, type: this.stype,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -1290,7 +1325,7 @@ currentDate.setDate(currentDate.getDate()+1);
)break; )break;
} }
option.series.push({ option.series.push({
name: now_i, name: legend[this.Selectedcul.indexOf(now_i)],
type: this.stype, type: this.stype,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -1349,7 +1384,7 @@ currentDate.setDate(currentDate.getDate()+1);
)break; )break;
} }
option.series.push({ option.series.push({
name: now_i, name: legend[this.Selectedcul.indexOf(now_i)],
type: this.stype, type: this.stype,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -1414,10 +1449,9 @@ currentDate.setDate(currentDate.getDate()+1);
} }
} }
else{ else{
// console.log(this.Selectedcul); let legend=this.convertname(this.Selectedcul);
option.legend.data = this.Selectedcul; option.legend.data = legend;
for(let now_i of this.Selectedcul){ for(let now_i of this.Selectedcul){
option.legend.data = this.SelectedName;
let datas = this.mytable; let datas = this.mytable;
datas.sort((a,b) => Number(a[this.srow]) - Number(b[this.srow])); datas.sort((a,b) => Number(a[this.srow]) - Number(b[this.srow]));
let sta = Number(datas[0][this.srow]); let sta = Number(datas[0][this.srow]);
@ -1444,7 +1478,7 @@ currentDate.setDate(currentDate.getDate()+1);
ri += k; ri += k;
} }
option.series.push({ option.series.push({
name: now_i, name: legend[this.Selectedcul.indexOf(now_i)],
type: this.stype, type: this.stype,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -1455,6 +1489,12 @@ currentDate.setDate(currentDate.getDate()+1);
} }
} }
} }
else if (this.selectedEntity=='entity4')
{
console.log(123)
option=this.generateOptions(counts);
console.log(option)
}
} else if (this.stype === 'pie') { } else if (this.stype === 'pie') {
const data = Object.entries(counts).map(([name, value]) => ({ value, name })); const data = Object.entries(counts).map(([name, value]) => ({ value, name }));
option = { option = {
@ -1475,35 +1515,9 @@ currentDate.setDate(currentDate.getDate()+1);
xAxis: { show: false }, // 不显示区间横轴 xAxis: { show: false }, // 不显示区间横轴
}; };
} }
}
else{
option = {
legend: {},
tooltip: {},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
dataset: {
source: counts
},
xAxis: [
{ type: 'category', gridIndex: 0 },
{ type: 'category', gridIndex: 1 }
],
yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
grid: [{ bottom: '55%' }, { top: '55%' }],
series: this.generateSeries(counts)
};
}
if (this.selectedEntity=='entity4')
{
option=this.generateOptions(counts);
// console.log(option)
}
this.chartInstance.setOption(option); this.chartInstance.setOption(option);
}catch(error) }catch(error)
{ {
@ -1617,13 +1631,9 @@ currentDate.setDate(currentDate.getDate()+1);
setTimeout(()=>this.drawChart(counts),500); setTimeout(()=>this.drawChart(counts),500);
}else if(this.selectedEntity=='entity4'){ }else if(this.selectedEntity=='entity4'){
let counts=this.do_entity4(); let counts=this.do_entity4();
// console.log(counts)
setTimeout(()=>this.drawChart(counts),500); setTimeout(()=>this.drawChart(counts),500);
} }
else if (this.selectedEntity=='entity5'){
const counts=this.count_sum_time();
// console.log(counts)
setTimeout(()=>this.drawChart(counts),500);}
else { else {
this.$message.warning('请选择实体'); this.$message.warning('请选择实体');
} }