拉取代码

investmentNew/index.html

@@ -329,7 +329,9 @@
           </div>
           <div>
             <div class="title">投资产业分布</div>
-            <div class="content"></div>
+            <div class="content">
+              <div ref="leftEcharts12" style="height: 100%;width: 100%;"></div>
+            </div>
           </div>
           <div>
             <div class="title">投资执行情况</div>

investmentNew/js/index.js

@@ -16,6 +16,7 @@ let app = new Vue({
       leftEcharts9: '',
       leftEcharts10: '',
       leftEcharts11: '',
+      leftEcharts12: '',
       shanxiMap: "", // 山西地图
       industryProportion: 1, // 主辅业占比轮播
       industryLayout: 0, //产业布局分析
@@ -294,6 +295,7 @@ let app = new Vue({
       this.leftEcharts9Fun();
       this.leftEcharts10Fun();
       this.leftEcharts11Fun();
+      this.leftEcharts12Fun();
       this.chinaEchartsFun();
       this.initChartR1();
       this.initChartR2();
@@ -2833,7 +2835,8 @@ let app = new Vue({
                 "value": [
                   112.53,
                   37.87,
-                  25167
+                  25167,
+                  113
                 ]
               }
             ],
@@ -3096,6 +3099,14 @@ let app = new Vue({
           axisPointer: {
             type: 'shadow',
           },
+          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
+          borderColor: "rgba(50,50,50,0.7)",
+          textStyle: {
+            color: "#fff",
+            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
+            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
+            fontSize: "28", // 文字字体大小
+          },
         },
         grid: {
           top: '10%',
@@ -3229,5 +3240,181 @@ let app = new Vue({
       //注册
       that.leftEcharts11.setOption(option);
     },
+    leftEcharts12Fun () {
+      let that = this;
+      this.leftEcharts12 = echarts.init(this.$refs["leftEcharts12"]);
+      var totalData = [{
+        name: '传统产业',
+        value: 12,
+        radio: 0.13
+      }, {
+        name: '公共基础产业',
+        value: 52,
+        radio: 0.01
+      }, {
+        name: '战略性新兴产业',
+        value: 15,
+        radio: 3.9
+      }, {
+        name: '特色优势产业',
+        value: 56,
+        radio: 10.5
+      }];
+
+      var data = [];
+      for (var i = 0; i < totalData.length; i++) {
+        data.push({
+          value: totalData[i].value,
+          name: totalData[i].name,
+          itemStyle: {
+            normal: {
+              borderWidth: 8,
+              shadowBlur: 0,
+              borderColor: commonColor[i],
+              shadowColor: commonColor[i]
+            }
+          }
+        },
+          {
+            value: 5,
+            name: '',
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                color: 'rgba(0, 0, 0, 0)',
+                borderColor: 'rgba(0, 0, 0, 0)',
+                borderWidth: 0
+              }
+            }
+          }
+        );
+      }
+      var seriesOption = [{
+        name: '',
+        type: 'pie',
+        clockWise: false,
+        radius: [170, 160],
+        center: [260, 250],
+        hoverAnimation: false,
+        itemStyle: {
+          normal: {
+            label: {
+              show: false,
+            }
+          }
+        },
+        data: data
+      },
+      {
+        type: 'pie',
+        radius: [120, 120],
+        center: [260, 250],
+        zlevel: 3,
+        silent: true,
+        label: {
+          normal: {
+            show: false
+          },
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: _pie3()
+      },
+      ];
+      option = {
+        color: commonColor,
+        title: {
+          show: false,
+          text: '风险类型123',
+          top: '48%',
+          textAlign: "center",
+          left: "49%",
+          textStyle: {
+            color: '#fff',
+            fontSize: 18,
+            fontWeight: '400'
+          }
+        },
+        tooltip: {
+          show: false
+        },
+        legend: {
+          icon: "circle",
+          orient: 'vertical',
+          formatter: function (name) {
+            let num
+            for (let i = 0; i < totalData.length; i++) {
+              if (totalData[i].name === name) {
+                num = name + ':' + totalData[i].value + '(' + totalData[i].radio + '%' + ')'
+              }
+            }
+            return num
+          },
+          data: ['传统产业', '公共基础产业', '战略性新兴产业', '特色优势产业'],
+          right: 0,
+          bottom: 0,
+          align: 'left',
+          textStyle: {
+            color: '#FFF',     // 文字的颜色
+            fontSize: '20',    // 文字字体大小
+            fontFamily: 'Microsoft YaHei'
+          },
+          itemGap: 20
+        },
+        toolbox: {
+          show: false
+        },
+        series: seriesOption
+      }
+
+      function _pie3 () {
+        let dataArr = [];
+        for (var i = 0; i < 100; i++) {
+          if (i % 2 === 0) {
+            dataArr.push({
+              name: (i + 1).toString(),
+              value: 25,
+              itemStyle: {
+                normal: {
+                  color: "#5A5DE0",
+                  borderWidth: 1,
+                  borderColor: "#5A5DE0"
+                }
+              }
+            })
+          } else {
+            dataArr.push({
+              name: (i + 1).toString(),
+              value: 20,
+              itemStyle: {
+                normal: {
+                  color: "rgba(0,0,0,0)",
+                  borderWidth: 0,
+                  borderColor: "rgba(0,0,0,0)"
+                }
+              }
+            })
+          }
+
+        }
+        return dataArr
+
+      }
+      //轮播
+      tools.loopShowTooltip(that.leftEcharts12, option, {
+        interval: 2000,
+        loopSeries: true,
+      });
+      //注册
+      that.leftEcharts12.setOption(option);
+    },
   },
 });