From d19d5c1ea669bc540fe8bd782d7cce1b877f47a9 Mon Sep 17 00:00:00 2001
From: chentao <chentao@congjian.net>
Date: Thu, 11 Mar 2021 17:04:12 +0800
Subject: [PATCH] update src/components/dashboard/Histogram.vue.

---
 src/components/dashboard/Histogram.vue | 103 +++++--------------------
 1 file changed, 20 insertions(+), 83 deletions(-)

diff --git a/src/components/dashboard/Histogram.vue b/src/components/dashboard/Histogram.vue
index 9149858..4c335cf 100644
--- a/src/components/dashboard/Histogram.vue
+++ b/src/components/dashboard/Histogram.vue
@@ -8,10 +8,7 @@
     </div>
     
     <div class="histogram">
-      <ve-histogram 
-        :data="chartData" 
-        :extend="chartExtend"
-      />
+      <ve-histogram :data="chartData" :extend="chartExtend"/>
     </div>
   </div>
 </template>
@@ -21,106 +18,46 @@ export default {
   name: "Histogram",
   data() {
     this.chartExtend = {
-      // ---- legend ----
       legend: {
-        type: 'plain',  
-        bottom: -1000,
-        itemWidth: 10,  // 设置宽度
-        itemHeight: 10, // 设置高度
-        itemGap: 13, // 设置间距
-        textStyle: { //图例文字的样式
-          color: '#999',
-          fontSize: 12,
-        },
+        show: false
       },
       color: [
-        new echarts.graphic.LinearGradient(
-          0,1,0,0,[{
-          offset: 0, color: 'rgba(45, 140, 240, 0.8)'
-        },{
-          offset: 1, color: 'rgba(66, 197, 246, 0.7)'
-        }])
+        new echarts.graphic.LinearGradient( 0,1,0,0,[
+          {offset: 0, color: 'rgba(45, 140, 240, 0.8)'},
+          {offset: 1, color: 'rgba(66, 197, 246, 0.7)'}
+        ])
       ],
       series: {
         barMaxWidth: 35,
-        barGap: '90%',/*多个并排柱子设置柱子之间的间距*/
-        barCategoryGap: '50%',/*多个并排柱子设置柱子之间的间距*/
-        itemStyle: {    // 图形的形状
+        barCategoryGap: '50%',
+        itemStyle: { 
           barBorderRadius: [2, 2, 0 ,0],
         }
       },
-      //  ------  X轴 ------
       xAxis: {
-        show: true,  // 是否显示
-        position: 'bottom',  // x轴的位置
-        offset: 8, // x轴相对于默认位置的偏移
-        type: 'category',   // 轴类型， 默认为 'category'
-        nameGap: 15, // 坐标轴名称与轴线之间的距离
-        nameRotate: 0,  // 坐标轴名字旋转
-        axisLabel: {//x轴文字的配置
+        show: true,
+        position: 'bottom',
+        offset: 8,
+        type: 'category', 
+        axisLabel: {
           show: true,
           textStyle: {
             color: "#666",
           }
-        },
-        axisLine: {       // 坐标轴 轴线
-          show: false,  // 是否显示
-          lineStyle: {
-            color: '#EBEBEB',
-            width: 1,
-            type: 'solid'
-          }
         }
       },
       yAxis: {
-        show: true,  // 是否显示
-        position: 'left', // y轴位置
-        offset: 0, // y轴相对于默认位置的偏移
-        type: 'value',  // 轴类型，默认为 ‘category’
-        nameLocation: 'end', // 轴名称相对位置value
-        nameTextStyle: {    // 坐标轴名称样式
-          color: '#fff',
-          padding: [5, 0, 0, 5]  // 坐标轴名称相对位置
-        },
-        nameGap: 15, // 坐标轴名称与轴线之间的距离
-        nameRotate: 270,  // 坐标轴名字旋转
-
-        axisLine: {    // 坐标轴 轴线
-          show: false,  // 是否显示
-          // ----- 线 -------
-          lineStyle: {
-            color: '#666',
-            width: 1,
-            type: 'solid'
-          }
-        },
-        axisTick: {      // 坐标轴的刻度
-          show: false,    // 是否显示
-          inside: true,  // 是否朝内
-          length: 3,      // 长度
-          lineStyle: {
-            color: 'red',  // 默认取轴线的颜色
-            width: 1,
-            type: 'solid'
-          }
-        },
-        axisLabel: {      // 坐标轴的标签
-          show: true,    // 是否显示
-          inside: false,  // 是否朝内
-          rotate: 0,     // 旋转角度
-          margin: 8,     // 刻度标签与轴线之间的距离
-          color: '#666',  // 默认轴线的颜色
-        },
-        splitLine: {    // gird 区域中的分割线
-          show: false,   // 是否显示
+        show: true, 
+        position: 'left',
+        offset: 0,
+        type: 'value',
+        splitLine: {
+          show: false,
           lineStyle: {
             color: '#666',
             width: 1,
             type: 'dashed'
           }
-        },
-        splitArea: {     // 网格区域
-          show: false   // 是否显示，默认为false
         }
       },
     }
@@ -173,4 +110,4 @@ export default {
       }
     }
   }
-</style>
+</style>
\ No newline at end of file
-- 
Gitee