Quellcode durchsuchen

修改投资分布和一体化

unknown vor 2 Jahren
Ursprung
Commit
d17b358d5b
2 geänderte Dateien mit 26 neuen und 43 gelöschten Zeilen
  1. 5 5
      investment/investHome.html
  2. 21 38
      investment/js/investHome.js

+ 5 - 5
investment/investHome.html

@@ -23,7 +23,7 @@
     <div id="app">
       <dv-full-screen-container>
         <header class="my-header">
-          <span>数化投资管理驾驶舱</span>
+          <span>数化投资管理驾驶舱</span>
           <span class="right">{{time}}</span>
         </header>
         <div class="main">
@@ -94,9 +94,9 @@
             <dv-border-box-8 :dur="11">
               <div class="my-panel">
                 <div class="panel-title">
-                  <span class="text">五个一体化</span>
+                  <span class="text">投资产业分布</span>
                 </div>
-                <div ref="echartL1" class="content"></div>
+                <div ref="echartR1" class="content"></div>
               </div>
             </dv-border-box-8>
             <dv-border-box-8 :dur="12">
@@ -163,9 +163,9 @@
             <dv-border-box-8 :dur="10">
               <div class="my-panel">
                 <div class="panel-title">
-                  <span class="text">投资产业分布</span>
+                  <span class="text">五个一体化</span>
                 </div>
-                <div ref="echartR1" class="content"></div>
+                <div ref="echartL1" class="content"></div>
               </div>
             </dv-border-box-8>
             <dv-border-box-8 :dur="11">

+ 21 - 38
investment/js/investHome.js

@@ -1015,10 +1015,17 @@ let app = new Vue({
     },
 
     initChartL1 () {
-      let myChart = echarts.init(this.$refs['echartL1'])
+      let myChart = echarts.init(this.$refs['echartR1'])
       let option = {
         tooltip: {
           trigger: 'item',
+          formatter: params => {
+            console.log(params)
+            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}:${params.value} <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资占比:${params.percent}%`
+          } ,  //+ '<br/>'+ '{a1}:{c1}' + '%',
+          axisPointer: {
+            type: 'cross',
+          },
         },
         color: ['#6682f5', '#69c0ff', '#43ede3','#8ba2ff'],
         legend: {
@@ -1041,7 +1048,7 @@ let app = new Vue({
                 },
               },
             },
-            data: statusList,
+            data: industryList,
           },
         ],
       }
@@ -1170,11 +1177,11 @@ let app = new Vue({
       })
     },
     initChartR1 () {
-      let myChart = echarts.init(this.$refs['echartR1'])
+      let myChart = echarts.init(this.$refs['echartL1'])
       let option = {
         tooltip: {
           trigger: 'axis',
-          formatter: '{a0}:{c0}' + '亿元' + '<br/>' + '{a1}:{c1}' + '%',
+          formatter: '{a0}:{c0}' + '亿元',  //+ '<br/>'+ '{a1}:{c1}' + '%',
           axisPointer: {
             type: 'cross',
           },
@@ -1183,16 +1190,16 @@ let app = new Vue({
           top: '16%',
           right: '10%',
           left: '10%',
-          bottom: '10%',
-        },
-        legend: {
-          top: '1',
-          textStyle: {
-            color: 'rgba(250,250,250,0.6)',
-          },
+          bottom: '22%',
         },
+        // legend: {
+        //   top: '1',
+        //   textStyle: {
+        //     color: 'rgba(250,250,250,0.6)',
+        //   },
+        // },
         xAxis: {
-          data: industryList.map(item=> item.name),
+          data: statusList.map(item=> item.name),
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -1205,7 +1212,7 @@ let app = new Vue({
           },
           axisLabel: {
             show: true,
-            // rotate: 20,
+            rotate: 20,
             textStyle: {
               color: 'rgba(255,255,255,0.6)', //X轴文字颜色
             },
@@ -1274,31 +1281,7 @@ let app = new Vue({
                 ]),
               },
             },
-            data: industryList.map(item=> item.value),
-          },
-          {
-            type: 'line',
-            name: '投资占比',
-            type: 'line',
-            yAxisIndex: 1,
-            smooth: true, //平滑曲线显示
-            showAllSymbol: true, //显示所有图形。
-            symbol: 'circle', //标记的图形为实心圆
-            symbolSize: 4, //标记的大小
-            smooth: false,
-            itemStyle: {
-              //折线拐点标志的样式
-              color: '#fbe138',
-              borderColor: '#fbe138',
-              width: 1,
-              shadowColor: '#fbe138',
-              shadowBlur: 2,
-            },
-            lineStyle: {
-              color: '#fbe138',
-              width: 1,
-            },
-            data: industryList.map(item=> item.value2),
+            data: statusList.map(item=> item.value),
           },
         ],
       }