饼图色系调整完成

investment/js/groupData.js

@@ -310,9 +310,15 @@ let left14 = [
 let center1 = [1324.08, 442, 1169.91, 154.17]
 // 左中
 let center2 = [
-  { name: '传统产业', value: 405.29, value2: '0.30' },
-  { name: '战略新兴产业', value: 196.44, value2: '0.15' },
-  { name: '基础产业', value: 722.34, value2: '0.55' }
+  {
+    name: '传统产业', value: 405.29, value2: '0.30', y: 405.29, num: 95, sliced: false, selected: false,
+  },
+  {
+    name: '战略新兴产业', value: 196.44, value2: '0.15', y: 196.44, num: 95, sliced: false, selected: false
+  },
+  {
+    name: '基础产业', value: 722.34, value2: '0.55', y: 722.34, num: 95, sliced: false, selected: false
+  }
 ]
 // 左下
 let center3 = [
@@ -361,8 +367,8 @@ let center6 = [
 ]
 // 右中
 let center7 = [
-  { name: '新建', value: 204, value2: 345.53 },
-  { name: '续建', value: 385, value2: 978.55 },
+  { name: '新建', value: 204, value2: 345.53, y: 345.53, num: 204, sliced: false, selected: false },
+  { name: '续建', value: 385, value2: 978.55, y: 978.55, num: 385, sliced: false, selected: false },
 ]
 // 右下
 let center8 = [
@@ -434,7 +440,7 @@ let right1 = [
   { name: '工商变更登记', type: 1, number: '77' },
   { name: '', type: 1, number: '' },
 ]
-let right2 = [[120, 3423094],[],[121, 3423094],[],[122, 3423094],[],[123, 3423094],[],[124, 3423094],[],[125, 3423094],[],[126, 3423094],[],[127, 3423094]]
+let right2 = [[120, 3423094], [], [121, 3423094], [], [122, 3423094], [], [123, 3423094], [], [124, 3423094], [], [125, 3423094], [], [126, 3423094], [], [127, 3423094]]
 // 中间左边
 let right3 = [
   { name: '正偏差', value: '160', value2: '500' },
@@ -557,7 +563,7 @@ let right8 = [
 ]
 // 公共
 // 球弹窗
-let common1 = [135.26,186.82,78.40,46.02,354.47,400.49]
+let common1 = [135.26, 186.82, 78.40, 46.02, 354.47, 400.49]
 let common2 = [0.1463]
 // 单柱状图弹窗
 let common3 = [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28]

investment/js/investHomeGroup.js

@@ -1070,7 +1070,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-       colors: ['#a79c57', '#cc8c29', '#91a65f', '#e1d7da', '#383062', '#034a39','#b48494','#85868b'],
+       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -1314,7 +1314,7 @@ let app = new Vue({
 
       let that = this
       var chart = Highcharts.chart('echartL3', {
-       colors: ['#a79c57', '#cc8c29', '#91a65f', '#e1d7da', '#383062', '#034a39','#b48494','#85868b'],
+       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -1696,7 +1696,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-       colors: ['#a79c57', '#cc8c29', '#91a65f', '#e1d7da', '#383062', '#034a39','#b48494','#85868b'],
+       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -1897,7 +1897,6 @@ let app = new Vue({
       function autoTooltip (point) {
         chart.tooltip.refresh(point);
       }
-
     },
     initChartL6 () {
       var chartData = left8
@@ -1907,7 +1906,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-        colors: ['#a79c57', '#cc8c29', '#91a65f', '#e1d7da', '#383062', '#034a39','#b48494','#85868b'],
+        colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -2117,7 +2116,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-        colors: ['#a79c57', '#cc8c29', '#91a65f', '#e1d7da', '#383062', '#034a39','#b48494','#85868b'],
+        colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -2328,7 +2327,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-       colors: ['#a79c57', '#cc8c29', '#91a65f', '#e1d7da', '#383062', '#034a39','#b48494','#85868b'],
+       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -2983,22 +2982,14 @@ let app = new Vue({
     },
     // 大屏二
     initChartC1 () {
-      var chartData = []
+      var chartData = center2
       var timer = null;
-      var timer2 = null;
       var i = 0;
-      center2.forEach((item, index) => {
-        let obj = {
-          name: item.name,
-          y: item.value,
-          sliced: false,
-          selected: false,
-          color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
-        }
-        chartData.push(obj)
-      })
+    
       let that = this
-      var chart = Highcharts.chart('echartC1', {
+    
+      var option = {
+       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -3011,10 +3002,10 @@ let app = new Vue({
             // load，图表加载完成时触发
             load: function () {
               var chart = this;
-
+    
               var points = chart.series[0].points;
               var len = points.length;
-
+    
               timer && clearInterval(timer);
               timer = setInterval(function () {
                 autoTooltip(points[i]);
@@ -3055,8 +3046,17 @@ let app = new Vue({
         credits: {
           enabled: false  //去掉hightchats水印
         },
-        title: {
-          text: null
+        legend: {
+          layout: 'vertical',
+          align: 'right',
+          y: -10,
+          verticalAlign: 'bottom',
+          itemStyle: {
+            fontSize: '20px',
+            color: '#fff',
+            fontWeight: 0,
+            fontFamily: 'Microsoft YaHei'
+          }
         },
         tooltip: {
           crosshairs: true,
@@ -3068,26 +3068,12 @@ let app = new Vue({
             fontFamily: 'Microsoft YaHei'
           },
           formatter: function (e) {
-            //console.log(this, e)
-            this.percentage = Math.round(this.percentage)
-            // e.options.backgroundColor = 'rgba(0,0,0,0.5)'
-            // e.options.style.color = '#fff'
-            return `${this.key}：<b>${this.percentage}%</b><br/>金额：<b>${this.y}</b>亿`
+            let num = chartData[this.colorIndex].num
+            this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
+            return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
           },
           //pointFormat: 
         },
-        legend: {
-          layout: 'vertical',
-          align: 'right',
-          y: -10,
-          verticalAlign: 'bottom',
-          itemStyle: {
-            fontSize: '20px',
-            color: '#fff',
-            fontWeight: 0,
-            fontFamily: 'Microsoft YaHei'
-          }
-        },
         plotOptions: {
           pie: {
             allowPointSelect: true,
@@ -3103,10 +3089,21 @@ let app = new Vue({
             }
           },
         },
+        title: {
+          text: '',
+          style: {
+            color: '#fff',
+            fontSize: 24,
+            fontFamily: 'Microsoft YaHei'
+          },
+          align: 'center',
+          verticalAlign: "bottom",
+          x: -120
+        },
         series: [{
           type: 'pie',
           name: '占比',
-          center: ['75%', '45%'],
+          center: ['74%','50%'],
           point: {
             events: {
               click: function (e) { //点击事件
@@ -3127,12 +3124,7 @@ let app = new Vue({
                     point: {
                       events: {
                         click: function (e) {
-                          console.log(222222)
                           that.showChartLTipDouble(e.point.name)
-                          // if (e.point.name == '战略新兴产业') {
-                          //   that.tipTitle2 = e.point.name
-                          //   that.showTip2 = true
-                          // }
                         }
                       }
                     },
@@ -3144,7 +3136,7 @@ let app = new Vue({
               mouseOut: function () { // 鼠标移出后需要继续执行轮播
                 var points = chart.series[0].points;
                 var len = points.length;
-
+    
                 timer && clearInterval(timer);
                 timer = setInterval(function () {
                   autoTooltip(points[i]);
@@ -3163,12 +3155,7 @@ let app = new Vue({
                       point: {
                         events: {
                           click: function (e) {
-                            console.log(111111)
                             that.showChartLTipDouble(e.point.name)
-                            // if (e.point.name == '战略新兴产业') {
-                            //   that.tipTitle2 = e.point.name
-                            //   that.showTip2 = true
-                            // }
                           }
                         }
                       },
@@ -3185,7 +3172,10 @@ let app = new Vue({
           },
           data: chartData
         }]
-      });
+      }
+    
+      var chart = Highcharts.chart('echartC1', option);
+    
       function autoTooltip (point) {
         chart.tooltip.refresh(point);
       }
@@ -4235,7 +4225,7 @@ let app = new Vue({
       var timer = null;
       var timer2 = null;
       var i = 0;
-
+    
       center7.forEach((item, index) => {
         let obj = {
           name: item.name,
@@ -4243,10 +4233,10 @@ let app = new Vue({
           num: item.value,
           sliced: false,
           selected: false,
-          color: index == 0 ? '#43ede3' : '#8ba2ff'
+          color: index == 0 ? '#74a55d' : '#cea446'
         }
         chartData.push(obj)
-
+    
       })
       let that = this
       var chart = Highcharts.chart('echartC4', {
@@ -4262,10 +4252,10 @@ let app = new Vue({
             // load，图表加载完成时触发
             load: function () {
               var chart = this;
-
+    
               var points = chart.series[0].points;
               var len = points.length;
-
+    
               timer && clearInterval(timer);
               timer = setInterval(function () {
                 autoTooltip(points[i]);
@@ -4411,7 +4401,7 @@ let app = new Vue({
               mouseOut: function () { // 鼠标移出后需要继续执行轮播
                 var points = chart.series[0].points;
                 var len = points.length;
-
+    
                 timer && clearInterval(timer);
                 timer = setInterval(function () {
                   autoTooltip(points[i]);
@@ -4466,7 +4456,7 @@ let app = new Vue({
           data: chartData
         }]
       });
-
+    
       function autoTooltip (point) {
         chart.tooltip.refresh(point);
       }