合并代码

investmentNew/index.html

@@ -613,6 +613,22 @@
                 <img src="./img/2.png" alt="" />
                 股权类
               </div>
+              <div class="wrapMeansItem">
+                <div v-for="(item, index) in stockRightList" class="itemWid2">
+                  <div class="itemBac itemBac2">
+                    <div>
+                      {{item.value}}
+                      <p>个</p>
+                    </div>
+                    <span>{{item.label}}</span>
+                  </div>
+                  <!-- <img
+                    v-if="index != stockRightList.length -1"
+                    src="./img/6.png"
+                    alt=""
+                  /> -->
+                </div>
+              </div>
             </div>
           </div>
           <div>

investmentNew/js/index.js

@@ -41,6 +41,16 @@ let app = new Vue({
           value: "33",
         },
       ],
+      stockRightList: [
+        {
+          label: "前期准备",
+          value: "66",
+        },
+        {
+          label: "工商变更登记",
+          value: "77",
+        },
+      ],
       costList: [
         {
           num: 160,
@@ -224,11 +234,90 @@ let app = new Vue({
           },
         ],
       },
+      riskData: {
+        x: [
+          { name: "大地控股", value: [14, 13, 6, 15, 13, 4] },
+          { name: "云时代", value: [15, 12, 12, 10, 24, 6] },
+          { name: "华舰体育", value: [14, 13, 6, 15, 13, 4] },
+          { name: "神农科技", value: [14, 13, 6, 15, 13, 4] },
+          { name: "山西焦煤", value: [14, 13, 6, 15, 13, 4] },
+          { name: "晋能控股", value: [14, 13, 6, 15, 13, 4] },
+          { name: "华阳新材", value: [14, 13, 6, 15, 13, 4] },
+          { name: "潞安化工", value: [14, 13, 6, 15, 13, 4] },
+          { name: "华新燃气", value: [14, 13, 6, 15, 13, 4] },
+          { name: "太重集团", value: [14, 13, 6, 15, 13, 4] },
+          { name: "国际能源", value: [14, 13, 6, 15, 13, 4] },
+          { name: "华远陆港", value: [14, 13, 6, 15, 13, 4] },
+          { name: "水控集团", value: [14, 13, 6, 15, 13, 4] },
+          { name: "文旅集团", value: [14, 13, 6, 15, 13, 4] },
+          { name: "交控集团", value: [14, 13, 6, 15, 13, 4] },
+          { name: "航产集团", value: [14, 13, 6, 15, 13, 4] },
+          { name: "山西建投", value: [14, 13, 6, 15, 13, 4] },
+          { name: "汾酒集团", value: [14, 13, 6, 15, 13, 4] },
+        ],
+        y1: [
+          120, 110, 200, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
+          20, 220, 123, 345,
+        ],
+        y2: [
+          120, 110, 210, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
+          20, 220, 123, 345,
+        ],
+        y3: [
+          120, 110, 230, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
+          20, 220, 123, 345,
+        ],
+      },
       inner: 0,
       innerDeg: 0,
       timer: null,
       witchs: 0,
       topIndex: 0,
+      echartR1Fd1: true,
+      echartR2Fd2: true,
+      r3Index: 0,
+      riskData1: {
+        x: [
+          "大地控股",
+          "云时代",
+          "华舰体育",
+          "神农科技",
+          "山西焦煤",
+          "晋能控股",
+          "华阳新材",
+          "潞安化工",
+          "华新燃气",
+          "太重集团",
+          "国际能源",
+          "华远陆港",
+          "水控集团",
+          "文旅集团",
+          "交控集团",
+          "航产集团",
+          "山西建投",
+          "汾酒集团",
+        ],
+        y1: [
+          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
+          110, 108, 34,
+        ],
+        y2: [
+          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
+          110, 108, 34,
+        ],
+        y3: [
+          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
+          110, 108, 34,
+        ],
+        y4: [
+          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
+          110, 108, 34,
+        ],
+        y5: [
+          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
+          110, 108, 34,
+        ],
+      },
     };
   },
   created() {},
@@ -252,7 +341,6 @@ let app = new Vue({
       this.chinaEchartsFun();
       this.initChartR1();
       this.initChartR2();
-      this.initChartR3();
       this.initChartR4();
     });
   },
