NEZ-2564 fix：dashboard图表最大化功能无法正常显示

nezha-fronted/src/components/chart/chart/chartStat.vue

@@ -325,7 +325,16 @@ export default {
         }]
         if (this.chartInfo.param.sparklineMode === 'area') {
           chartOption.series[0].areaStyle = {
-            color
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: this.hexToRgb(color, 0.1)
+              },
+              {
+                offset: 1,
+                color: this.hexToRgb(color, 1)
+              }
+            ])
           }
         }
         chartOption.yAxis.max = this.maxValue

nezha-fronted/src/components/chart/chart/legend.vue

@@ -43,47 +43,6 @@
           <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value))}}</div>
         </div>
       </div>
-    </template>
-    <!-- placement=bottom -->
-    <template v-else-if="chartInfo.param.legend.placement=='bottom'">
-      <div class="legend-box">
-        <div style="display:flex">
-          <!-- 左y轴legend -->
-          <ul>
-            <li
-              v-for="(item, index) in legends"
-              :key="index"
-              v-show="!isTimeSeries||series[index].yAxisIndex!=1"
-              :class="{'legend-item--inactive': isGrey[index]}"
-              :title="item.alias ? item.alias : item.name"
-              class="legend-item"
-              @click="clickLegend(item.name, index)"
-            >
-              <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
-              <span v-else :style="{background: item.color}" class="legend-shape"></span>
-              <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
-            </li>
-          </ul>
-        </div>
-        <!-- 右y轴legend -->
-        <div class="rightYAxis-legend">
-          <ul>
-            <li
-              v-for="(item, index) in legends"
-              :key="index+'right'"
-              v-show="isTimeSeries&&series[index].yAxisIndex==1"
-              :class="{'legend-item--inactive': isGrey[index]}"
-              :title="item.alias ? item.alias : item.name"
-              class="legend-item"
-              @click="clickLegend(item.name, index)"
-            >
-              <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
-              <span v-else :style="{background: item.color}" class="legend-shape"></span>
-              <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
-            </li>
-          </ul>
-        </div>
-      </div>
     </template>
      <!-- 否则是普通形式 -->
     <template v-else>

nezha-fronted/src/components/chart/chartList.vue

@@ -44,6 +44,7 @@
         @container-resized="containerResizedEvent"
       >
         <panel-chart
+          :variablesInit="variablesInit"
           :ref="'chart' + item.id"
           @edit-chart="$emit('edit-chart', item)"
           :chart-info="item"
@@ -79,7 +80,6 @@
       <panel-chart
         :ref="'chart-fullscreen' + fullscreen.chartInfo.id"
         :chart-info="fullscreen.chartInfo"
-        :variablesInit="variablesInit"
         :from="from"
         :filter="filter"
         :is-fullscreen="true"

nezha-fronted/src/components/common/panel/panelVariables.vue

@@ -296,28 +296,42 @@ export default {
           query: encodeURIComponent(query)
         }
         this.$get(url, params).then(res => {
-          if (res.status === 'error') {
+          if (res.status === 'error' || !res.data.result.length) {
             resolve([])
             return
           }
-          const arr = res.data.result.map((metricData) => {
+          const isObject = Object.prototype.toString.call(res.data.result[0]).toLowerCase() === '[object object]'
-            let text = metricData.metric.__name__ || ''
+          if (!isObject) {
-            delete metricData.metric.__name__
+            resolve([
-            text += '{'
+              {
-            const arr = []
+                label: res.data.result[0],
-            Object.keys(metricData.metric).forEach(key => {
+                value: res.data.result[0],
-              arr.push(key + '="' + metricData.metric[key] + '"')
+                expandable: true
+              }
+            ])
+          } else {
+            const arr = res.data.result.map((metricData) => {
+              let text = ''
+              if (metricData.metric) {
+                text = metricData.metric.__name__ || ''
+                delete metricData.metric.__name__
+              }
+              text += '{'
+              const arr = []
+              Object.keys(metricData.metric).forEach(key => {
+                arr.push(key + '="' + metricData.metric[key] + '"')
+              })
+              text += arr.join(',')
+              text += '}'
+              text += ' ' + metricData.value[1] + ' ' + metricData.value[0] * 1000
+              return {
+                label: text,
+                value: text,
+                expandable: true
+              }
             })
-            text += arr.join(',')
+            resolve(arr)
-            text += '}'
+          }
-            text += ' ' + metricData.value[1] + ' ' + metricData.value[0] * 1000
-            return {
-              label: text,
-              value: text,
-              expandable: true
-            }
-          })
-          resolve(arr)
         })
       })
     },