Selaa lähdekoodia

修改投资饼图样式

zhbyyy 2 vuotta sitten
vanhempi
commit
c4d8e0ca8f

+ 39 - 3
investmentPort/investHomeGroup.html

@@ -267,8 +267,45 @@
             <div class="title">
               <span class="text">投资产业分布</span>
             </div>
-            <div class="content">
+            <div class="content relative">
               <div id="echartC1" ref="echartC1" class="commonBack" style="width: 100%; height: 100%;"></div>
+              <div class="absolute investorTitle">
+                <div>
+                  <span
+                    style="display:inline-block;border-radius:50%; width:15px;height:15px;background-color:#064F78;margin-right: 10px;"></span>
+                  <span>传统产业</span>
+                </div>
+                <div>
+                  <span
+                    style="display:inline-block;border-radius:50%; width:15px;height:15px;background-color:#BDB35D;margin-right: 10px;"></span>
+                  <span>战略新兴产业</span>
+                </div>
+                <div>
+                  <span
+                    style="display:inline-block;border-radius:50%; width:15px;height:15px;background-color:#623726;margin-right: 10px;"></span>
+                  <span>基础产业</span>
+                </div>
+              </div>
+              <div class="absolute investorIntroduce">
+                <div class="flex items-end">
+                  <span>投资额:</span><span style="color:#064F78;font-size: 30px;font-weight: bold;margin:0 5px;line-height: 1;">82.36</span><span>亿</span>
+                </div>
+                <div class="flex items-end" style="justify-content: end">
+                  <span style="color:#064F78;font-size: 30px;font-weight: bold;margin:0 5px;line-height: 1;">325</span><span>个</span>
+                </div>
+                <div class="flex items-end">
+                  <span>投资额:</span><span style="color:#BDB35D;font-size: 30px;font-weight: bold;margin:0 5px;line-height: 1;">82.36</span><span>亿</span>
+                </div>
+                <div class="flex items-end" style="justify-content: end">
+                  <span style="color:#BDB35D;font-size: 30px;font-weight: bold;margin:0 5px;line-height: 1;">325</span><span>个</span>
+                </div>
+                <div class="flex items-end">
+                  <span>投资额:</span><span style="color:#623726;font-size: 30px;font-weight: bold;margin:0 5px;line-height: 1;">82.36</span><span>亿</span>
+                </div>
+                <div class="flex items-end" style="justify-content: end">
+                  <span style="color:#623726;font-size: 30px;font-weight: bold;margin:0 5px;line-height: 1;">325</span><span>个</span>
+                </div>
+              </div>
             </div>
           </div>
           <div class="card">
@@ -629,8 +666,7 @@
       </div>
     </div>
     <!-- 项目列表专属弹窗 -->
-    <div class="tip-box productTip"
-      v-if="projectListTipShow">
+    <div class="tip-box productTip" v-if="projectListTipShow">
       <div class="absolute poptitle productPoptitle">项目列表</div>
       <div class="tip-down" @click="projectListTipShow = false">×</div>
       <dv-scroll-board :config='config6' @click="goLookBoard" style="width:100%;height:100%;" />

+ 11 - 11
investmentPort/js/investHomeGroup.js

@@ -4,7 +4,7 @@ let app = new Vue({
     return {
       rightAdd: {},// 左边新增筛选参数
       projectNum: '', // 项目列表弹窗顶部类目筛选条件
-      centerType: true, // 中间3D饼图
+      centerType: false, // 中间3D饼图
       boardType: '', // 哪边的项目看板
       pullShow: false, // 选择年份弹窗
       pollList: [],
@@ -15,7 +15,7 @@ let app = new Vue({
       lineCommonCompany: [], //双柱状图弹窗上面的折线图x轴
       commonCompanyAll: [], // 公司包括编码
       changeLine: true,
-      versions: true, // 是否使用接口数据数据
+      versions: false, // 是否使用接口数据数据
       app_token: '',
       centerShow: false, // 中间内容显示
       echartR4Chart: '',// 倒数第二个专用
@@ -4526,8 +4526,8 @@ let app = new Vue({
               type: "pie",
               clockWise: false, //顺时加载
               hoverAnimation: false, //鼠标移入变大
-              radius: [73 - i * 25 + "%", 63 - i * 25 + "%"],
-              center: ["35%", "50%"],
+              radius: [55 - i * 15 + "%", 50 - i * 15 + "%"],
+              center: ["25%", "60%"],
               label: {
                 show: false,
               },
@@ -4566,8 +4566,8 @@ let app = new Vue({
               z: 1,
               clockWise: false, //顺时加载
               hoverAnimation: false, //鼠标移入变大
-              radius: [73 - i * 25 + "%", 63 - i * 25 + "%"],
-              center: ["35%", "50%"],
+              radius:  [55 - i * 15 + "%", 50 - i * 15 + "%"],
+              center: ["25%", "60%"],
               label: {
                 show: false,
               },
@@ -4624,7 +4624,7 @@ let app = new Vue({
           //   }]
           // },
           legend: {
-            show: true,
+            show: false,
             trigger: 'item',
             icon: "circle",
             top: "center",
@@ -4687,9 +4687,9 @@ let app = new Vue({
           // },
           color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
           grid: {
-            top: "10%",
-            bottom: "52%",
-            left: "36%",
+            top: "30%",
+            bottom: "47%",
+            left: "26%",
             containLabel: false,
           },
           yAxis: [
@@ -4712,7 +4712,7 @@ let app = new Vue({
                 },
                 show: true,
                 formatter: data => {
-                  return '---- ' + data
+                  return `----- ${data}`
                 },
               },
               data: optionData.yAxis,

+ 21 - 0
investmentPort/styles/investHomeGroup.css

@@ -181,6 +181,27 @@ div {
   height: 10px;
   background: url('../groupImg/title-right2.png') no-repeat;
 }
+.investorTitle{
+  display: flex;
+  align-items: center;
+  width: 80%;
+  height: 20%;
+  right: 0;
+  top: 40px;
+  font-size: 20px;
+  justify-content: space-around;
+}
+.investorIntroduce{
+  width: 46%;
+  height: 55%;
+  right: 3%;
+  bottom: 15%;
+  font-size: 20px;
+  display: grid;
+  grid-template-columns: 2fr 1fr;   
+  grid-template-rows: repeat(3, 1fr);  
+  align-items:center;
+}
 .content {
   height: calc(100% - 110px);
   padding: 0 15px 10px;