@@ -260,32 +348,85 @@ let app = new Vue({
     initChartR1() {
       let that = this;
       let sumA = 42;
-      let right5 = [[1, 2, 3, 4, 5, 6]];
-      let commonCompany = [
-        "山西焦煤",
-        "山西焦煤",
-        "山西焦煤",
-        "山西焦煤",
-        "山西焦煤",
-        "山西焦煤",
+      let right5 = [
+        [
+          ["山西焦煤", 43.8],
+          ["晋能控股", 49.8],
+          ["华阳新材", 46],
+          ["潞安化工", 53.8],
+          ["华新燃气", 59],
+          ["太重集团", 57],
+          ["国际能源", 44],
+          ["华远陆港", 46],
+          ["万家寨水控", 57],
+          ["文旅集团", 62.8],
+          ["山西交控", 55.8],
+          ["航产集团", 44.2],
+          ["山西建投", 49.6],
+          ["汾酒集团", 66.65],
+          ["大地控股", 45.6],
+          ["云时代", 63.9],
+          ["华舰体育", 70.6],
+          ["神农科技", 45.6],
+        ],
+        [
+          ["山西焦煤", 25.8],
+          ["晋能控股", 25.8],
+          ["华阳新材", 38],
+          ["潞安化工", 37.8],
+          ["华新燃气", 28],
+          ["太重集团", 38],
+          ["国际能源", 28],
+          ["华远陆港", 38],
+          ["万家寨水控", 35.8],
+          ["文旅集团", 22.8],
+          ["山西交控", 25.8],
+          ["航产集团", 24.2],
+          ["山西建投", 23.6],
+          ["汾酒集团", 26.65],
+          ["大地控股", 25.6],
+          ["云时代", 30.9],
+          ["华舰体育", 38.6],
+          ["神农科技", 35.6],
+        ],
+        [
+          ["山西焦煤", 15.8],
+          ["晋能控股", 15.8],
+          ["华阳新材", 8],
+          ["潞安化工", 17.8],
+          ["华新燃气", 18],
+          ["太重集团", 18],
+          ["国际能源", 8],
+          ["华远陆港", 5.8],
+          ["万家寨水控", 5.8],
+          ["文旅集团", 2.8],
+          ["山西交控", 5.8],
+          ["航产集团", 12.2],
+          ["山西建投", 13.6],
+          ["汾酒集团", 16.65],
+          ["大地控股", 15.6],
+          ["云时代", 13.9],
+          ["华舰体育", 18.6],
+          ["神农科技", 15.6],
+        ],
       ];
       // 所有在100范围外的全部变成0，其他值相应增加/减少sumA
-      // right5.forEach((item) => {
-      //   item.forEach((item2) => {
-      //     if (Number(item2[1]) < 0) {
-      //       item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)));
-      //     } else if (Number(item2[1]) > 0) {
-      //       item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA);
-      //     }
-      //     if (Number(item2[1]) < -100 - sumA) {
-      //       item2[1] = that.$set(item2, 1, 0);
-      //       item2[1] = that.$set(item2, 2, 0);
-      //     } else if (Number(item2[1]) > 100 + sumA) {
-      //       item2[1] = that.$set(item2, 1, 0);
-      //       item2[1] = that.$set(item2, 2, 0);
-      //     }
-      //   });
-      // });
+      right5.forEach((item) => {
+        item.forEach((item2) => {
+          if (Number(item2[1]) < 0) {
+            item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)));
+          } else if (Number(item2[1]) > 0) {
+            item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA);
+          }
+          if (Number(item2[1]) < -100 - sumA) {
+            item2[1] = that.$set(item2, 1, 0);
+            item2[1] = that.$set(item2, 2, 0);
+          } else if (Number(item2[1]) > 100 + sumA) {
+            item2[1] = that.$set(item2, 1, 0);
+            item2[1] = that.$set(item2, 2, 0);
+          }
+        });
+      });
 
       const itemStyle = {
         // opacity: 0.8,
@@ -296,6 +437,7 @@ let app = new Vue({
       };
       that.right2Chart = echarts.init(this.$refs["echartR1"]);
       that.right2Chart.on("showTip", (params) => {
+        console.log(params);
         // 如果是7或者15并且满足防抖则切换
         if (
           (params.dataIndex == 5 || params.dataIndex == 11) &&
@@ -453,7 +595,7 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: commonCompany,
+          data: right5[0].map((item) => item[0]),
           axisLine: {
             show: false, //隐藏X轴轴线
             lineStyle: {
@@ -628,6 +770,39 @@ let app = new Vue({
     initChartR2() {
       let that = this;
       that.right1Chart = echarts.init(this.$refs["echartR2"]);
+      that.right1Chart.on("showTip", (params) => {
+        that.r3Index = params.dataIndex;
+        that.initChartR3();
+        console.log(that.r3Index);
+        // 如果是7或者15并且满足防抖则切换
+        if (
+          (params.dataIndex == 5 || params.dataIndex == 11) &&
+          that.echartR1Fd1
+        ) {
+          that.echartR1Fd1 = false;
+          setTimeout(() => {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
+            that.right1Chart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR1Fd1 = true;
+            }, 2000);
+          }, 1900);
+          // 如果是17表示到了最后一个，那么重新来一遍
+        } else if (params.dataIndex == 17 && that.echartR1Fd1) {
+          that.echartR1Fd1 = false;
+          setTimeout(() => {
+            option.dataZoom[0].endValue = 0;
+            option.dataZoom[0].startValue = 5;
+            that.right1Chart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR1Fd1 = true;
+            }, 2000);
+          }, 1900);
+        }
+      });
       let option = {
         color: [
           {
@@ -685,6 +860,38 @@ let app = new Vue({
             global: false, // 缺省为 false
           },
         ],
+        dataZoom: [
+          {
+            // start: 9,//默认为@
+            // end: 100,//黑认认为1@0
+            type: "slider",
+            show: false,
+            // xAxisIndex: [0]
+            handlesize: 0, //滑动条的 左右2个滑动条的大小
+            startValue: 5, // 初始显示值
+            endValue: 0, // 结束显示值
+            height: 10, //组件高度
+            left: "5%",
+            right: "4%", //右边的距离
+            bottom: "25%", //底边的距离
+            borderColor: "#939",
+            fillerColor: "#269cdb",
+            borderRadius: 5,
+            backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
+            showDataShadow: false, //是否显示数据阴影
+            showDetail: false, //即拖拽时候是否显示详细数值信息
+            truerealtime: true, //是否实时更新
+            filterMode: "filter",
+          },
+          {
+            type: "inside",
+            show: true,
+            start: 1,
+            end: 100,
+            zoomOnMouseWheel: false, //滚轮是否触发缩放
+            moveOnMouseMove: false, //鼠标滚轮触发滚动
+          },
+        ],
         legend: {
           top: 10,
           right: 10,
@@ -697,6 +904,22 @@ let app = new Vue({
             borderCap: "round",
           },
         },
+        tooltip: {
+          trigger: "item",
+          show: true,
+          position: "top",
+          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
+          textStyle: {
+            color: "#fff",
+            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
+            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
+            fontSize: "28", // 文字字体大小
+          },
+          formatter: function (p) {
+            console.log(p);
+            return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
+          },
+        },
         grid: {
           left: "3%",
           right: "4%",
@@ -706,15 +929,7 @@ let app = new Vue({
         xAxis: [
           {
             type: "category",
-            data: [
-              "山西焦煤",
-              "华阳控股",
-              "晋能控股",
-              "潞安化工",
-              "国际能源",
-              "云时代",
-              "航产集团",
-            ],
+            data: that.riskData.x.map((item) => item.name),
             axisLine: {
               lineStyle: {
                 color: "#005094",
@@ -756,11 +971,12 @@ let app = new Vue({
             itemStyle: {
               barBorderRadius: [15, 15, 15, 15],
             },
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: that.riskData.y1,
           },
           {
             name: "中风险",
             type: "bar",
+            barWidth: 14,
             stack: "Ad",
             itemStyle: {
               barBorderRadius: [15, 15, 15, 15],
@@ -768,11 +984,12 @@ let app = new Vue({
             emphasis: {
               focus: "series",
             },
-            data: [220, 182, 191, 234, 290, 330, 310],
+            data: that.riskData.y2,
           },
           {
             name: "高风险",
             type: "bar",
+            barWidth: 14,
             stack: "Ad",
             itemStyle: {
               barBorderRadius: [15, 15, 15, 15],
@@ -780,11 +997,15 @@ let app = new Vue({
             emphasis: {
               focus: "series",
             },
-            data: [150, 232, 201, 154, 190, 330, 410],
+            data: that.riskData.y3,
           },
         ],
       };
       that.right1Chart.setOption(option);
+      tools.loopShowTooltip(that.right1Chart, option, {
+        interval: 2000,
+        loopSeries: true,
+      });
     },
     initChartR3() {
       let that = this;
@@ -821,10 +1042,17 @@ let app = new Vue({
             name: "风险",
             type: "radar",
             symbol: "circle",
+            label: {
+              show: true,
+              formatter: function (params) {
+                return params.value;
+              },
+              fontSize: 24,
+              color: "#68BDFF",
+            },
             data: [
               {
-                value: [12, 23, 21, 17, 20, 9],
-                name: "Allocated Budget",
+                value: that.riskData.x[that.r3Index].value,
                 areaStyle: {
                   color: "#112b75",
                 },
@@ -845,36 +1073,148 @@ let app = new Vue({
     initChartR4() {
       let that = this;
       that.right4Chart = echarts.init(this.$refs["echartR4"]);
+      that.right4Chart.on("showTip", (params) => {
+        // 如果是7或者15并且满足防抖则切换
+        if (
+          (params.dataIndex == 5 || params.dataIndex == 11) &&
+          that.echartR2Fd2
+        ) {
+          that.echartR2Fd2 = false;
+          setTimeout(() => {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
+            that.right4Chart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR2Fd2 = true;
+            }, 2000);
+          }, 1900);
+          // 如果是17表示到了最后一个，那么重新来一遍
+        } else if (params.dataIndex == 17 && that.echartR2Fd2) {
+          that.echartR2Fd2 = false;
+          setTimeout(() => {
+            option.dataZoom[0].endValue = 0;
+            option.dataZoom[0].startValue = 5;
+            that.right4Chart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR2Fd2 = true;
+            }, 2000);
+          }, 1900);
+        }
+      });
       let option = {
+        dataZoom: [
+          {
+            // start: 9,//默认为@
+            // end: 100,//黑认认为1@0
+            type: "slider",
+            show: false,
+            // xAxisIndex: [0]
+            handlesize: 0, //滑动条的 左右2个滑动条的大小
+            startValue: 5, // 初始显示值
+            endValue: 0, // 结束显示值
+            height: 10, //组件高度
+            left: "5%",
+            right: "4%", //右边的距离
+            bottom: "25%", //底边的距离
+            borderColor: "#939",
+            fillerColor: "#269cdb",
+            borderRadius: 5,
+            backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
+            showDataShadow: false, //是否显示数据阴影
+            showDetail: false, //即拖拽时候是否显示详细数值信息
+            truerealtime: true, //是否实时更新
+            filterMode: "filter",
+          },
+          {
+            type: "inside",
+            show: true,
+            start: 1,
+            end: 100,
+            zoomOnMouseWheel: false, //滚轮是否触发缩放
+            moveOnMouseMove: false, //鼠标滚轮触发滚动
+          },
+        ],
+        title: {
+          text: "企业后评价执行情况",
+          left: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+          },
+        },
         tooltip: {
           trigger: "item",
           show: true,
-
+          position: "top",
+          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
+          textStyle: {
+            color: "#fff",
+            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
+            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
+            fontSize: "28", // 文字字体大小
+          },
           formatter: function (p) {
-            console.info(p);
-            return p.marker + p.name + " : " + p.value;
+            console.log(p);
+            return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
           },
         },
+        legend: {
+          show: true,
+          textStyle: {
+            fontSize: 24,
+            color: "rgba(255, 255, 255, .6)",
+          },
+          inactiveColor: "#fff",
+          itemHeight: 20,
+          top: "15%",
+          backgroundColor: "transparent",
+          data: [
+            {
+              name: "应首评项目数",
+              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWdJREFUOE+N0k8og3EYB/Dvs8P8CSlTxJGD8u+yTYmNm0gJQznIQRxMoV2cXWSKCznIQdk7SkmOEomNg41y4EjURkLZFI/ed3vX+5v82nt4357n9/s8Pe/v9xCST6+fzVHGKAMDAKqT6WsCNi2ElS0Xfak5Ul+tfi77YewBqNcLpH0vTYSOAxc9kFo5wghINus2lJMPOzl8PE6EpX8qC2lmuMmp8CmABn3FVgJ4bIloLggEnwRzRg6F4wSY9fR2J1CUnYieY0DPrgDiUvASA7pF8PGnJXsp4LEC3wx4L4DAY1pLLQq7GVjM5KcJmKC2fc76fNeOtU6GmBDOzYMt04sLmQjt2sUZRyMCjAEYBKNKyxNuAGwUA8vCaBhbcSrMxviwj1JFU7Nk3NC49iqAk+FCObAu3AngfLJCDmpmjgVwNdskB5UjPgHcrvbLQXmXVwD3O1NyYGmeFkD0aF4OCmqHBPAWXhfAL4WqeuKVsFKCAAAAAElFTkSuQmCC",
+            },
+            {
+              name: "已完成首评项目数",
+              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAXFJREFUOE+V0kFLAkEUB/D/G9eW3UN1sFPYNaJAu2R0Coog8mq0fQH1kEVBhz5Ah6CoLhrdE/LqKQo6VZ7SKCKChKRTBRmhbq47oabsZC22h1nem/k93jCP8P0F+E2HQ1dD4NAAGqqn+TUI8YpciCVo8LOaoeoSKOR6GTOSxOFtFLD+OSFtmpI/obqfqFqZ6Wrqr8NNyJHJK4aPtNLDAue0+1vlnzkiHqG5YvYcwGhj08MUhJyuWhgrvyBjFq3uogp0AB2NbFR2o5sctfCNVxDWc1ag/xPQR0tLXqYg6HTBBMd++RXplpZK2Qg4dtq5NAiLNM3v5a6ilALBY4s4rvKKMdLWw4EjU4E0U3s462gwXQ3DMLeJsfpgmCYgsSVTLkSF0bC24r9NcWucHPA1izZnyXpg8vRIAMfjU/ZgLH4ogDNt1h4Mb8YEcLkSsgf9y+sCuNtaswd92qoAHuMb9qBnIiiA55M9e9DpnRfAe/pAAF9gqJXUYWdYUwAAAABJRU5ErkJggg==",
+            },
+            {
+              name: "应再评项目数",
+              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAV5JREFUOE+V0j8oxGEYwPHvo/wMjgyUslAWcTFhMRiEsHLKYDzFKZRBSskgR7mUG29QjpX86QaDwdlwLotiUYpB/gyHPDru9HsPP+c3vL+e530/T8/b+wipb31KrYJ8vAi9QE0qfYqy+vBEsHtKnpM5SS4bC1qW+8amQl26gP0vcPSSQ2fXiFxJsnKhi8PfDtvgsVo0yJZfhwQCP1XOzCn4ZNuvB0BjerO4HNxtn1FsB24vDRZNggRgpdPNXsjL/4wST7AXNEDiv+DxW0slFVDTCvoG8QjcXGS2NKc+hMVsLo0yLFsBzZNnDoHaP9CJWtRn9XDA8WsOHR8PZx+NQhcDqvQhVH3klTMRVu4fWTZGw97Ktl/VHrePyVfRr1myHwhP3xnAM1nkDJbGzw0wOFvpDCa8+waYCTY5g/6esAFCax5n0NI6b4DI7qgzcDeOGSAW9TuD0up+A1zHQwZ4B2JrgI9r4uMDAAAAAElFTkSuQmCC",
+            },
+            {
+              name: "已完成再评项目数",
+              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE9jZICC/1e12Rh4uDIY/jNGMjAw6ECFrzAw/l/O8OXbDEbtq79AYowg4v9jS2mGv3+3MDAwGMAMQKMvMDAz+zDKHn/KCDaZm/skHsUwvRcZfr8zZ/z/0CyX4T/DJBwmowozMuQx/n9gdpyBgcECLsNpycAgXAPhvm1hYPgOkoaDEyANPxkYGNjgQjJbGRiYRSDcv28YGJ54I2v4SUDDWwaGJ17IGr5gcZIV1El/GRjetjMwfD+G5qSHpnkM/xknEufp//mM/2+rsDOwCoGCVZ+ApksMv9+ZERtxFxmYmb3BEYeaNHgyGf7/j2FgYNCEil9nYGRcwvDly3SUpIHslP8PzP4j8xkVTsENhaclZAWvLligaBAzOIFfw9ld1igajN2O4tewar49ioawxIP4NbQ0OqNoqKnfi19DXIoHioZFc3bg12Dt6YOi4ej2Lfg1yBn7o2h4dHYjigYAb0t88hVwEBYAAAAASUVORK5CYII=",
+            },
+            {
+              name: "再评达标项目数",
+              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE+V0k8og2EcwPHvkzVZLLm6KItEzWlclIPbdhGKcsCJwzZFdtgOK+8OimIXTjgoSrisXByUgz8nE4mmXFwlZmuaPXr3r/eZ9sZ7eN9+v/f5/J6n3/MTFJ9wWFpTFqYFjAFdxfSthF1blo1wWHzpOaG/gppszkIM6C4VqPheW8ATCYkXoVdOW7g0WVyy8ZSdHhFYlF4E0SqV1bTEJwKaPAd6S3/aWmHEU4j2Y/D4pJgLHWQAaykd9ENDfSH6SEJkTQGZ/4LkryO1O2DYDbkcHB7DQ6LiSAua9AlQN67SAQl+4Y3KWtt7vq1Os04JuPm04/rrxcUt4M5fnHE00jXMIBgHOor5eyQ7dd+sK6NhPEpAk9IYL4VEuWh5lowLfKE3BUS1RnMwOZtQwNaqwxwMTp0p4Gizzxz0D+0p4PRg1Bw4B1YUED+ZMwctrnkFPF8tm4OmzgkFvN5tK+AHKZh4TU8krdoAAAAASUVORK5CYII=",
+            },
+          ],
+        },
         grid: {
+          top: "30%",
           left: "3%",
           right: "4%",
           bottom: "3%",
           containLabel: true,
         },
         xAxis: {
-          data: ["山西焦煤", "晋能控股", "华阳新材"],
+          data: that.riskData1.x,
           type: "category",
           splitLine: {
             show: false,
           },
+          alignTicks: true,
           axisLine: {
             show: true,
             lineStyle: {
-              color: "#fff",
+              color: "rgba(0, 80, 148, .8)",
             },
           },
           axisTick: {
-            show: true,
+            show: false,
           },
           axisLabel: {
             color: "#fff",
@@ -884,12 +1224,10 @@ let app = new Vue({
         },
         yAxis: {
           type: "value",
-          splitNumber: 4,
-          interval: 50,
           splitLine: {
             show: true,
             lineStyle: {
-              color: "#68B4DD",
+              color: "rgba(104, 180, 221, .2)",
               type: "dashed",
             },
           },
@@ -907,11 +1245,20 @@ let app = new Vue({
         series: [
           {
             type: "bar",
-            animation: false,
-            barWidth: 2,
-            data: [60, 85, 110],
-            tooltip: {
-              show: false,
+            name: "应首评项目数",
+            barWidth: 4,
+            barGap: "600%",
+            data: that.riskData1.y1,
+            label: {
+              show: true,
+              position: "top",
+              formatter: " ",
+              width: 6,
+              height: 6,
+              borderRadius: 50,
+              borderWidth: 6,
+              borderColor: "#40A9FF",
+              backgroundColor: "#fff",
             },
             itemStyle: {
               color: {
@@ -922,38 +1269,68 @@ let app = new Vue({
                 colorStops: [
                   {
                     offset: 0,
-                    color: "rgba(85, 255, 237, 1)", // 0% 处的颜色
+                    color: "#40A9FF", // 0% 处的颜色
                   },
                   {
                     offset: 1,
-                    color: "rgba(66, 142, 255, 0.05)", // 100% 处的颜色
+                    color: "#092351", // 100% 处的颜色
                   },
                 ],
               },
             },
           },
           {
-            type: "scatter",
-            data: [60, 85, 110],
-            symbolOffset: ["-120%", "0"],
-            symbolSize: 8,
+            type: "bar",
+            name: "已完成首评项目数",
+            barGap: "600%",
+            barWidth: 4,
+            data: that.riskData1.y2,
+            label: {
+              show: true,
+              position: "top",
+              formatter: " ",
+              width: 6,
+              height: 6,
+              borderRadius: 50,
+              borderWidth: 6,
+              borderColor: "#58F7DF",
+              backgroundColor: "#fff",
+            },
             itemStyle: {
-              borderWidth: 0,
-              opacity: 1,
-              color: "rgba(85, 255, 237, 1)",
-              shadowColor: "rgba(85, 255, 237, 1)",
-              shadowBlur: 100,
-              shadowOffsetX: 100,
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#58F7DF", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#092351", // 100% 处的颜色
+                  },
+                ],
+              },
             },
           },
           {
             type: "bar",
-            animation: false,
-            barGap: "800%",
-            barWidth: 2,
-            data: [60, 85, 110],
-            tooltip: {
-              show: false,
+            name: "应再评项目数",
+            barGap: "600%",
+            barWidth: 4,
+            data: that.riskData1.y3,
+            label: {
+              show: true,
+              position: "top",
+              formatter: " ",
+              width: 6,
+              height: 6,
+              borderRadius: 50,
+              borderWidth: 6,
+              borderColor: "#B78CFF",
+              backgroundColor: "#fff",
             },
             itemStyle: {
               color: {
@@ -964,30 +1341,95 @@ let app = new Vue({
                 colorStops: [
                   {
                     offset: 0,
-                    color: "rgba(214, 91, 255, 1)", // 0% 处的颜色
+                    color: "#B78CFF", // 0% 处的颜色
                   },
                   {
                     offset: 1,
-                    color: "rgba(184, 91, 255, 0.05)", // 100% 处的颜色
+                    color: "#092351", // 100% 处的颜色
                   },
                 ],
               },
             },
           },
           {
-            type: "scatter",
-            data: [60, 85, 110],
-            symbolOffset: ["110%", "0"],
-            symbolSize: 8,
+            type: "bar",
+            name: "已完成再评项目数",
+            barGap: "600%",
+            barWidth: 4,
+            data: that.riskData1.y4,
+            label: {
+              show: true,
+              position: "top",
+              formatter: " ",
+              width: 6,
+              height: 6,
+              borderRadius: 50,
+              borderWidth: 6,
+              borderColor: "#FFE036",
+              backgroundColor: "#fff",
+            },
             itemStyle: {
-              borderWidth: 0,
-              opacity: 1,
-              color: "#f2fec3",
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#FFE036", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#092351", // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+          },
+          {
+            type: "bar",
+            name: "再评达标项目数",
+            barGap: "600%",
+            barWidth: 4,
+            data: that.riskData1.y5,
+            label: {
+              show: true,
+              position: "top",
+              formatter: " ",
+              width: 6,
+              height: 6,
+              borderRadius: 50,
+              borderWidth: 6,
+              borderColor: "#7784FF",
+              backgroundColor: "#fff",
+            },
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#7784FF", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#092351", // 100% 处的颜色
+                  },
+                ],
+              },
             },
           },
         ],
       };
       that.right4Chart.setOption(option);
+      tools.loopShowTooltip(that.right4Chart, option, {
+        interval: 2000,
+        loopSeries: true,
+      });
     },
     clickItem(index) {
       console.log(index);

investmentNew/styles/index.css

@@ -797,16 +797,32 @@ i {
   position: relative;
 }
 
-.itemWid img {
+.itemWid2 {
+  width: calc(100% / 2);
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  position: relative;
+}
+
+.itemWid2 img {
   position: absolute;
   right: -95px;
   bottom: 15px;
   width: 100px;
 }
 
+.itemWid img {
+  position: absolute;
+  right: -95px;
+  bottom: 15px;
+  width: 120px;
+}
+
 .itemBac {
   background: url(../img/3.png) no-repeat;
   background-size: 100% 100%;
+  background-position: center;
   font-size: 1.75rem;
   font-family: Source Han Sans CN;
   font-weight: 400;
@@ -816,6 +832,12 @@ i {
   position: relative;
 }
 
+.itemBac2 {
+  background: url(../img/4.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+}
+
 .itemBac div {
   font-size: 72px;
   line-height: 60px;
@@ -855,7 +877,7 @@ i {
 
 .publicTitle {
   width: 100%;
-  height: calc(100% / 7);
+  height: 100px;
   overflow: hidden;
   background: url("../img/small-title.png") no-repeat center bottom; /*图标路径*/
   background-size: 100% 50%;
@@ -1132,4 +1154,10 @@ i {
   grid-column: 1 / 3;
 }
 
+.shareholding {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 /* right css end */