echarts整体调整

This commit is contained in:
2025-08-13 14:51:26 +08:00
parent 763338cc2a
commit 9ad720823a
15 changed files with 68 additions and 24 deletions

View File

@ -69,9 +69,12 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF'], color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '10', bottom: '15',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',

View File

@ -86,6 +86,9 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF'], color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '15', bottom: '15',

View File

@ -79,6 +79,9 @@ export default {
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
} }
}, },
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '15', bottom: '15',

View File

@ -139,8 +139,12 @@ export default {
this.chart && this.chart.setOption({ this.chart && this.chart.setOption({
color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'], color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
grid: {
containLabel: true
},
legend: { legend: {
bottom: '10', left: 'center',
bottom: '15',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',

View File

@ -125,9 +125,12 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF'], color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '10', bottom: '15',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',

View File

@ -121,9 +121,12 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF'], color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '10', bottom: '15',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',

View File

@ -73,16 +73,21 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF','#05AEA3'], color:['#FFBD00','#3C81FF','#05AEA3'],
// legend: { legend: {
// left: 'right', left: 'center',
// bottom: '10', bottom: '15',
// },
tooltip: {},
xAxis: {
type: 'category',
name:unit,
nameLocation:'center'
}, },
grid: {
top:40,
containLabel: true
},
tooltip: {},
xAxis: [{
type: 'category',
name:`单位:${unit}`,
nameLocation:'center',
nameGap:30
}],
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
name:'充电量/放电量kWh', name:'充电量/放电量kWh',
@ -102,7 +107,6 @@ export default {
onZero:false onZero:false
} }
}], }],
grid:{top:40},
dataset:{ dataset:{
source source
}, },

View File

@ -128,9 +128,12 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF','#91cc74'], color:['#FFBD00','#3C81FF','#91cc74'],
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '10', bottom: '15',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',

View File

@ -39,9 +39,12 @@ export default {
source.push([item.dateMonth,item.chargeEnergy,item.disChargeEnergy]) source.push([item.dateMonth,item.chargeEnergy,item.disChargeEnergy])
}) })
this.chart.setOption({ this.chart.setOption({
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '10', bottom: '15',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',

View File

@ -39,9 +39,12 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#3C81FF','#FFBE29'], color:['#3C81FF','#FFBE29'],
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '10', bottom: '15',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',

View File

@ -39,9 +39,12 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#F86F70'], color:['#F86F70'],
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '10', bottom: '15',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',

View File

@ -42,9 +42,12 @@ export default {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom:'10' bottom: '15',
}, },
series: [ series: [
{ {

View File

@ -39,9 +39,12 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#FFBE01'], color:['#FFBE01'],
grid: {
containLabel: true
},
legend: { legend: {
left: 'center', left: 'center',
bottom: '10', bottom: '15',
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',

View File

@ -3,7 +3,7 @@
<zd-info></zd-info> <zd-info></zd-info>
<div class="ems-content-container ems-content-container-padding"> <div class="ems-content-container ems-content-container-padding">
<div class="content-title">数据概览</div> <div class="content-title">数据概览</div>
<el-row :gutter="32" style="background:#fff;margin:30px 0;"> <el-row :gutter="15" style="background:#fff;margin:30px 0;">
<el-col :xs="24" :sm="12" :lg="12"> <el-col :xs="24" :sm="12" :lg="12">
<dlzb-chart ref="dlzbchart"/> <dlzb-chart ref="dlzbchart"/>
</el-col> </el-col>
@ -12,7 +12,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="32" style="background:#fff;margin:0;"> <el-row :gutter="15" style="background:#fff;margin:0;">
<el-col :xs="24" :sm="8" :lg="8"> <el-col :xs="24" :sm="8" :lg="8">
<gjqs-chart ref="gjqsChart"/> <gjqs-chart ref="gjqsChart"/>
</el-col> </el-col>

View File

@ -33,14 +33,17 @@ export default {
}) })
this.chart.setOption({ this.chart.setOption({
color:['#A796FF','#FFBE01'], color:['#A796FF','#FFBE01'],
grid: {
top:30,
containLabel: true
},
legend: { legend: {
left: 'right', left: 'right',
bottom: '10', bottom: '15',
}, },
tooltip: {}, tooltip: {},
xAxis: { type: 'category' }, xAxis: { type: 'category' },
yAxis: { }, yAxis: { },
grid:{top:30},
dataset:{ dataset:{
source source
// source:[//格式 // source:[//格式