前端：新首页调整

src/dashoo.cn/frontend_web/src/pages/index.vue

@@ -28,13 +28,45 @@
         <div class="chart-box-row-item">
           <div class="item-more-button" @click="moreButton('type')"><span>更多</span></div>
           <div class="item-chart-body">
-            <div id="supplier-type" class="item-high-chart" style="margin-left: 1px" :option="supplierTypeOptions"></div>
+            <div id="supplier-type" class="item-high-chart" :option="supplierTypeOptions"></div>
+            <div class="item-high-legend">
+              <div class="legend">
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #c7000a"></div>
+                  <div class="content">供应商 {{ GoodsNum }} 家</div>
+                </div>
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #007fbb"></div>
+                  <div class="content">服务商 {{ TecNum }} 家</div>
+                </div>
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #6c757d"></div>
+                  <div class="content">承包商 {{ BasNum }} 家</div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="chart-box-row-item">
           <div class="item-more-button" @click="moreButton('access')"><span>更多</span></div>
           <div class="item-chart-body">
-            <div id="access-type" class="item-high-chart" style="margin-left: 1px" :option="accessTypeOptions"></div>
+            <div id="access-type" class="item-high-chart" :option="accessTypeOptions"></div>
+            <div class="item-high-legend">
+              <div class="legend">
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #c7000a"></div>
+                  <div class="content">评审准入 {{ ReviewNum }} 家</div>
+                </div>
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #007fbb"></div>
+                  <div class="content">招标准入 {{ TenderNum }} 家</div>
+                </div>
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #6c757d"></div>
+                  <div class="content">战略准入 {{ StrategicNum }} 家</div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -42,13 +74,49 @@
         <div class="chart-box-row-item">
           <div class="item-more-button" @click="moreButton('level')"><span>更多</span></div>
           <div class="item-chart-body">
-            <div id="supplier-level" class="item-high-chart" style="margin-left: 30px" :option="supplierLevelOptions"></div>
+            <div id="supplier-level" class="item-high-chart" :option="supplierLevelOptions"></div>
+            <div class="item-high-legend">
+              <div class="legend">
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #c7000a"></div>
+                  <div class="content">一级供应商 {{ GoodsNum }} 家</div>
+                </div>
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #007fbb"></div>
+                  <div class="content">二级制造商 {{ TecNum }} 家</div>
+                </div>
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #6c757d"></div>
+                  <div class="content">二级贸易商/代理商 {{ BasNum }} 家</div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="chart-box-row-item">
           <div class="item-more-button" @click="moreButton('scale')"><span>更多</span></div>
           <div class="item-chart-body">
             <div id="supplier-scale" class="item-high-chart" :option="supplierScaleOption"></div>
