解决图例问题
This commit is contained in:
chen
parent
c78b8ca7b3
commit
f4fb0a2c11
|
|
@ -27,19 +27,6 @@
|
|||
</el-select>
|
||||
</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="block">
|
||||
<span class="demonstration">纵坐标参考列</span>
|
||||
|
|
@ -61,6 +48,20 @@
|
|||
</el-select>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
watch(() => props.rowOptions, (newVal) => {
|
||||
// 更新rowOptions2，将新数据插入到指定位置
|
||||
rowOptions2.value = [
|
||||
{ value: 'entity', label: '线索数' }, // 保留原有数据
|
||||
{ value: '线索数量', label: '线索数量' }, // 保留原有数据
|
||||
...newVal // 将新的选项添加进来
|
||||
];
|
||||
}, { immediate: true });
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ import * as echarts from 'echarts';
|
|||
placeholder="输入需要选择的实体名称"
|
||||
clearable
|
||||
/>
|
||||
<el-button type="info" @click="AddSelectedName">确定</el-button>
|
||||
<el-button type="primary" @click="AddSelectedName">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
|
|
@ -401,7 +401,7 @@ export default {
|
|||
for (let i=0;i<this.srow2.length;i++)
|
||||
{
|
||||
this.handletwodata(this.srow,this.srow2[i]);
|
||||
if (this.srow2[i]=='entity')
|
||||
if (this.srow2[i]=='线索数量')
|
||||
{
|
||||
counts[i]=this.countStrings();
|
||||
}
|
||||
|
|
@ -409,6 +409,35 @@ export default {
|
|||
counts[i]=this.countsumbystring();
|
||||
}
|
||||
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)
|
||||
{
|
||||
|
|
@ -435,7 +464,7 @@ return yAxis;
|
|||
for (let i = 0; i < counts.length; i++) {
|
||||
Series.push({
|
||||
|
||||
name: this.srow2[i],
|
||||
name: this.convertname(this.srow2)[i],
|
||||
type: this.stype,
|
||||
data: Object.values(counts[i]),
|
||||
});
|
||||
|
|
@ -454,17 +483,23 @@ return yAxis;
|
|||
}
|
||||
},
|
||||
grid: {
|
||||
right: '20%'
|
||||
right: '0%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { show: true, readOnly: false },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
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: {
|
||||
data: Object.values(this.srow2)
|
||||
data: this.convertname(this.srow2)
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
|
|
@ -630,10 +665,7 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
handleSelectedRow2(value) {
|
||||
// console.log('Selected Row2:', value);
|
||||
this.srow2=value
|
||||
if (this.selectedEntity=='emtity4' &&this.srow2.length()>1)
|
||||
{
|
||||
this.ISmul4=true;
|
||||
}
|
||||
|
||||
},
|
||||
handleSelectedRow3(value) {
|
||||
// console.log('Selected Row3:', value);
|
||||
|
|
@ -741,8 +773,8 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
this.chartInstance =markRaw( echarts.init(chartContainer));
|
||||
// console.log(chartContainer);
|
||||
let option;
|
||||
if (!this.entity)
|
||||
{
|
||||
|
||||
|
||||
if (this.stype === 'bar' || this.stype == 'line') {
|
||||
option = {
|
||||
toolbox: {
|
||||
|
|
@ -920,7 +952,9 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
|
||||
}
|
||||
else{
|
||||
option.legend.data = this.Selectedcul;
|
||||
let legend=this.convertname(this.Selectedcul);
|
||||
option.legend.data = legend;
|
||||
|
||||
if(this.gap === 'year'){
|
||||
let datas = this.mytable;
|
||||
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];
|
||||
}
|
||||
option.series.push({
|
||||
name: now_i,
|
||||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||||
type: this.stype,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
|
|
@ -984,7 +1018,7 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
else ydata[ydata.length-1] += c[now_i];
|
||||
}
|
||||
option.series.push({
|
||||
name: now_i,
|
||||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||||
type: this.stype,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
|
|
@ -1027,7 +1061,7 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
else ydata[ydata.length-1] += c[now_i];
|
||||
}
|
||||
option.series.push({
|
||||
name: now_i,
|
||||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||||
type: this.stype,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
|
|
@ -1205,7 +1239,8 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
}
|
||||
}
|
||||
else{
|
||||
option.legend.data = this.Selectedcul;
|
||||
let legend=this.convertname(this.Selectedcul);
|
||||
option.legend.data = legend;
|
||||
if(this.gap == 'year'){
|
||||
let datas = this.mytable;
|
||||
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));
|
||||
}
|
||||
option.series.push({
|
||||
name: now_i,
|
||||
name: legend(this.Selectedcul.indexOf(now_i)),
|
||||
type: this.stype,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
|
|
@ -1290,7 +1325,7 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
)break;
|
||||
}
|
||||
option.series.push({
|
||||
name: now_i,
|
||||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||||
type: this.stype,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
|
|
@ -1349,7 +1384,7 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
)break;
|
||||
}
|
||||
option.series.push({
|
||||
name: now_i,
|
||||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||||
type: this.stype,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
|
|
@ -1414,10 +1449,9 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
}
|
||||
}
|
||||
else{
|
||||
// console.log(this.Selectedcul);
|
||||
option.legend.data = this.Selectedcul;
|
||||
let legend=this.convertname(this.Selectedcul);
|
||||
option.legend.data = legend;
|
||||
for(let now_i of this.Selectedcul){
|
||||
option.legend.data = this.SelectedName;
|
||||
let datas = this.mytable;
|
||||
datas.sort((a,b) => Number(a[this.srow]) - Number(b[this.srow]));
|
||||
let sta = Number(datas[0][this.srow]);
|
||||
|
|
@ -1444,7 +1478,7 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
ri += k;
|
||||
}
|
||||
option.series.push({
|
||||
name: now_i,
|
||||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||||
type: this.stype,
|
||||
emphasis: {
|
||||
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') {
|
||||
const data = Object.entries(counts).map(([name, value]) => ({ value, name }));
|
||||
option = {
|
||||
|
|
@ -1475,35 +1515,9 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
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);
|
||||
}catch(error)
|
||||
{
|
||||
|
|
@ -1617,13 +1631,9 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
setTimeout(()=>this.drawChart(counts),500);
|
||||
}else if(this.selectedEntity=='entity4'){
|
||||
let counts=this.do_entity4();
|
||||
// console.log(counts)
|
||||
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 {
|
||||
this.$message.warning('请选择实体');
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue