解决冲突

investment/investHome.html

@@ -25,7 +25,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">
@@ -89,9 +89,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">
@@ -158,9 +158,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">

investment/js/data.js

@@ -54,15 +54,15 @@ let tipData = [
 ]
 
 let tipTopData = [
-  { value: '13.63', name: '新一代信息技术产业'},
-    { value: '61.39', name: '高端装备制造产业'},
-    { value: '21.17', name: '新材料产业'},
-    { value: '40.08', name: '新能源产业'},
-    { value: '1.18', name: '生物医药产业'},   
-    { value: '11.84', name: '节能环保产业'},
-    { value: '0', name: '新能源汽车产业'},
-    { value: '0', name: '通用航空产业'},
-    { value: '19.34', name: '煤层气产业'},
+  { value: '13.63', name: '新一代信息技术'},
+    { value: '61.39', name: '高端装备制造'},
+    { value: '21.17', name: '新材料'},
+    { value: '40.08', name: '新能源'},
+    { value: '1.18', name: '生物医药'},   
+    { value: '11.84', name: '节能环保'},
+    { value: '0', name: '新能源汽车'},
+    { value: '0', name: '通用航空'},
+    { value: '19.34', name: '煤层气'},
     { value: '8.56', name: '现代煤化工'},
     { value: '2.65', name: '文化旅游'},
     { value: '0', name: '军民融合'},

investment/js/investHome.js

@@ -848,7 +848,7 @@ let app = new Vue({
         series: [
           {
             name: '2022年投资完成额',
-            type: 'bar',
+            type: 'line',
             barWidth: 15,
             itemStyle: {
               normal: {
@@ -859,7 +859,7 @@ let app = new Vue({
                   },
                   {
                     offset: 1,
-                    color: '#082550',
+                    color: '#69c0ff',
                   },
                 ]),
               },
@@ -1037,10 +1037,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: {
@@ -1052,10 +1059,40 @@ let app = new Vue({
           },
         },
         series: [
+
+          // {
+          //   hoverOffset: 0,
+          //   startAngle: 90,
+          //   type: "pie",
+          //   radius: [48, 55],
+          //   center: ["50%", "50%"],
+          //   itemStyle: {
+          //     normal: {
+          //         borderColor: 'rgba(1,31,6,0.7)',
+          //         borderWidth: 4
+          //     }
+          //   },
+          //   tooltip: {
+          //     show: false
+          //   },
+          //   labelLine: {
+          //     show: false
+          //   },
+          //   label: {
+          //     show: false
+          //   },
+          //   data: industryList
+          // },
           {
             name: '',
             type: 'pie',
             radius: ['55%', '80%'],
+            itemStyle: {
+              normal: {
+                borderColor: 'rgba(1,31,64,0.7)',
+                borderWidth: 6
+              }
+            },
             labelLine: {
               normal: {
                 lineStyle: {
@@ -1063,10 +1100,19 @@ let app = new Vue({
                 },
               },
             },
-            data: statusList,
+            data: industryList,
           },
         ],
       }
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        if (param.name == '战略新兴产业投资') {
+          that.tipTitle2 = param.name
+          that.showTip2 = true
+        }
+
+      })
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {
         nterval: 2000,
@@ -1192,11 +1238,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',
           },
@@ -1205,16 +1251,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: {
@@ -1227,7 +1273,7 @@ let app = new Vue({
           },
           axisLabel: {
             show: true,
-            // rotate: 20,
+            rotate: 20,
             textStyle: {
               color: 'rgba(255,255,255,0.6)', //X轴文字颜色
             },
@@ -1296,31 +1342,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),
           },
         ],
       }
@@ -1329,15 +1351,6 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
-      let that = this
-      myChart.on('click', function (param) {
-        console.log(param)
-        if (param.name == '战略新兴产业投资') {
-          that.tipTitle2 = param.name
-          that.showTip2 = true
-        }
-
-      })
     },
     initProjectList () {
       let dataList = []