+            <div class="item-high-legend">
+              <div class="legend">
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #c7000a"></div>
+                  <div class="content">注册资金500万以下 {{ RegCapitalSmall }} 家</div>
+                </div>
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #007fbb"></div>
+                  <div class="content">注册资金500万-1000万 {{ RegCapital2 }} 家</div>
+                </div>
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #6c757d"></div>
+                  <div class="content">注册资金1000万-2000万 {{ RegCapital3 }} 家</div>
+                </div>
+                <div class="legend-row">
+                  <div class="color-box" style="background-color: #0099CC"></div>
+                  <div class="content">注册资金2000万-5000万 {{ RegCapital4 }} 家</div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -164,17 +232,14 @@
             },
             series: [{
               name: '供应商',
-              // color: '#4A4AFF',
               // data: [this.LineTypeRecentFive[0].GoodsNum, this.LineTypeRecentFive[1].GoodsNum, this.LineTypeRecentFive[2].GoodsNum, this.LineTypeRecentFive[3].GoodsNum, this.LineTypeRecentFive[4].GoodsNum]
-              data: [0, 0, 0, 0, 0, this.GoodsNum]
+              data: [0, 0, 0, 0, this.GoodsNum]
             }, {
               name: '服务商',
-              // color: '#00CACA',
-              data: [0, 0, 0, 0, 0, this.TecNum]
+              data: [0, 0, 0, 0, this.TecNum]
             }, {
               name: '承包商',
-              // color: 'rgba(184,210,124)',
-              data: [0, 0, 0, 0, 0, this.BasNum]
+              data: [0, 0, 0, 0, this.BasNum]
             }],
             credits: {
               enabled: false // 不显示LOGO
@@ -185,11 +250,6 @@
                   maxWidth: 500
                 },
                 chartOptions: {
-                  // legend: {
-                  //   layout: 'horizontal',
-                  //   align: 'center',
-                  //   verticalAlign: 'bottom'
-                  // }
                   legend: {
                     layout: 'center',
                     align: 'right',
@@ -227,16 +287,13 @@
             },
             series: [{
               name: '评审准入',
-              // color: '#4A4AFF',
-              data: [0, 0, 0, 0, 0, this.ReviewNum]
+              data: [0, 0, 0, 0, this.ReviewNum]
             }, {
               name: '招标准入',
-              // color: '#00CACA',
-              data: [0, 0, 0, 0, 0, this.TenderNum]
+              data: [0, 0, 0, 0, this.TenderNum]
             }, {
               name: '战略准入',
-              // color: 'rgba(184,210,124)',
-              data: [0, 0, 0, 0, 0, this.StrategicNum]
+              data: [0, 0, 0, 0, this.StrategicNum]
             }],
             credits: {
               enabled: false // 不显示LOGO
@@ -247,11 +304,6 @@
                   maxWidth: 500
                 },
                 chartOptions: {
-                  // legend: {
-                  //   layout: 'horizontal',
-                  //   align: 'center',
-                  //   verticalAlign: 'bottom'
-                  // }
                   legend: {
                     layout: 'center',
                     align: 'right',
@@ -289,16 +341,13 @@
             },
             series: [{
               name: '一级供应商',
-              // color: '#4A4AFF',
-              data: [0, 0, 0, 0, 0, this.OneLevelGoodsNum]
+              data: [0, 0, 0, 0, this.OneLevelGoodsNum]
             }, {
               name: '二级制造商',
-              // color: '#00CACA',
-              data: [0, 0, 0, 0, 0, this.TwoLevelMakeNum]
+              data: [0, 0, 0, 0, this.TwoLevelMakeNum]
             }, {
               name: '二级贸易商/代理商',
-              // color: 'rgba(184,210,124)',
-              data: [0, 0, 0, 0, 0, this.TwoLevelNotMakeNum]
+              data: [0, 0, 0, 0, this.TwoLevelNotMakeNum]
             }],
             credits: {
               enabled: false // 不显示LOGO
@@ -309,11 +358,6 @@
                   maxWidth: 500
                 },
                 chartOptions: {
-                  // legend: {
-                  //   layout: 'horizontal',
-                  //   align: 'center',
-                  //   verticalAlign: 'bottom'
-                  // }
                   legend: {
                     layout: 'center',
                     align: 'right',
@@ -352,19 +396,17 @@
             series: [{
               name: '注册资金500万以下',
               // color: '#4A4AFF',
-              data: [0, 0, 0, 0, 0, this.RegCapitalSmall]
+              data: [0, 0, 0, 0, this.RegCapitalSmall]
             }, {
               name: '注册资金500万-1000万',
               // color: '#00CACA',
-              data: [0, 0, 0, 0, 0, this.RegCapital2]
+              data: [0, 0, 0, 0, this.RegCapital2]
             }, {
               name: '注册资金1000万-2000万',
-              // color: 'rgba(184,210,124)',
-              data: [0, 0, 0, 0, 0, this.RegCapital3]
+              data: [0, 0, 0, 0, this.RegCapital3]
             }, {
               name: '注册资金2000万-5000万',
-              // color: '#E87C25',
-              data: [0, 0, 0, 0, 0, this.RegCapital4]
+              data: [0, 0, 0, 0, this.RegCapital4]
             }],
             credits: {
               enabled: false // 不显示LOGO
@@ -375,11 +417,6 @@
                   maxWidth: 500
                 },
                 chartOptions: {
-                  // legend: {
-                  //   layout: 'horizontal',
-                  //   align: 'center',
-                  //   verticalAlign: 'bottom'
-                  // }
                   legend: {
                     layout: 'center',
                     align: 'right',
@@ -448,7 +485,6 @@
             chart: {
               type: 'pie',
               backgroundColor: 'rgba(0,0,0,0)',
-              marginLeft: 1, // 饼图距左距离
               options3d: {
                 enabled: true,
                 alpha: 45,
@@ -462,7 +498,7 @@
             },
             plotOptions: {
               pie: {
-                size: '70%', // 饼图大小
+                size: '60%', // 饼图大小
                 allowPointSelect: false, // 设置饼图不可点击选择
                 cursor: 'pointer',
                 depth: 35, // 饼图的厚度
@@ -483,28 +519,19 @@
             series: [{
               type: 'pie',
               name: '占比',
-              // #6c757d #007fbb  rgba(200,55,52)
               data: [
                 {
                   name: '供应商  ' + res.data.GoodsNum + ' 家',
-                  // color: 'rgba(47,81,119)',
-                  // color: 'rgba(255,140,0)',
-                  // color: '#4A4AFF',
                   y: res.data.GoodsNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '服务商  ' + res.data.TecNum + ' 家',
-                  // color: '#E87C25',
-                  // color: '#00CACA',
-                  // color: '#00CACA',
                   y: res.data.TecNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '承包商  ' + res.data.BasNum + ' 家',
-                  // color: '#4A4AFF',
-                  // color: 'rgba(184,210,124)',
                   y: res.data.BasNum,
                   sliced: false, // 是否默认突出
                   selected: false
@@ -515,30 +542,12 @@
               enabled: false // 不显示LOGO
             },
             legend: {
-              x: -10,
-              enabled: true,
-              layout: 'vertical',
-              align: 'right',
-              verticalAlign: 'bottom', // middle bottom
-              borderWidth: 0,
-              borderRadius: 0,
-              itemMarginTop: 10, // 图例每行举上高度
-              itemMarginBottom: 10,
-              itemStyle: {
-                fontWeight: 'bold',
-                fontSize: 18 // 图例项文字大小
-              },
-              squareSymbol: true, // 默认就是true
-              itemDistance: 150, // 图例项间距
-              symbolHeight: 12,
-              symbolWidth: 12,
-              symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
+              enabled: false
             }
           })
           this.accessTypeOptions = new Highcharts.Chart('access-type', {
             chart: {
               type: 'pie',
-              marginLeft: 1, // 饼图距左距离
               options3d: {
                 enabled: true,
                 alpha: 45,
@@ -552,7 +561,7 @@
             },
             plotOptions: {
               pie: {
-                size: '70%', // 饼图大小
+                size: '60%', // 饼图大小
                 allowPointSelect: false, // 设置饼图不可点击选择
                 cursor: 'pointer',
                 depth: 35, // 饼图的厚度
@@ -573,24 +582,19 @@
             series: [{
               type: 'pie',
               name: '占比',
-              // #6c757d #007fbb  #c7000a
               data: [
                 {
                   name: '评审准入  ' + res.data.ReviewNum + ' 家',
-                  // color: 'rgba(200,55,52)',
-                  // color: '#4A4AFF',
                   y: res.data.ReviewNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '招标准入  ' + res.data.TenderNum + ' 家',
-                  // color: '#00CACA',
                   y: res.data.TenderNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '战略准入  ' + res.data.StrategicNum + ' 家',
-                  // color: 'rgba(184,210,124)',
                   y: res.data.StrategicNum,
                   sliced: false, // 是否默认突出
                   selected: false
@@ -601,29 +605,12 @@
               enabled: false // 不显示LOGO
             },
             legend: {
-              enabled: true,
-              layout: 'vertical',
-              align: 'right',
-              verticalAlign: 'bottom',
-              borderWidth: 0,
-              borderRadius: 0,
-              itemMarginTop: 10,
-              itemMarginBottom: 10,
-              itemStyle: {
-                fontWeight: 'bold',
-                fontSize: 18 // 图例项文字大小
-              },
-              squareSymbol: true, // 默认就是true
-              itemDistance: 150, // 图例项间距
-              symbolHeight: 12,
-              symbolWidth: 12,
-              symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
+              enabled: false
             }
           })
           this.supplierLevelOptions = new Highcharts.Chart('supplier-level', {
             chart: {
               type: 'pie',
-              marginLeft: 1, // 饼图距左距离
               options3d: {
                 enabled: true,
                 alpha: 45,
@@ -637,7 +624,7 @@
             },
             plotOptions: {
               pie: {
-                size: '70%', // 饼图大小
+                size: '60%', // 饼图大小
                 allowPointSelect: false, // 设置饼图不可点击选择
                 cursor: 'pointer',
                 depth: 35, // 饼图的厚度
@@ -658,23 +645,19 @@
             series: [{
               type: 'pie',
               name: '占比',
-              // #6c757d #4A4AFF  #c7000a
               data: [
                 {
                   name: '一级供应商  ' + res.data.OneLevelGoodsNum + ' 家',
-                  // color: '#4A4AFF',
                   y: res.data.OneLevelGoodsNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '二级制造商  ' + res.data.TwoLevelMakeNum + ' 家',
-                  // color: '#00CACA',
                   y: res.data.TwoLevelMakeNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '二级贸易/代理商  ' + res.data.TwoLevelNotMakeNum + ' 家',
-                  // color: 'rgba(184,210,124)',
                   y: res.data.TwoLevelNotMakeNum,
                   sliced: false, // 是否默认突出
                   selected: false
@@ -685,29 +668,12 @@
               enabled: false // 不显示LOGO
             },
             legend: {
-              enabled: true,
-              layout: 'vertical',
-              align: 'right',
-              verticalAlign: 'bottom',
-              borderWidth: 0,
-              borderRadius: 0,
-              itemMarginTop: 10,
-              itemMarginBottom: 10,
-              itemStyle: {
-                fontWeight: 'bold',
-                fontSize: 18 // 图例项文字大小
-              },
-              squareSymbol: true, // 默认就是true
-              itemDistance: 150, // 图例项间距
-              symbolHeight: 12,
-              symbolWidth: 12,
-              symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
+              enabled: false
             }
           })
           this.supplierScaleOption = new Highcharts.Chart('supplier-scale', {
             chart: {
               type: 'pie',
-              marginLeft: 1, // 饼图距左距离
               options3d: {
                 enabled: true,
                 alpha: 45,
@@ -721,7 +687,7 @@
             },
             plotOptions: {
               pie: {
-                size: '100%', // 饼图大小
+                size: '60%', // 饼图大小
                 allowPointSelect: false, // 设置饼图不可点击选择
                 cursor: 'pointer',
                 depth: 35, // 饼图的厚度
@@ -742,31 +708,24 @@
             series: [{
               type: 'pie',
               name: '占比',
-              // #6c757d #4A4AFF  #c7000a
               data: [
                 {
                   name: '注册资金500万以下  ' + res.data.RegCapitalSmall + ' 家',
-                  // color: '#FE8463',
-                  // color: 'rgba(200,55,52)',
-                  // color: '#4A4AFF',
                   y: res.data.RegCapitalSmall,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '注册资金500万-1000万  ' + res.data.RegCapital2 + ' 家',
-                  // color: '#00CACA',
                   y: res.data.RegCapital2,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '注册资金1000万-2000万  ' + res.data.RegCapital3 + ' 家',
-                  // color: 'rgba(184,210,124)',
                   y: res.data.RegCapital3,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '注册资金2000万-5000万  ' + res.data.RegCapital4 + ' 家',
-                  // color: '#E87C25',
                   y: res.data.RegCapital4,
                   sliced: false, // 是否默认突出
                   selected: false
@@ -777,23 +736,7 @@
               enabled: false // 不显示LOGO
             },
             legend: {
-              enabled: true,
-              layout: 'vertical',
-              align: 'right',
-              verticalAlign: 'bottom',
-              borderWidth: 0,
-              borderRadius: 0,
-              itemMarginTop: 10,
-              itemMarginBottom: 10,
-              itemStyle: {
-                fontWeight: 'bold',
-                fontSize: 18 // 图例项文字大小
-              },
-              squareSymbol: true, // 默认就是true
-              itemDistance: 10, // 图例项间距
-              symbolHeight: 12,
-              symbolWidth: 12,
-              symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
+              enabled: false
             }
           })
           this.downloading = false
@@ -805,7 +748,7 @@
           // this.BasNum = res.data.BasNum
           // this.TecNum = res.data.TecNum
           this.LineTypeRecentFive = res.data
-          console.log('近五年zheixan :' + res.data[0].GoodsNum)
+          console.log('近五年折线 :' + res.data[0].GoodsNum)
         })
       }
     }
@@ -889,14 +832,47 @@
             padding-right: 20px;
           }
           .item-chart-body {
+            display: flex;
             height: 100%;
             text-align: center;
             overflow: hidden;
             .item-high-chart {
               margin: 0 auto;
-              width: 80%;
+              width: 50%;
               height: 100%;
             }
+            .item-high-legend {
+              display:table;
+              width: 50%;
+              height: 100%;
+              text-align: left;
+              .legend {
+                width: 100%;
+                height: 10%;
+                display:table-cell;
+                vertical-align:bottom;
+                padding-bottom: 25%;
+                font-size: 18px;
+                font-weight: bold;
+                color: black;
+                .legend-row {
+                  width: 100%;
+                  height: 10%;
+                  display: flex;
+                  .color-box {
+                    width: 5%;
+                    height: 67%;
+                    margin-top: 1%;
+                    margin-right: 2%;
+                    display: inline-block;
+                    border-radius: 1px;
+                  }
+                  .content {
+                    width: 95%;
+                  }
+                }
+              }
+            }
           }
         }
       }