echarts整体调整

2025-08-13 14:51:26 +08:00
parent 763338cc2a
commit 9ad720823a
15 changed files with 68 additions and 24 deletions
--- a/src/views/ems/dzjk/clpz/xftg/TempPowerChart.vue
+++ b/src/views/ems/dzjk/clpz/xftg/TempPowerChart.vue
@ -69,9 +69,12 @@ export default {
      })
      this.chart.setOption({
        color:['#FFBD00','#3C81FF'],
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
-          bottom: '10',
+          bottom: '15',
        },
        tooltip: {
          trigger: 'axis',
--- a/src/views/ems/dzjk/home/ActiveChart.vue
+++ b/src/views/ems/dzjk/home/ActiveChart.vue
@ -86,6 +86,9 @@ export default {
      })
      this.chart.setOption({
        color:['#FFBD00','#3C81FF'],
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
          bottom: '15',
--- a/src/views/ems/dzjk/home/WeekChart.vue
+++ b/src/views/ems/dzjk/home/WeekChart.vue
@ -79,6 +79,9 @@ export default {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
          bottom: '15',
--- a/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
@ -139,8 +139,12 @@ export default {

      this.chart && this.chart.setOption({
        color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
+        grid: {
+          containLabel: true
+        },
        legend: {
-          bottom: '10',
+          left: 'center',
+          bottom: '15',
        },
        tooltip: {
          trigger: 'axis',
--- a/src/views/ems/dzjk/tjbb/dcdqx/index.vue
+++ b/src/views/ems/dzjk/tjbb/dcdqx/index.vue
@ -125,9 +125,12 @@ export default {
      })
      this.chart.setOption({
        color:['#FFBD00','#3C81FF'],
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
-          bottom: '10',
+          bottom: '15',
        },
        tooltip: {
          trigger: 'axis',
--- a/src/views/ems/dzjk/tjbb/glqx/index.vue
+++ b/src/views/ems/dzjk/tjbb/glqx/index.vue
@ -121,9 +121,12 @@ export default {
      })
      this.chart.setOption({
        color:['#FFBD00','#3C81FF'],
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
-          bottom: '10',
+          bottom: '15',
        },
        tooltip: {
          trigger: 'axis',
--- a/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
+++ b/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
@ -73,16 +73,21 @@ export default {
      })
      this.chart.setOption({
        color:['#FFBD00','#3C81FF','#05AEA3'],
-        // legend: {
-        //   left: 'right',
-        //   bottom: '10',
-        // },
-        tooltip: {},
-        xAxis: {
-          type: 'category',
-          name:unit,
-          nameLocation:'center'
+        legend: {
+          left: 'center',
+          bottom: '15',
        },
+        grid: {
+          top:40,
+          containLabel: true
+        },
+        tooltip: {},
+        xAxis: [{
+          type: 'category',
+          name:`单位：${unit}`,
+          nameLocation:'center',
+          nameGap:30
+        }],
        yAxis: [{
          type: 'value',
          name:'充电量/放电量kWh',
@ -102,7 +107,6 @@ export default {
            onZero:false
          }
        }],
-        grid:{top:40},
        dataset:{
          source
        },
--- a/src/views/ems/dzjk/tjbb/pcsqx/index.vue
+++ b/src/views/ems/dzjk/tjbb/pcsqx/index.vue
@ -128,9 +128,12 @@ export default {
      })
      this.chart.setOption({
        color:['#FFBD00','#3C81FF','#91cc74'],
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
-          bottom: '10',
+          bottom: '15',
        },
        tooltip: {
          trigger: 'axis',
--- a/src/views/ems/home/DlzbChart.vue
+++ b/src/views/ems/home/DlzbChart.vue
@ -39,9 +39,12 @@ export default {
        source.push([item.dateMonth,item.chargeEnergy,item.disChargeEnergy])
      })
      this.chart.setOption({
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
-          bottom: '10',
+          bottom: '15',
        },
        tooltip: {
          trigger: 'axis',
--- a/src/views/ems/home/GjdjfbChart.vue
+++ b/src/views/ems/home/GjdjfbChart.vue
@ -39,9 +39,12 @@ export default {
      })
      this.chart.setOption({
        color:['#3C81FF','#FFBE29'],
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
-          bottom: '10',
+          bottom: '15',
        },
        tooltip: {
          trigger: 'axis',
--- a/src/views/ems/home/GjqsChart.vue
+++ b/src/views/ems/home/GjqsChart.vue
@ -39,9 +39,12 @@ export default {
      })
      this.chart.setOption({
        color:['#F86F70'],
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
-          bottom: '10',
+          bottom: '15',
        },
        tooltip: {
          trigger: 'axis',
--- a/src/views/ems/home/SbgjzbChart.vue
+++ b/src/views/ems/home/SbgjzbChart.vue
@ -42,9 +42,12 @@ export default {
        tooltip: {
          trigger: 'item'
        },
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
-          bottom:'10'
+          bottom: '15',
        },
        series: [
          {
--- a/src/views/ems/home/XtxlChart.vue
+++ b/src/views/ems/home/XtxlChart.vue
@ -39,9 +39,12 @@ export default {
      })
      this.chart.setOption({
        color:['#FFBE01'],
+        grid: {
+          containLabel: true
+        },
        legend: {
          left: 'center',
-          bottom: '10',
+          bottom: '15',
        },
        tooltip: {
          trigger: 'axis',
--- a/src/views/ems/home/index.vue
+++ b/src/views/ems/home/index.vue
@ -3,7 +3,7 @@
     <zd-info></zd-info>
      <div class="ems-content-container ems-content-container-padding">
        <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">
              <dlzb-chart ref="dlzbchart"/>
          </el-col>
@ -12,7 +12,7 @@
          </el-col>
        </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">
              <gjqs-chart ref="gjqsChart"/>
          </el-col>
--- a/src/views/ems/zddt/BarChart.vue
+++ b/src/views/ems/zddt/BarChart.vue
@ -33,14 +33,17 @@ export default {
      })
      this.chart.setOption({
        color:['#A796FF','#FFBE01'],
+        grid: {
+          top:30,
+          containLabel: true
+        },
        legend: {
          left: 'right',
-          bottom: '10',
+          bottom: '15',
        },
        tooltip: {},
        xAxis: { type: 'category' },
        yAxis: { },
-        grid:{top:30},
        dataset:{
          source
          // source:[//格式