pc_kingdee_large_screen/investment/js/investHomeGroup.js

let app = new Vue({
  el: '#app',
  data () {
    return {
      echartR4Chart: '',// 倒数第二个专用
      echartR5Chart: '', // 倒是第一个专用
      echartEnterpriseShow: false, // 企业额度分析控制
      mapChart: '',//地图专用echarts
      chartCarousel: '',//做大屏轮播专用echarts
      mapTipShow: false,
      echartSingleTipShow: false,
      echartDoubleTipShow: false,
      projectListTipShow: false, //项目列表专属弹窗
      backShow: false,
      titleUrl: '',
      titleName: '',
      yellowCount: 0, // 黄圈轮播参数
      yellowPosition: 40,// 黄圈悬浮窗位置参数
      yellowType: true, // 黄圈悬浮停止轮播
      echartR1Fd: true,
      echartR2Fd: true,
      echartC2Fd: true,
      echartR3Fd: true,
      echarts1Time: 16000,
      time: '',
      timer: '',
      timer2: '',
      totleLimit: left4[0],
      totleLimit2: left4[1],
      totleLimit3: left4[2],
      totleLimit4: left4[3],
      totleLimit5: left4[4],
      center1: center1,
      showTip2: false,
      showTip3: false,
      list: [],
      count: 0,
      countType: 0,
      mapName: 'shanxi',
      geoCoordMap: {},
      storageRecordConfig2: center9,
      titleList: right1,
      centerLeftList: right3,
      storageRecordConfig: left11,
      config5: {
        rowNum: 9,
        waitTime: 2000,
        headerHeight: '40',
        header: ["项目名称", "所属组织", '实施主体', '建设性质（新建/续建）', '产业类别', '建设地点', '2022年投资完成额（万元）'],
        data: [
          ["青银二广高速公路太原联络线建设PPP项目", "交控集团", "山西路桥建设集团有限公司", "新建", "交通运输业", "山西省太原市、晋中市", "148,086.00"],
          ["国道241、省道岚马线汾河水库段改线工程", "交控集团", "太原国省道汾河水库段建设管理有限公司", "续建", "交通运输业", "山西省 太原市、吕梁市", "165,314.33"],
          ["路桥科技中心", "交控集团", "山西路桥集团多经营有限公司", "续建", "建筑房地产", "山西省太原市", "8,098.26"],
          ["路桥科研基地", "交控集团", "山西路桥集团多经有限公司", "续建", "建筑房地产", "山西省太原市", "6,596.56"],
          ["武宿高速充电站建设", "交控集团", "山西交通运输投融资集团有限责任公司", "新建", "新能源", "山西省太原市", "100.00"],
          ["山西交通研创商务基地项目", "交控集团", "山西交通物流集团有限公司", "续建", "建筑房地产", "山西省太原市", "4,097.00"],
          ["山西省交通科学研究院产业化基地", "交控集团", "山西省交通科技研发有限公司", "续建", "建筑房地产", "山西省太原市武洛街27号", "3,242.00"],
          ["太长高速公路太原南收费站（二期工程暨龙城服务区）项目", "交控集团", "山西省交通开发投资集团有限公司龙城服务区发展分公司", "续建", "建筑房地产", "山西省太原市", "3,580.00"],
          ["山西转型综改示范区中小企业产业园项目", "交控集团", "山西交投综改园区开发有限公司", "续建", "建筑房地产", "山西省太原市", "14,432.00"]
        ],
        align: ["center", "center", "center", "center", "center", "center", "center"],
        headerBGC: "#153A62",
        oddRowBGC: "#061F42",
        evenRowBGC: "#0C284A",
      },
      config6: {
        rowNum: 15,
        waitTime: 1000,
        headerHeight: '100',
        header: ["项目名称", "所属组织", '实施主体', '产业类别I级', '产业类别II级', '2022年投资完成额（万元）'],
        data: [
          ["6万吨/年PBAT项目", "华阳新材", "华阳生物降解公司", "战略性新兴产业", "新材料", "20,340.00"],
          ["2万吨/年生物降解改性材料及塑料制品项目", "华阳新材", "华阳生物降解公司", "战略性新兴产业", "新材料", "5,270.00"],
          ["2万吨/年全系列生物降解新材料项目", "华阳新材", "华阳新材", "战略性新兴产业", "新材料", "5,560.00"],
          ["开元煤层气发电项目", "华阳新材", "阳煤扬德公司", "战略性新兴产业", "煤层气", "880.00"],
          ["平舒翟下庄煤层气发电项目", "华阳新材", "阳煤扬德公司", "战略性新兴产业", "煤层气", "570.00"],
          ["5GW高效光伏组件制造项目一期2GW", "华阳新材", "华储光电公司", "战略性新兴产业", "新能源", "10,000.00"],
          ["钠离子电池正极材料千吨级生产项目", "华阳新材", "华钠铜能公司", "战略性新兴产业", "新能源", "6,060.00"],
          ["钠离子电池负极材料千吨级生产项目", "华阳新材", "华钠碳能公司", "战略性新兴产业", "新能源", "4,080.00"],
          ["1GWh钠离子Pack电池生产线建设项目", "华阳新材", "华钠芯能公司", "战略性新兴产业", "新能源", "2790.00"],
          ["天成光储网充项目", "华阳新材", "新阳公司", "战略性新兴产业", "新能源", "1680.00"],
          ["宏厦三建绿色建材工业园区项目", "华阳新材", "宏厦三建", "战略性新兴产业", "新材料", "2,550.00"],
          ["亚美公司超低排放改造及节能技改项目", "华阳新材", "亚美公司", "战略性新兴产业", "其他", "20,101.00"],
          ["超净滤材项目", "华阳新材", "华阳科创城", "战略性新兴产业", "新材料", "5,510.00"],
          ["华阳集团网络安全工作顶层设计及整体整改项目", "华阳新材", "华阳集团", "战略性新兴产业", "新一代信息技术", "814.00"],
          ["山西科技创新城阳煤设计研发中心项目", "华阳新材", "碳基合成新材料公司", "战略性新兴产业", "其他", "12,930.00"],
          ["阳煤西110kv变电站及线路建设工程", "华阳新材", "华阳股份", "战略性新兴产业", "其他", "7,060.00"],
          ["郊区35kV输变电工程", "华阳新材", "华储光电公司", "战略性新兴产业", "其他", "1,250.00"],
          ["环境保护及治理", "华阳新材", "华阳股份", "战略性新兴产业", "节能环保", "5,890.00"],
          ["增资山西新阳清洁能源有限公司", "华阳新材", "华阳股份", "战略性新兴产业", "新能源产业", "101,700.00"],
          ["增资阳煤集团纳谷（山西）气凝胶科创城管理有限责任公司", "华阳新材", "华阳集团", "战略性新兴产业", "新材料产业", "34,582.00"],
          ["太化集团普田农业有限公司股权收购及增资", "华阳新材", "华阳新材", "战略性新兴产业", "新材料产业", "7,400.00"],
          ["山西阳煤道得新材股权投资合伙企业（有限合伙）", "华阳新材", "华阳资本", "战略性新兴产业", "新材料产业", "5,000.00"],
          ["阳泉市梧桐树嘉裕阳煤智能制造股权投资合伙企业（有限合伙）", "华阳新材", "华阳资本华阳股份", "战略性新兴产业", "新材料产业", "6,576.29"],
          ["阳煤纳谷（山西）气凝胶经销有限责任公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "4,335.00"],
          ["阳煤纳谷（山西）节能服务有限责任公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "3,674.00"],
          ["华阳诺爱特（山西）新材料科技有限公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "500.00"],
          ["华阳纳谷（北京）新材料科技有限公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "250.00"],
          ["山西华储光电有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新材料产业", "45,000.00"],
          ["山西华钠铜能科技有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新能源产业", "900.00"],
          ["山西华钠碳能科技有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新能源产业", "450.00"]

        ],
        align: ["center", "center", "center", "center", "center", "center", "center"],
        headerBGC: "#153A62",
        oddRowBGC: "#061F42",
        evenRowBGC: "#0C284A",
      },
    }
  },
  created () {
    this.time = formatDate()
    this.timer = setInterval(() => {
      this.time = formatDate()
    }, 1000)
    this.timer2 = setInterval(() => {
      this.yellowType && this.changeYellow()
    }, 2000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timer2) {
      clearInterval(this.timer2);
    }
  },
  mounted () {
    setTimeout(() => {
      this.initChartL1()
      this.initChartL2()
      this.initChartL3()
      this.initChartL4()
      this.initChartL5()
      this.initChartL6()
      this.initChartL7()
      this.initChartL8()
      this.initChartL10()
      this.initChartL11()
      this.changeTopColor()
      // 大屏二
      this.initChartC1()
      this.initChartC2()
      this.initChartC3()
      this.initChartC4()
      this.initChinaChart()
      this.initProjectList()
      // 大屏三
      this.initChartR1()
      this.initChartR2()
      this.initChartR3()
      // this.initChartR4()
      // this.initChartR5()
      this.changeYellow()

    })
  },
  methods: {
    getDate () {
      let dataList = []
      // 中间
      // 投资关键指标
      center1[0] = dataList.keyIndicators.totalSum
      center1[1] = dataList.keyIndicators.total
      center1[2] = dataList.keyIndicators.property
      center1[3] = dataList.keyIndicators.invest
      // 投资产业分布
      // center2[0].value = dataList.distribution
      // 投资执行情况
      // center3
      // 中上
      center4[0] = dataList.transformations.estateAmount
      center4[1] = dataList.transformations.estateNum
      center4[2] = dataList.transformations.figureAmount
      center4[3] = dataList.transformations.figureNum
      // 地图
      // center5
      // 五个一体化
      center6[0] = dataList.five.amount1
      center6[1] = dataList.five.amount2
      center6[2] = dataList.five.amount3
      center6[3] = dataList.five.amount4
      center6[4] = dataList.five.amount5
      // 投资阶段分析
      // center7
      // 重点项目监控
      // center8

      // 左边
      // 投资额度分析
      left1[0] = dataList.investmentQuota.netProfit
      left1[1] = dataList.investmentQuota.pressureDrop
      left1[2] = dataList.investmentQuota.amortization
      // left2
      // 企业额度分析
      // left3
      // 重点两线指标
      // left11
      // 投资计划分析
      totleLimit = investmentPlan.total
      totleLimit2 = investmentPlan.fixedAmount
      totleLimit3 = investmentPlan.fixedNum
      totleLimit4 = investmentPlan.stockAmount
      totleLimit5 = investmentPlan.stockNum
      // left5
      // left6
      // 产业布局分析
      // left7
      // left8
      // left9
      // left10
      // 项目阶段分析
      // echartL10
      // echartL11

      // 右边
      // 上面黄色轮播
      // right1


    },
    yellowMouse (index) {
      if (index % 2 == 0) {
        this.yellowCount = index
        this.yellowPosition = (index / 2 - 1) * 315 + 40
        this.yellowType = false
        this.changeYellow()
      }
    },
    // 回到中国地图
    backChina () {
      this.backShow = false
      this.mapChart.dispose()
      setTimeout(() => {
        this.initChinaChart()
      });
    },
    // 去项目看板
    goLookBoard (e) {
      console.log(e, '?????')
    },
    // 单个柱状图的弹窗
    showChartLTipSingle (e) {
      this.closeTap()
      this.titleName = e
      this.echartSingleTipShow = true
      setTimeout(() => {
        this.initChartLTip()
      })
    },
    // 两个柱状图的弹窗
    showChartLTipDouble (e) {
      this.titleName = e
      this.echartDoubleTipShow = true
      setTimeout(() => {
        this.initChartLTip2()
        this.initChartLTip3()
      })
    },
    initChartLTip () {
      let myChart = echarts.init(document.getElementById("echartSingleTip"));
      let option = {
        grid: {
          top: 40,
          right: 0,
          left: 60,
          bottom: 70,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: commonCompany,
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            rotate: 40,
            textStyle: {
              color: "white",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: '亿元',
          nameTextStyle: {//y轴上方单位的颜色
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: '20'
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          // {
          //   name: "2022年额度",
          //   type: "bar",
          //   data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
          //   showBackground: false,
          //   backgroundStyle: {
          //     color: "#18416F",
          //   },
          //   barWidth: "10%",
          //   itemStyle: {
          //     barBorderRadius: [10, 10, 0, 0],
          //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //       {
          //         offset: 0,
          //         color: '#082550',
          //       },
          //       {
          //         offset: 1,
          //         color: '#69c0ff',
          //       },
          //     ]),
          //   },
          // },
          {
            name: "2023年额度",
            type: "bar",
            data: common3,
            showBackground: false,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "30%",
            itemStyle: {
              // barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#082550',
                },
                {
                  offset: 1,
                  color: '#957DFF',

                },
              ]),
            },
          },
        ],
        legend: {
          // data: ["2022年额度", "2023年额度"],
          data: ["2023年额度"],
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            fontSize: "20",
            fontFamily: 'Microsoft YaHei'
          },
          right: 'center',
          y: 5,
          // 小图标的宽高
        },
      };
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
      let that = this
      myChart.on('click', function (param) {
        that.projectListTipShow = true

      })
      myChart.setOption(option);
    },
    initChartLTip2 () {
      let myChart = echarts.init(document.getElementById("echartSingleTip2"));
      let option = {
        grid: {
          top: 40,
          right: 0,
          left: 60,
          bottom: '15%',
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            rotate: 40,
            textStyle: {
              color: "white",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: '个',
          nameTextStyle: {//y轴上方单位的颜色
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          // {
          //   name: "2022年额度",
          //   type: "bar",
          //   data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
          //   showBackground: false,
          //   backgroundStyle: {
          //     color: "#18416F",
          //   },
          //   barWidth: "10%",
          //   itemStyle: {
          //     barBorderRadius: [10, 10, 0, 0],
          //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //       {
          //         offset: 0,
          //         color: '#082550',
          //       },
          //       {
          //         offset: 1,
          //         color: '#69c0ff',
          //       },
          //     ]),
          //   },
          // },
          {
            name: "2023年额度",
            type: "bar",
            data: common4,
            showBackground: false,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "30%",
            itemStyle: {
              // barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#082550',
                },
                {
                  offset: 1,
                  color: '#957DFF',

                },
              ]),
            },
          },
        ],
        legend: {
          // data: ["2022年额度", "2023年额度"],
          data: ["2023年额度"],
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            fontSize: "20",
            fontFamily: 'Microsoft YaHei'
          },
          right: 'center',
          y: 0,
          // 小图标的宽高
        },
      };
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
      let that = this
      myChart.on('click', function (param) {
        that.projectListTipShow = true
      })
      myChart.setOption(option);
    },
    initChartLTip3 () {
      let myChart = echarts.init(document.getElementById("echartSingleTip3"));
      let option = {
        grid: {
          top: 40,
          right: 0,
          left: 60,
          bottom: '15%',
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            rotate: 40,
            textStyle: {
              color: "#fff",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: '亿元',
          nameTextStyle: {//y轴上方单位的颜色
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          // {
          //   name: "2022年额度",
          //   type: "bar",
          //   data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
          //   showBackground: false,
          //   backgroundStyle: {
          //     color: "#18416F",
          //   },
          //   barWidth: "10%",
          //   itemStyle: {
          //     barBorderRadius: [10, 10, 0, 0],
          //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //       {
          //         offset: 0,
          //         color: '#082550',
          //       },
          //       {
          //         offset: 1,
          //         color: '#69c0ff',
          //       },
          //     ]),
          //   },
          // },
          {
            name: "2023年额度",
            type: "bar",
            data: common5,
            showBackground: false,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "30%",
            itemStyle: {
              // barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#082550',
                },
                {
                  offset: 1,
                  color: '#69c0ff',
                },
              ]),
            },
          },
        ],
        legend: {
          // data: ["2022年额度", "2023年额度"],
          data: ["2023年额度"],
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            fontSize: "20",
            fontFamily: 'Microsoft YaHei'
          },
          right: 'center',
          y: 5,
        },
      };
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
      let that = this
      myChart.on('click', function (param) {
        that.projectListTipShow = true
      })
      myChart.setOption(option);
    },
    closeTap () {
      this.echartEnterpriseShow = false
      this.mapTipShow = false
      this.echartSingleTipShow = false
      this.echartDoubleTipShow = false
      this.projectListTipShow = false
    },
    //点击弹窗左半部分
    popLeftClick () {
      if (this.titleUrl == '2.png') {
        this.titleUrl = '3.png'
      } else if (this.titleUrl == '7.png') {
        this.titleUrl = '8.png'
      } else if (this.titleUrl == '3.png') {
        this.titleUrl = '2.png'
      } else if (this.titleUrl == '8.png') {
        this.titleUrl = '7.png'
      } else if (this.titleUrl == '5.png') {
        this.titleUrl = '2.png'
      } else if (this.titleUrl == '10.png') {
        this.titleUrl = '7.png'
      }
    },
    //点击弹窗右半部分
    poprightClick () {
      if (this.titleUrl == '2.png') {
        this.titleUrl = '5.png'
      } else if (this.titleUrl == '7.png') {
        this.titleUrl = '10.png'
      } else if (this.titleUrl == '5.png') {
        this.titleUrl = '2.png'
      } else if (this.titleUrl == '10.png') {
        this.titleUrl = '7.png'
      } else if (this.titleUrl == '3.png') {
        this.titleUrl = '2.png'
      } else if (this.titleUrl == '8.png') {
        this.titleUrl = '7.png'
      }
    },
    // 标题弹窗
    showTitlePop (e, name) {
      this.closeTap()
      this.titleUrl = e
      this.titleName = name
      this.mapTipShow = true
    },
    changeYellow () {
      this.titleList.forEach((item, index) => {
        this.$set(this.titleList[index], 'type', 1)
      })
      this.$set(this.titleList[this.yellowCount], 'type', 2)
      if (this.yellowCount == 14) {
        this.yellowCount = 0
        this.yellowPosition += 315
      } else {
        if (this.yellowCount != 0) {
          this.yellowPosition += 315
        } else {
          this.yellowPosition = 40
        }
        this.yellowCount += 2
      }
    },
    numFormat (value) {
      if (!value) return '0'
      // var intPart = Number(value).toFixed(0) // 获取整数部分
      var intPart = parseInt(value)// 获取整数部分
      var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
      var floatPart = '.00' // 预定义小数部分
      var value2Array = value.toString().split('.')
      // =2表示数据有小数位
      if (value2Array.length === 2) {
        floatPart = value2Array[1].toString() // 拿到小数部分
        if (floatPart.length === 1) {
          // 补0
          return intPartFormat + '.' + floatPart + '0'
        } else {
          return intPartFormat + '.' + floatPart
        }
      } else {
        return intPartFormat
      }
    },
    changeTopColor () {
      this.list = document.getElementsByClassName('row-item')
      for (var i = 0; i < this.list.length; i++) {
        if (i == 1) {
          this.list[i].classList.add('light')
        } else {
          this.list[i].classList.remove('light')
        }
      }
      this.initChartL9()
    },
    scrollChange (index) {
      if (index == 18) {
        this.count = -1
      } else {
        this.count = index
      }
      if (this.count > 12 && this.count != 18) {
        this.countType = 1
      } else {
        this.countType = 0
      }
      for (var i = 0; i < this.list.length; i++) {
        if (i == 2) {
          this.list[i].classList.add('light')
        } else {
          this.list[i].classList.remove('light')
        }
      }
      this.chartCarousel.dispose()
      this.initChartL9()
    },
    initChartBall () {
      let myChart = echarts.init(this.$refs['echartBall'])
      var value = common2[0];
      var data = [value];
      option = {
        backgroundColor: "#042148",
        series: [
          {
            type: "liquidFill",
            radius: "80%",
            data: [0.45,0.5,0.4],
            // data: [
            //   {}
            // ],
            backgroundStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                // 水球体颜色
                colorStops: [
                  {
                    offset: 0,
                    color: "#010a11",
                  },
                  {
                    offset: 0.75,
                    color: "#203852",
                  },
                  {
                    offset: 1,
                    color: "#354e6d",
                  },
                ],
                globalCoord: false,
              },
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 0,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                  ],
                  globalCoord: false,
                },
              },
            },
            color: [
              {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#237386',
                },
                {
                  offset: 1,
                  color: '#0078C8',
                },],
              },
              {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#2F97A9',
                },
                {
                  offset: 1,
                  color: '#0078C8',
                },],
              },
              {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#48E0ED',
                },
                {
                  offset: 1,
                  color: '#0078C8',
                },],
              }
            ],
            label: {
              normal: {
                textStyle: {
                  color: "#fff", // x轴文字颜色
                  fontSize:'70'
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option)
    },
    initChartL1 () {
      let myChart = echarts.init(this.$refs['echartL1'])
      var value = left2[0];
      option = {
        backgroundColor: "#042148",
        series: [
          {
            type: "liquidFill",
            radius: "80%",
            data: [0.45,0.5,0.4],
            // data: [
            //   {}
            // ],
            backgroundStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                // 水球体颜色
                colorStops: [
                  {
                    offset: 0,
                    color: "#010a11",
                  },
                  {
                    offset: 0.75,
                    color: "#203852",
                  },
                  {
                    offset: 1,
                    color: "#354e6d",
                  },
                ],
                globalCoord: false,
              },
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 0,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                  ],
                  globalCoord: false,
                },
              },
            },
            color: [
              {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#237386',
                },
                {
                  offset: 1,
                  color: '#0078C8',
                },],
              },
              {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#2F97A9',
                },
                {
                  offset: 1,
                  color: '#0078C8',
                },],
              },
              {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#48E0ED',
                },
                {
                  offset: 1,
                  color: '#0078C8',
                },],
              }
            ],
            label: {
              normal: {
                textStyle: {
                  color: "#fff", // x轴文字颜色
                },
              },
            },
          },
        ],
      };

      myChart.setOption(option)
    },
    initChartL2 () {
      var chartData = left5
      var timer = null;
      var i = 0;

      let that = this

      var option = {
       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            //beta: 0
          },
          events: {
            // 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]);
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                  if (index == i) {
                    item.sliced = true
                    item.selected = true
                  }
                })
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                i++;
                if (i === len) {
                  i = 0;
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showTip3 = true
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                }
              }, 2000);
            },
            legendItemClick: function (event) {
              console.log(event);
              return true;
            }
          }
        },
        credits: {
          enabled: false  //去掉hightchats水印
        },
        legend: {
          // labelFormatter: function() {
          //     return 123;
          // },
          align: 'right',//横向位置
          verticalAlign: 'middle', // 纵向位置
          layout: "vertical",//横排还是竖排
          x: -110,
          y: 90,
          symbolWidth: 50,
          itemStyle: {
            fontSize: '20px',
            color: '#fff',
            x: 20,
            fontWeight: 0,
            fontFamily: 'Microsoft YaHei'
          },
        },
        title: {
          text: '主辅业计划占比',
          style: {
            color: '#fff',
            fontSize: 24,
            fontFamily: 'Microsoft YaHei',
          },
          align: 'center',
          verticalAlign: "bottom",
          x: -120
        },
        tooltip: {
          crosshairs: false,
          backgroundColor: 'rgba(0,0,0,0.5)',
          // positioner: function(e){
          //   console.log(e, this)
          // },
          useHTML: false, //开启html模式
          style: {
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (e) {
            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>亿，<b>${num}个</b>`
          },
          //pointFormat: 
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            showInLegend: true, // 图例
            cursor: 'pointer',
            size: 220,
            innerSize: 150, //环形图中间空白，0为饼图
            depth: 25, //立体高度
            slicedOffset: 21, //动画距离
            dataLabels: {
              enabled: false,  // 是否展示指示线
              format: '{point.name}: {point.percentage}'
            }
          },
        },
        series: [{
          type: 'pie',
          name: '占比',
          center: ['50%', '50%'],
          point: {
            events: {
              click: function (e) { //点击事件
                that.showChartLTipDouble(e.point.name)
              },
              mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                //console.log(e) 
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                })
                chartData[e.target.index].sliced = true
                chartData[e.target.index].selected = true
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                timer && clearInterval(timer);
              },
              mouseOut: function () { // 鼠标移出后需要继续执行轮播
                var points = chart.series[0].points;
                var len = points.length;

                timer && clearInterval(timer);
                timer = setInterval(function () {
                  autoTooltip(points[i]);
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                    if (index == i) {
                      item.sliced = true
                      item.selected = true
                    }
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                  i++;
                  if (i === len) {
                    i = 0;
                    chartData.forEach((item, index) => {
                      item.sliced = false
                      item.selected = false
                    })
                    chart.update({
                      series: [{
                        type: 'pie',
                        name: '占比',
                        point: {
                          events: {
                            click: function (e) {
                              that.showChartLTipDouble(e.point.name)
                            }
                          }
                        },
                        data: chartData
                      }]
                    })
                  }
                }, 2000);
              }
            }
          },
          data: chartData
        }]
      }

      var chart = Highcharts.chart('echartL2', option);

      function autoTooltip (point) {
        chart.tooltip.refresh(point);
      }
    },
    initChartL3 () {
      var chartData = left6
      var timer = null;
      var i = 0;

      let that = this
      var chart = Highcharts.chart('echartL3', {
       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            //beta: 0
          },
          events: {
            // 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]);
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                  if (index == i) {
                    item.sliced = true
                    item.selected = true
                  }
                })
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                i++;
                if (i === len) {
                  i = 0;
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                }
              }, 2000);
            },
            legendItemClick: function (event) {
              that.showChartLTipDouble(e.point.name)
              return true;
            }
          }
        },
        credits: {
          enabled: false  //去掉hightchats水印
        },
        legend: {
          // labelFormatter: function() {
          //     return 123;
          // },
          align: 'right',//横向位置
          verticalAlign: 'middle', // 纵向位置
          layout: "vertical",//横排还是竖排
          x: -70,
          y: 90,
          symbolWidth: 50,
          itemStyle: {
            fontSize: '20px',
            color: '#fff',
            x: 20,
            fontWeight: 0,
            fontFamily: 'Microsoft YaHei'
          },
        },
        title: {
          text: '项目管理类型',
          style: {
            color: '#fff',
            fontSize: 24,
            fontFamily: 'Microsoft YaHei'
          },
          align: 'center',
          verticalAlign: "bottom",
          x: -120
        },
        tooltip: {
          crosshairs: true,
          backgroundColor: 'rgba(0,0,0,0.5)',
          // positioner: function(e){
          //   console.log(e, this)
          // },
          useHTML: false, //开启html模式
          style: {
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (e) {
            //console.log(this)
            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>亿，<b>${num}个</b>`
          },
          //pointFormat: 
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            showInLegend: true, // 图例
            cursor: 'pointer',
            size: 220,
            innerSize: 150, //环形图中间空白，0为饼图
            depth: 25, //立体高度
            slicedOffset: 21, //动画距离
            dataLabels: {
              enabled: false,  // 是否展示指示线
              format: '{point.name}: {point.percentage}'
            }
          },
        },
        series: [{
          type: 'pie',
          name: '占比',
          // center: ['70%', '50%'],
          point: {
            events: {
              click: function (e) { //点击事件
                that.showChartLTipDouble(e.point.name)
              },
              mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                //console.log(e) 
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                })
                chartData[e.target.index].sliced = true
                chartData[e.target.index].selected = true
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                timer && clearInterval(timer);
              },
              mouseOut: function () { // 鼠标移出后需要继续执行轮播
                var points = chart.series[0].points;
                var len = points.length;

                timer && clearInterval(timer);
                timer = setInterval(function () {
                  autoTooltip(points[i]);
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                    if (index == i) {
                      item.sliced = true
                      item.selected = true
                    }
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                  i++;
                  if (i === len) {
                    i = 0;
                    chartData.forEach((item, index) => {
                      item.sliced = false
                      item.selected = false
                    })
                    chart.update({
                      series: [{
                        type: 'pie',
                        name: '占比',
                        point: {
                          events: {
                            click: function (e) {
                              console.log(e)
                            }
                          }
                        },
                        data: chartData
                      }]
                    })
                  }
                }, 2000);
              }
            }
          },
          data: chartData
        }]
      });

      function autoTooltip (point) {
        chart.tooltip.refresh(point);
      }
    },
    initChartL4 () {
      let myChart = echarts.init(document.getElementById("echartL4"));
      let option = {
        grid: {
          top: 45,
          right: 0,
          left: 60,
          bottom: 80,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: commonCompany,
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            rotate: 40,
            textStyle: {
              color: "white",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: '亿元',
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 20,
            fontFamily: 'Microsoft YaHei'
          },
        },
        series: [
          {
            name: "2023年额度",
            type: "bar",
            data: left3[0],
            showBackground: true,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "30%",
            itemStyle: {
              // barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#082550',
                },
                {
                  offset: 1,
                  color: '#957DFF',

                },
              ]),
            },
          },
        ],
        legend: {
          // data: ["2022年额度", "2023年额度"],
          data: ["2023年额度"],
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            fontSize: "20",
            fontFamily: 'Microsoft YaHei'
          },
          right: 'center',
          y: 5,
          // icon: "roundRect",
          // 小图标的宽高
        },
      };
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
      let that = this
      myChart.on('click', function (param) {
        that.titleName = param.name
        that.echartEnterpriseShow = true
        setTimeout(() => {
          that.initChartBall()
        });
      })
      myChart.setOption(option);
    },
    initChartL5 () {
      var chartData = left7
      var timer = null;
      var i = 0;

      let that = this

      var option = {
       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            //beta: 0
          },
          events: {
            // 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]);
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                  if (index == i) {
                    item.sliced = true
                    item.selected = true
                  }
                })
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                i++;
                if (i === len) {
                  i = 0;
                }
              }, 2000);
            },
            legendItemClick: function (event) {
              console.log(event);
              return true;
            }
          }
        },
        credits: {
          enabled: false  //去掉hightchats水印
        },
        legend: {
          // labelFormatter: function() {
          //     return 123;
          // },
          align: 'right',//横向位置
          verticalAlign: 'middle', // 纵向位置
          layout: "vertical",//横排还是竖排
          x: -110,
          y: 50,
          symbolWidth: 50,
          itemDistance: 50,
          itemStyle: {
            fontSize: '20px',
            color: '#fff',
            x: 20,
            fontWeight: 0,
            fontFamily: 'Microsoft YaHei'
          },
        },
        title: {
          text: '传统产业分析',
          style: {
            color: '#fff',
            fontSize: 24,
            fontFamily: 'Microsoft YaHei'
          },
          align: 'center',
          verticalAlign: "bottom",
          x: -120
        },
        tooltip: {
          crosshairs: true,
          backgroundColor: 'rgba(0,0,0,0.5)',
          // positioner: function(e){
          //   console.log(e, this)
          // },
          useHTML: false, //开启html模式
          style: {
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (e) {
            //console.log(this)
            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>亿，<b>${num}个</b>`
          },
          //pointFormat: 
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            showInLegend: true, // 图例
            cursor: 'pointer',
            size: 220,
            innerSize: 150, //环形图中间空白，0为饼图
            depth: 25, //立体高度
            slicedOffset: 21, //动画距离
            dataLabels: {
              enabled: false,  // 是否展示指示线
              format: '{point.name}: {point.percentage}'
            }
          },
        },
        series: [{
          type: 'pie',
          name: '占比',
          //center: ['35%','50%'],
          point: {
            events: {
              click: function (e) { //点击事件
                that.showChartLTipDouble(e.point.name)
              },
              mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                //console.log(e) 
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                })
                chartData[e.target.index].sliced = true
                chartData[e.target.index].selected = true
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                timer && clearInterval(timer);
              },
              mouseOut: function () { // 鼠标移出后需要继续执行轮播
                var points = chart.series[0].points;
                var len = points.length;

                timer && clearInterval(timer);
                timer = setInterval(function () {
                  autoTooltip(points[i]);
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                    if (index == i) {
                      item.sliced = true
                      item.selected = true
                    }
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                  i++;
                  if (i === len) {
                    i = 0;
                  }
                }, 2000);
              }
            }
          },
          data: chartData
        }]
      }

      var chart = Highcharts.chart('echartL5', option);

      function autoTooltip (point) {
        chart.tooltip.refresh(point);
      }
    },
    initChartL6 () {
      var chartData = left8
      var timer = null;
      var i = 0;

      let that = this

      var option = {
        colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            //beta: 0
          },
          events: {
            // 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]);
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                  if (index == i) {
                    item.sliced = true
                    item.selected = true
                  }
                })
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                i++;
                if (i === len) {
                  i = 0;
                }
              }, 2000);
            },
            legendItemClick: function (event) {
              console.log(event);
              return true;
            }
          }
        },
        credits: {
          enabled: false  //去掉hightchats水印
        },
        legend: {
          // labelFormatter: function() {
          //     return 123;
          // },
          align: 'right',//横向位置
          verticalAlign: 'middle', // 纵向位置
          layout: "vertical",//横排还是竖排
          x: -30,
          y: 30,
          symbolWidth: 50,
          itemDistance: 50,
          itemStyle: {
            fontSize: '20px',
            color: '#fff',
            x: 20,
            fontWeight: 0,
            fontFamily: 'Microsoft YaHei'
          },
        },
        title: {
          text: '战略性新兴产业',
          style: {
            color: '#fff',
            fontSize: 24,
            fontFamily: 'Microsoft YaHei'
          },
          align: 'center',
          verticalAlign: "bottom",
          x: -120
        },
        tooltip: {
          crosshairs: true,
          backgroundColor: 'rgba(0,0,0,0.5)',
          // positioner: function(e){
          //   console.log(e, this)
          // },
          useHTML: false, //开启html模式
          style: {
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (e) {
            //console.log(this)
            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>亿，<b>${num}个</b>`
          },
          //pointFormat: 
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            showInLegend: true, // 图例
            cursor: 'pointer',
            size: 220,
            innerSize: 150, //环形图中间空白，0为饼图
            depth: 25, //立体高度
            slicedOffset: 21, //动画距离
            dataLabels: {
              enabled: false,  // 是否展示指示线
              format: '{point.name}: {point.percentage}'
            }
          },
        },
        series: [{
          type: 'pie',
          name: '占比',
          //center: ['35%','50%'],
          point: {
            events: {
              click: function (e) { //点击事件
                that.showChartLTipDouble(e.point.name)
              },
              mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                //console.log(e) 
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                })
                chartData[e.target.index].sliced = true
                chartData[e.target.index].selected = true
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                timer && clearInterval(timer);
              },
              mouseOut: function () { // 鼠标移出后需要继续执行轮播
                var points = chart.series[0].points;
                var len = points.length;

                timer && clearInterval(timer);
                timer = setInterval(function () {
                  autoTooltip(points[i]);
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                    if (index == i) {
                      item.sliced = true
                      item.selected = true
                    }
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                  i++;
                  if (i === len) {
                    i = 0;
                  }
                }, 2000);
              }
            }
          },
          data: chartData
        }]
      }

      var chart = Highcharts.chart('echartL6', option);

      function autoTooltip (point) {
        chart.tooltip.refresh(point);
      }
    },
    initChartL7 () {
      var chartData = left9
      var timer = null;
      var i = 0;

      let that = this

      var option = {
        colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            //beta: 0
          },
          events: {
            // 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]);
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                  if (index == i) {
                    item.sliced = true
                    item.selected = true
                  }
                })
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                i++;
                if (i === len) {
                  i = 0;
                }
              }, 2000);
            },
            legendItemClick: function (event) {
              console.log(event);
              return true;
            }
          }
        },
        credits: {
          enabled: false  //去掉hightchats水印
        },
        title: {
          text: '特色优势产业',
          style: {
            color: '#fff',
            fontSize: 24,
            fontFamily: 'Microsoft YaHei'
          },
          align: 'center',
          verticalAlign: "bottom",
          x: -120
        },
        legend: {
          // labelFormatter: function() {
          //     return 123;
          // },
          align: 'right',//横向位置
          verticalAlign: 'middle', // 纵向位置
          layout: "vertical",//横排还是竖排
          x: -50,
          y: 30,
          symbolWidth: 50,
          itemDistance: 50,
          itemStyle: {
            fontSize: '20px',
            color: '#fff',
            x: 20,
            fontWeight: 0,
            fontFamily: 'Microsoft YaHei'
          },
        },
        tooltip: {
          crosshairs: true,
          backgroundColor: 'rgba(0,0,0,0.5)',
          // positioner: function(e){
          //   console.log(e, this)
          // },
          useHTML: false, //开启html模式
          style: {
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (e) {
            //console.log(this)
            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>亿，<b>${num}个</b>`
          },
          //pointFormat: 
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            showInLegend: true, // 图例
            cursor: 'pointer',
            size: 220,
            innerSize: 150, //环形图中间空白，0为饼图
            depth: 25, //立体高度
            slicedOffset: 21, //动画距离
            dataLabels: {
              enabled: false,  // 是否展示指示线
              format: '{point.name}: {point.percentage}'
            }
          },
        },
        series: [{
          type: 'pie',
          name: '占比',
          //center: ['35%','50%'],
          point: {
            events: {
              click: function (e) { //点击事件
                that.showChartLTipDouble(e.point.name)
              },
              mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                //console.log(e) 
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                })
                chartData[e.target.index].sliced = true
                chartData[e.target.index].selected = true
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                timer && clearInterval(timer);
              },
              mouseOut: function () { // 鼠标移出后需要继续执行轮播
                var points = chart.series[0].points;
                var len = points.length;

                timer && clearInterval(timer);
                timer = setInterval(function () {
                  autoTooltip(points[i]);
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                    if (index == i) {
                      item.sliced = true
                      item.selected = true
                    }
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                  i++;
                  if (i === len) {
                    i = 0;
                  }
                }, 2000);
              }
            }
          },
          data: chartData
        }]
      }

      var chart = Highcharts.chart('echartL7', option);

      function autoTooltip (point) {
        chart.tooltip.refresh(point);
      }

    },
    initChartL8 () {
      var chartData = left10
      var timer = null;
      var i = 0;

      let that = this

      var option = {
       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            //beta: 0
          },
          events: {
            // 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]);
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                  if (index == i) {
                    item.sliced = true
                    item.selected = true
                  }
                })
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                i++;
                if (i === len) {
                  i = 0;
                }
              }, 2000);
            },
            legendItemClick: function (event) {
              console.log(event);
              return true;
            }
          }
        },
        credits: {
          enabled: false  //去掉hightchats水印
        },
        title: {
          text: '公共基础等产业',
          style: {
            color: '#fff',
            fontSize: 24,
            fontFamily: 'Microsoft YaHei'
          },
          align: 'center',
          verticalAlign: "bottom",
          x: -120
        },
        legend: {
          // labelFormatter: function() {
          //     return 123;
          // },
          align: 'right',//横向位置
          verticalAlign: 'middle', // 纵向位置
          layout: "vertical",//横排还是竖排
          x: -70,
          y: 50,
          symbolWidth: 50,
          itemDistance: 50,
          itemStyle: {
            fontSize: '20px',
            color: '#fff',
            x: 20,
            fontWeight: 0,
            fontFamily: 'Microsoft YaHei'
          },
        },
        tooltip: {
          crosshairs: true,
          backgroundColor: 'rgba(0,0,0,0.5)',
          // positioner: function(e){
          //   console.log(e, this)
          // },
          useHTML: false, //开启html模式
          style: {
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (e) {
            //console.log(this)
            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>亿，<b>${num}个</b>`
          },
          //pointFormat: 
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            showInLegend: true, // 图例
            cursor: 'pointer',
            size: 220,
            innerSize: 150, //环形图中间空白，0为饼图
            depth: 25, //立体高度
            slicedOffset: 21, //动画距离
            dataLabels: {
              enabled: false,  // 是否展示指示线
              format: '{point.name}: {point.percentage}'
            }
          },
        },
        series: [{
          type: 'pie',
          name: '占比',
          //center: ['35%','50%'],
          point: {
            events: {
              click: function (e) { //点击事件
                that.showChartLTipDouble(e.point.name)
              },
              mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                //console.log(e) 
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                })
                chartData[e.target.index].sliced = true
                chartData[e.target.index].selected = true
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                timer && clearInterval(timer);
              },
              mouseOut: function () { // 鼠标移出后需要继续执行轮播
                var points = chart.series[0].points;
                var len = points.length;

                timer && clearInterval(timer);
                timer = setInterval(function () {
                  autoTooltip(points[i]);
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                    if (index == i) {
                      item.sliced = true
                      item.selected = true
                    }
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                  i++;
                  if (i === len) {
                    i = 0;
                  }
                }, 2000);
              }
            }
          },
          data: chartData
        }]
      }

      var chart = Highcharts.chart('echartL8', option);

      function autoTooltip (point) {
        chart.tooltip.refresh(point);
      }
    },
    initChartL9 () {
      this.chartCarousel = echarts.init(document.getElementById("echartL9"));
      option = {
        tooltip: {
          trigger: 'axis',
          formatter: '指标：' + '{c0}' + '<br/>' + '发展线：' + '{c1}' + '<br/>' + '生存线：' + '{c2}',  //+ '<br/>'+ '{a1}：{c1}' + '%',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: '10%',
          right: '5%',
          left: '12%',
          bottom: '15%',
        },
        xAxis: {
          // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
          data: left15[this.countType],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 30,
            textStyle: {
              color: '#fff', //X轴文字颜色
              fontSize: 20,
              fontFamily: 'Microsoft YaHei'
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value}%',
              textStyle: {
                color: '#fff',
                fontSize: 20,
                fontFamily: 'Microsoft YaHei'
              },
            },
            nameTextStyle: {
              color: '#ebf8ac',
              fontSize: 16,
              fontFamily: 'Microsoft YaHei'
            },
          },
        ],
        series: [
          {
            name: '实际值',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            // data: [70, 52, 33, 41, 52],
            data: left12[this.count + 1][2]
          },
          {
            name: '',
            type: 'line',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: 'green',
                  },
                ]),
              },
            },
            // data: [20, 30, 15, 28, 36],
            data: left12[this.count + 1][1]
          },
          {
            name: '',
            type: 'line',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: 'yellow',
                  },
                ]),
              },
            },
            // data: [15, 22, 17, 33, 14],
            data: left12[this.count + 1][0]
          },
        ],
      }
      let that = this
      this.chartCarousel.on('click', function (param) {
        that.titleName = param.name
        that.echartSingleTipShow = true
        setTimeout(() => {
          that.initChartLTip()
        });
      })
      this.chartCarousel.setOption(option)
      // tools.loopShowTooltip(myChart, option, {
      //   nterval: 2000,
      //   loopSeries: true,
      // })
    },
    initChartL10 () {
      let myChart = echarts.init(document.getElementById("echartL10"));
      let option = {
        title: {
          text: '固定资产进度分布',
          textStyle: {
            color: '#69C0FF',
            fontSize: 30,
            fontWeight: 500,
            fontFamily: 'Microsoft YaHei'
          },
          top: '20',
          left: '20'
        },
        textStyle: {
          color: '#fff',
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + '：' + params[0].data[2] + '个，' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + '：' + params[1].data[2] + '个，' + params[1].data[3] + '亿元';
            return tip
          },
          textStyle: {
            color: '#ffffff',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
          axisPointer: {
            lineStyle: {
              type: 'dashed',
              width: 2,
              color: 'rgba(255,255,255,0.6)'
            },
            animation: true
          }
        },
        grid: {
          top: '0%',
          right: '5%',
          left: '15%',
          bottom: '-10%',
        },
        yAxis: {
          data: ['备案', '特别监管'],
          splitLine: {
            show: false,
            lineStyle: {
              color: '#68b4dd66',
              type: 'dashed',
            },
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value}',
            textStyle: {
              color: '#fff',
              fontSize: 20,
              padding: [0, -10, 0, 0],
              fontFamily: 'Microsoft YaHei',
            },
          },
          nameTextStyle: {
            color: '#ebf8ac',
            fontSize: 16,
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: ['项目储备', '项目立项', '可研论证', '投资决策'],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', //X轴文字颜色
              fontSize: 20,
              padding: [-320, 0, 0, 0],
              fontFamily: 'Microsoft YaHei'
            },
          }
        },
        series: [
          {
            name: '特别监管',
            type: 'scatter',
            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 3;
            },
            label: {
              emphasis: {
                show: true,
                formatter: function (param) {
                  return param.data[2];
                },
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                color: '#40A9FF'
              }
            },
            data: left13[0]
          },
          {
            name: '备案',
            type: 'scatter',
            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 3;
            },
            label: {
              emphasis: {
                show: true,
                formatter: function (param) {
                  return param.data[2];
                },
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                color: '#45DAD1'
              }
            },
            data: left13[1]
          },
        ]
      }
      let that = this
      myChart.on('click', function (param) {
        that.showChartLTipDouble('固定资产')
      })
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
    },
    initChartL11 () {
      let myChart = echarts.init(document.getElementById("echartL11"));
      let option = {
        title: {
          text: '股权类进度分布',
          textStyle: {
            color: '#69C0FF',
            fontSize: 30,
            fontWeight: 500,
            fontFamily: 'Microsoft YaHei'
          },
          top: '20',
          left: '20'
        },
        textStyle: {
          color: '#fff',
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + '：' + params[0].data[2] + '个，' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + '：' + params[1].data[2] + '个，' + params[1].data[3] + '亿元';
            return tip
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
          axisPointer: {
            lineStyle: {
              type: 'dashed',
              width: 2,
              color: 'rgba(255,255,255,0.6)'
            },
            animation: true
          }
        },
        grid: {
          top: '0%',
          right: '5%',
          left: '15%',
          bottom: '-10%',
        },
        yAxis: {
          data: ['备案', '特别监管'],
          splitLine: {
            show: false,
            lineStyle: {
              color: '#68b4dd66',
              type: 'dashed',
            },
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value}',
            textStyle: {
              fontSize: 20,
              padding: [0, -10, 0, 0],
              fontFamily: 'Microsoft YaHei'
            },
          },
          nameTextStyle: {
            color: '#ebf8ac',
            fontSize: 16,
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: ['项目储备', '项目立项', '可研论证', '投资决策'],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', //X轴文字颜色
              fontSize: 20,
              padding: [-320, 0, 0, 0],
              fontFamily: 'Microsoft YaHei'
            },
          },
        },
        series: [
          {
            name: '',
            type: 'scatter',
            symbol: 'circle',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 3;
            },
            label: {
              emphasis: {
                show: true,
                formatter: function (param) {
                  return param.data[2];
                },
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                color: '#40A9FF'
              }
            },
            data: left14[0]
          },
          {
            name: '',
            type: 'scatter',
            symbol: 'circle',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 3;
            },
            label: {
              emphasis: {
                show: true,
                formatter: function (param) {
                  return param.data[2];
                },
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                color: '#45DAD1'
              }
            },
            data: left14[1]
          },
        ]
      }
      let that = this
      myChart.on('click', function (param) {
        that.showChartLTipDouble('股权类')
      })
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
    },
    // 大屏二
    initChartC1 () {
      var chartData = center2
      var timer = null;
      var i = 0;
    
      let that = this
    
      var option = {
       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            //beta: 0
          },
          events: {
            // 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]);
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                  if (index == i) {
                    item.sliced = true
                    item.selected = true
                  }
                })
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                i++;
                if (i === len) {
                  i = 0;
                }
              }, 2000);
            },
            legendItemClick: function (event) {
              console.log(event);
              return true;
            }
          }
        },
        credits: {
          enabled: false  //去掉hightchats水印
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          y: -10,
          verticalAlign: 'bottom',
          itemStyle: {
            fontSize: '20px',
            color: '#fff',
            fontWeight: 0,
            fontFamily: 'Microsoft YaHei'
          }
        },
        tooltip: {
          crosshairs: true,
          backgroundColor: 'rgba(0,0,0,0.5)',
          useHTML: false, //开启html模式
          style: {
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (e) {
            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: 
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            showInLegend: true, // 图例
            cursor: 'pointer',
            size: 500,
            innerSize: 330, //环形图中间空白，0为饼图
            depth: 50, //立体高度
            slicedOffset: 40, //动画距离
            dataLabels: {
              enabled: false,  // 是否展示指示线
              format: '{point.name}: {point.percentage}'
            }
          },
        },
        title: {
          text: '',
          style: {
            color: '#fff',
            fontSize: 24,
            fontFamily: 'Microsoft YaHei'
          },
          align: 'center',
          verticalAlign: "bottom",
          x: -120
        },
        series: [{
          type: 'pie',
          name: '占比',
          center: ['74%','50%'],
          point: {
            events: {
              click: function (e) { //点击事件
                that.showChartLTipDouble(e.point.name)
              },
              mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                //console.log(e) 
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                })
                chartData[e.target.index].sliced = true
                chartData[e.target.index].selected = true
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                timer && clearInterval(timer);
              },
              mouseOut: function () { // 鼠标移出后需要继续执行轮播
                var points = chart.series[0].points;
                var len = points.length;
    
                timer && clearInterval(timer);
                timer = setInterval(function () {
                  autoTooltip(points[i]);
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                    if (index == i) {
                      item.sliced = true
                      item.selected = true
                    }
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                  i++;
                  if (i === len) {
                    i = 0;
                  }
                }, 2000);
              }
            }
          },
          data: chartData
        }]
      }
    
      var chart = Highcharts.chart('echartC1', option);
    
      function autoTooltip (point) {
        chart.tooltip.refresh(point);
      }
    },
    initChartC2 () {
      let that = this
      let myChart = echarts.init(this.$refs['echartC2'])
      myChart.on('showTip', (params) => {
        // 如果是7或者15并且满足防抖则切换
        if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartC2Fd) {
          that.echartC2Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
            myChart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartC2Fd = true
            }, 2000)
          }, 1900);
          // 如果是17表示到了最后一个，那么重新来一遍
        } else if (params.dataIndex == 17 && that.echartC2Fd) {
          that.echartC2Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = 0
            option.dataZoom[0].startValue = 5
            myChart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartC2Fd = true
            }, 2000)
          }, 1900)
        }
      })
      let option = {
        tooltip: {
          formatter: data => {
            return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿`
          },
          trigger: 'axis',
          axisPointer: {
            // type: 'cross',',
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
        },
        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,  //鼠标滚轮触发滚动
          }
        ],
        grid: {
          top: '10%',
          right: '3%',
          left: '7%',
          bottom: '15%',
        },
        legend: {
          top: '1',
          right: 'center',
          textStyle: {
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: center3.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 40,
            textStyle: {
              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: '20',
                fontFamily: 'Microsoft YaHei'
              },
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 20,
              fontFamily: 'Microsoft YaHei'
            },
          },
        ],
        series: [
          {
            name: '计划投资',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: center3.map(item => item.value),
          },
          {
            name: '实际投资',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#957DFF',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: center3.map(item => item.value2),
          },
        ],
      }
      myChart.on('click', function (param) {
        that.projectListTipShow = true
      })
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
      // let arr = center3.map(item => item.value2)
      // this.timeOut = setInterval(function () {

      //   let startValue = myChart.getModel().option.dataZoom[0].startValue;
      //   let endValue = myChart.getModel().option.dataZoom[0].endValue;
      //   let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
      //   let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
      //   // 每次向后滚动一个，最后一个从头开始。
      //   // console.log(option.dataZoom[0].endValue);

      //   if (option.dataZoom[0].endValue >= 12) {
      //     option.dataZoom[0].endValue = 5
      //     option.dataZoom[0].startValue = 0
      //   } else {
      //     option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
      //     option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
      //   }

      //   // myChart.dispatchAction({
      //   //   type: 'showTip',
      //   //   seriesIndex: 0,
      //   //   dataIndex: startValue +1,
      //   // });
      //   myChart.setOption(option);
      // }, 12000);

    },
    convertData (data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          })
        }
      }
      return res
    },
    initProvinceChart () {
      var data = [
        { name: '大同市', value: 60.35, value2: 28 },
        { name: '朔州市', value: 33.61, value2: 13 },
        { name: '忻州市', value: 73.35, value2: 25 },
        { name: '吕梁市', value: 109.04, value2: 45 },
        { name: '太原市', value: 251.67, value2: 113 },
        { name: '阳泉市', value: 25.12, value2: 28 },
        { name: '晋中市', value: 148.57, value2: 52 },
        { name: '临汾市', value: 130.55, value2: 30 },
        { name: '长治市', value: 103.00, value2: 23 },
        { name: '运城市', value: 41.06, value2: 23 },
        { name: '晋城市', value: 45.43, value2: 31 }
      ]
      this.geoCoordMap = []
      var moveLine = {
        normal: [
          {
            fromName: '太原市',
            toName: '吕梁市',
            coords: [
              [112.3352, 37.9413],
              [111.3574, 37.7325],
            ],
          },
          {
            fromName: '太原市',
            toName: '忻州市',
            coords: [
              [112.3352, 37.9413],
              [112.4561, 38.8971],
            ],
          },
          {
            fromName: '太原市',
            toName: '临汾市',
            coords: [
              [112.3352, 37.9413],
              [111.4783, 36.1615],
            ],
          },
          {
            fromName: '太原市',
            toName: '阳泉市',
            coords: [
              [112.3352, 37.9413],
              [113.4778, 38.0951],
            ],
          },
          {
            fromName: '太原市',
            toName: '晋中市',
            coords: [
              [112.3352, 37.9413],
              [112.7747, 37.37],
            ],
          },
          {
            fromName: '太原市',
            toName: '运城市',
            coords: [
              [112.3352, 37.9413],
              [111.1487, 35.2002],
            ],
          },
          {
            fromName: '太原市',
            toName: '大同市',
            coords: [
              [112.3352, 37.9413],
              [113.7854, 39.8035],
            ],
          },
          {
            fromName: '太原市',
            toName: '晋城市',
            coords: [
              [112.3352, 37.9413],
              [112.7856, 35.6342],
            ],
          },
          {
            fromName: '太原市',
            toName: '长治市',
            coords: [
              [112.3352, 37.9413],
              [112.8625, 36.4746],
            ],
          },
          {
            fromName: '太原市',
            toName: '朔州市',
            coords: [
              [112.3352, 37.9413],
              [113.0713, 39.6991],
            ],
          },
        ],
      }
      /*获取地图数据*/
      this.mapChart = echarts.init(this.$refs['echarts-map'])
      echarts.registerMap('shanxi', shanxi)
      var mapFeatures = echarts.getMap('shanxi').geoJson.features
      mapFeatures.forEach(v => {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        this.geoCoordMap[name] = v.properties.centroid
        // 按照地图乱序
        // data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
      })
      let option = {
        tooltip: {
          padding: 15,
          enterable: true,
          transitionDuration: 1,
          formatter: (params, ticket, callback) => {
            // 清空所有轮播
            for (var k in this.geoCoordMap) {
              this.mapChart.dispatchAction({
                // type: 'geoUnSelect',
                type: 'downplay',
                name: k,
              })
            }
            // 如果鼠标滑动到线线上面，则返回空
            this.mapChart.dispatchAction({
              // type: 'geoSelect',
              type: 'highlight',
              name: params.name,
            })
            if (params.componentSubType == 'lines') {
              return
            }
            if (params.componentSubType == 'scatter') {
              let tipHtml = `
              <div class="tooltip-cont">
                <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
                <p>总投资额：<span>${params.data.value[2]}亿</span></p>
            </div>`
              callback(ticket, tipHtml)
              return tipHtml
            }
            if (params.componentSubType == 'map') {
              let tipHtml = `
              <div class="tooltip-cont">
              <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
                <p>总投资额：<span>${params.data.value}亿</span></p>
            </div>`
              callback(ticket, tipHtml)
              return tipHtml
            }

          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 300,
          right: 0,
          bottom: 0,
          text: ['高', '低'],
          textStyle: {
            color: '#f1f1f1'
          },
          realtime: false,
          calculable: false,
          inRange: {
            color: ['lightskyblue', '#2754b7']
          }
        },
        geo: {
          show: true,
          map: 'shanxi',
          layoutCenter: ['50%', '50%'], //地图位置
          layoutSize: '65%',
          zoom: 1.5,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#1946a8',
              shadowColor: '#1946a8',
              borderWidth: 1, //设置外层边框
              borderColor: '#1946a8',
              shadowOffsetX: 10,
              shadowOffsetY: 5,
              shadowBlur: 2,
            },
            emphasis: {
              areaColor: '#1946a8',
              borderColor: '#d4bc1d',
              borderWidth: 2, //设置外层边框
            },
          },
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(data),
            symbolSize: function (val) {
              return 10
            },
            label: {
              normal: {
                formatter: '{b}',
                position: [10, 10],
                fontSize: 30,
                fontFamily: 'Microsoft YaHei',
                fontWeight: 600,
                fontStyle: 'italic',
                color: '#fff',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: '#000',
                borderWidth: 2,
                borderColor: '#fff',
              },
            },
          },
          {
            type: 'map',
            map: this.mapName,
            geoIndex: 0,
            aspectScale: 1.5, //长宽比
            showLegendSymbol: true, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
              },
              emphasis: {
                areaColor: '#2B91B7',
              },
            },
            animation: false,
            data: data,
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 6,
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value
                })
                .slice(0, 5)
            ),
            symbolSize: function (val) {
              return 15
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'left',
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow',
              },
            },
            zlevel: 1000,
          },
          // {
          //   name: '线路',
          //   type: 'lines',
          //   zlevel: 2,
          //   effect: {
          //     show: true,
          //     period: 4, //箭头指向速度，值越小速度越快
          //     trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          //     symbol: 'arrow', //箭头图标
          //     symbolSize: 5, //图标大小
          //   },
          //   lineStyle: {
          //     normal: {
          //       color: '#00FFFF',
          //       width: 1,
          //       type: 'dashed',
          //       opacity: 0.5, //尾迹线条透明度
          //       curveness: -0.3, //尾迹线条曲直度
          //     },
          //   },
          //   data: moveLine.normal,
          // },
        ],
      }
      let that = this
      this.mapChart.on('click', function (params) {
        if (params.name == '太原市') {
          that.showChartLTipDouble('太原市')
        }
      })
      tools.loopShowTooltip(this.mapChart, option, {
        interval: 2000,
        loopSeries: false,
      });
      this.mapChart.setOption(option)
    },
    initChinaChart () {
      var data = []
      this.geoCoordMap = []
      // var moveLine = {
      //   normal: [
      //     {
      //       fromName: '太原市',
      //       toName: '吕梁市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [111.3574, 37.7325],
      //       ],
      //     },
      //     {
      //       fromName: '太原市',
      //       toName: '忻州市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [112.4561, 38.8971],
      //       ],
      //     },
      //     {
      //       fromName: '太原市',
      //       toName: '临汾市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [111.4783, 36.1615],
      //       ],
      //     },
      //     {
      //       fromName: '太原市',
      //       toName: '阳泉市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [113.4778, 38.0951],
      //       ],
      //     },
      //     {
      //       fromName: '太原市',
      //       toName: '晋中市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [112.7747, 37.37],
      //       ],
      //     },
      //     {
      //       fromName: '太原市',
      //       toName: '运城市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [111.1487, 35.2002],
      //       ],
      //     },
      //     {
      //       fromName: '太原市',
      //       toName: '大同市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [113.7854, 39.8035],
      //       ],
      //     },
      //     {
      //       fromName: '太原市',
      //       toName: '晋城市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [112.7856, 35.6342],
      //       ],
      //     },
      //     {
      //       fromName: '太原市',
      //       toName: '长治市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [112.8625, 36.4746],
      //       ],
      //     },
      //     {
      //       fromName: '太原市',
      //       toName: '朔州市',
      //       coords: [
      //         [112.3352, 37.9413],
      //         [113.0713, 39.6991],
      //       ],
      //     },
      //   ],
      // }
      /*获取地图数据*/
      this.mapChart = echarts.init(this.$refs['echarts-map'])
      echarts.registerMap('shanxi', china)
      var mapFeatures = echarts.getMap('shanxi').geoJson.features
      mapFeatures.forEach(v => {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        this.geoCoordMap[name] = v.properties.cp
        data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
      })
      let option = {
        tooltip: {
          padding: 15,
          enterable: true,
          transitionDuration: 1,
          formatter: (params, ticket, callback) => {
            // 清空所有轮播
            for (var k in this.geoCoordMap) {
              this.mapChart.dispatchAction({
                // type: 'geoUnSelect',
                type: 'downplay',
                name: k,
              })
            }
            // 如果鼠标滑动到线线上面，则返回空
            this.mapChart.dispatchAction({
              // type: 'geoSelect',
              type: 'highlight',
              name: params.name,
            })
            // if (params.componentSubType == 'lines') {
            //   return
            // }
            // if (params.componentSubType == 'scatter') {
            //   let tipHtml = `
            //   <div class="tooltip-cont">
            //     <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
            //     <p>总投资额：<span>${params.data.value[2]}亿</span></p>
            // </div>`
            //   callback(ticket, tipHtml)
            //   return tipHtml
            // }
            // if (params.componentSubType == 'map') {
            //   let tipHtml = `
            //   <div class="tooltip-cont">
            //   <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
            //     <p>总投资额：<span>${params.data.value}亿</span></p>
            // </div>`
            //   callback(ticket, tipHtml)
            //   return tipHtml
            // }

          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 300,
          right: 0,
          bottom: 0,
          text: ['高', '低'],
          textStyle: {
            color: '#f1f1f1'
          },
          realtime: false,
          calculable: false,
          inRange: {
            color: ['lightskyblue', '#2754b7']
          }
        },
        geo: {
          show: true,
          map: 'shanxi',
          layoutCenter: ['50%', '50%'], //地图位置
          layoutSize: '65%',
          zoom: 1.5,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#1946a8',
              shadowColor: '#1946a8',
              borderWidth: 1, //设置外层边框
              borderColor: '#1946a8',
              shadowOffsetX: 5,
              shadowOffsetY: 2,
              shadowBlur: 1,
            },
            emphasis: {
              areaColor: '#1946a8',
              borderColor: '#d4bc1d',
              borderWidth: 2, //设置外层边框
            },
          },
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(data),
            symbolSize: function (val) {
              return 10
            },
            label: {
              normal: {
                formatter: '{b}',
                position: [10, 10],
                fontSize: 20,
                fontFamily: 'Microsoft YaHei',
                fontWeight: 600,
                // fontStyle: 'italic',
                color: '#fff',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: '#000',
                borderWidth: 2,
                borderColor: '#fff',
              },
            },
          },
          {
            type: 'map',
            map: this.mapName,
            geoIndex: 0,
            aspectScale: 1.5, //长宽比
            showLegendSymbol: true, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
              },
              emphasis: {
                areaColor: '#2B91B7',
              },
            },
            animation: false,
            data: data,
          },
          // {
          //   name: '点',
          //   type: 'scatter',
          //   coordinateSystem: 'geo',
          //   zlevel: 6,
          // },
          // {
          //   name: 'Top 5',
          //   type: 'effectScatter',
          //   coordinateSystem: 'geo',
          //   data: this.convertData(
          //     data
          //       .sort(function (a, b) {
          //         return b.value - a.value
          //       })
          //       .slice(0, 5)
          //   ),
          //   symbolSize: function (val) {
          //     return 15
          //   },
          //   showEffectOn: 'render',
          //   rippleEffect: {
          //     brushType: 'stroke',
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       formatter: '{b}',
          //       position: 'left',
          //       show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: 'yellow',
          //       shadowBlur: 10,
          //       shadowColor: 'yellow',
          //     },
          //   },
          //   zlevel: 1000,
          // },
          // {
          //   name: '线路',
          //   type: 'lines',
          //   zlevel: 2,
          //   effect: {
          //     show: true,
          //     period: 4, //箭头指向速度，值越小速度越快
          //     trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          //     symbol: 'arrow', //箭头图标
          //     symbolSize: 5, //图标大小
          //   },
          //   lineStyle: {
          //     normal: {
          //       color: '#00FFFF',
          //       width: 1,
          //       type: 'dashed',
          //       opacity: 0.5, //尾迹线条透明度
          //       curveness: -0.3, //尾迹线条曲直度
          //     },
          //   },
          //   data: moveLine.normal,
          // },
        ],
      }
      let that = this
      this.mapChart.on('click', function (params) {
        if (params.name == '山西') {
          that.backShow = true
          setTimeout(() => {
            that.initProvinceChart()
          })
        }
      })
      tools.loopShowTooltip(this.mapChart, option, {
        interval: 2000,
        loopSeries: false,
      });
      this.mapChart.setOption(option)
    },
    initChartC3 () {
      let myChart = echarts.init(this.$refs['echartC3'])
      let option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{a0}：{c0}' + '亿元',  //+ '<br/>'+ '{a1}：{c1}' + '%',
          axisPointer: {
            // type: 'cross',',
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
        },
        grid: {
          top: '8%',
          right: '3%',
          left: '7%',
          bottom: '10%',
        },
        // legend: {
        //   top: '1',
        //   textStyle: {
        //     color: 'rgba(250,250,250,0.6)',
        //   },
        // },
        xAxis: {
          data: center6.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 20,
            textStyle: {
              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: '20',
                fontFamily: 'Microsoft YaHei'
              },
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 20,
              fontFamily: 'Microsoft YaHei'
            },
          },
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: '{value} %',
              textStyle: {
                color: 'rgba(250,250,250,0.6)',
              },
            },
          },
        ],
        series: [
          {
            type: 'bar',
            name: '投资金额',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: center6.map(item => item.value),
          },
        ],
      }
      myChart.on('click', function (param) {
        that.projectListTipShow = true
      })
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })

    },
    initChartC4 () {
      var chartData = []
      var timer = null;
      var timer2 = null;
      var i = 0;
    
      center7.forEach((item, index) => {
        let obj = {
          name: item.name,
          y: item.value2,
          num: item.value,
          sliced: false,
          selected: false,
          color: index == 0 ? '#74a55d' : '#cea446'
        }
        chartData.push(obj)
    
      })
      let that = this
      var chart = Highcharts.chart('echartC4', {
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 45,
            //beta: 0
          },
          events: {
            // 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]);
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                  if (index == i) {
                    item.sliced = true
                    item.selected = true
                  }
                })
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                i++;
                if (i === len) {
                  i = 0;
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                }
              }, 2000);
            },
            legendItemClick: function (event) {
              console.log(event);
              return true;
            }
          }
        },
        credits: {
          enabled: false  //去掉hightchats水印
        },
        title: {
          text: null
        },
        tooltip: {
          crosshairs: true,
          backgroundColor: 'rgba(0,0,0,0.5)',
          // positioner: function(e){
          //   console.log(e, this)
          // },
          useHTML: false, //开启html模式
          style: {
            color: '#fff',
            fontSize: '20',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (e) {
            //console.log(this)
            let num = chartData[this.colorIndex].num
            this.percentage = 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,
            showInLegend: true, // 图例
            cursor: 'pointer',
            size: 500,
            innerSize: 330, //环形图中间空白，0为饼图
            depth: 50, //立体高度
            slicedOffset: 40, //动画距离
            dataLabels: {
              enabled: false,  // 是否展示指示线
              format: '{point.name}: {point.percentage}'
            }
          },
        },
        series: [{
          type: 'pie',
          name: '占比',
          center: ['60%', '45%'],
          y: -10,
          point: {
            events: {
              click: function (e) { //点击事件
                that.showChartLTipDouble(e.point.name)
              },
              mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
                //console.log(e) 
                chartData.forEach((item, index) => {
                  item.sliced = false
                  item.selected = false
                })
                chartData[e.target.index].sliced = true
                chartData[e.target.index].selected = true
                chart.update({
                  series: [{
                    type: 'pie',
                    name: '占比',
                    point: {
                      events: {
                        click: function (e) {
                          that.showChartLTipDouble(e.point.name)
                        }
                      }
                    },
                    data: chartData
                  }]
                })
                timer && clearInterval(timer);
              },
              mouseOut: function () { // 鼠标移出后需要继续执行轮播
                var points = chart.series[0].points;
                var len = points.length;
    
                timer && clearInterval(timer);
                timer = setInterval(function () {
                  autoTooltip(points[i]);
                  chartData.forEach((item, index) => {
                    item.sliced = false
                    item.selected = false
                    if (index == i) {
                      item.sliced = true
                      item.selected = true
                    }
                  })
                  chart.update({
                    series: [{
                      type: 'pie',
                      name: '占比',
                      point: {
                        events: {
                          click: function (e) {
                            that.showChartLTipDouble(e.point.name)
                          }
                        }
                      },
                      data: chartData
                    }]
                  })
                  i++;
                  if (i === len) {
                    i = 0;
                    chartData.forEach((item, index) => {
                      item.sliced = false
                      item.selected = false
                    })
                    chart.update({
                      series: [{
                        type: 'pie',
                        name: '占比',
                        point: {
                          events: {
                            click: function (e) {
                              that.showChartLTipDouble(e.point.name)
                            }
                          }
                        },
                        data: chartData
                      }]
                    })
                  }
                }, 2000);
              }
            }
          },
          data: chartData
        }]
      });
    
      function autoTooltip (point) {
        chart.tooltip.refresh(point);
      }
    },
    initProjectList () {
      let dataList = []
      center8.map(item => {
        dataList.push([item.office, item.name, item.value + '亿'])
      })
      this.storageRecordConfig2.data = dataList
      this.storageRecordConfig2 = { ...this.storageRecordConfig2 }
    },
    // 大屏三
    initChartR1 () {
      let that = this
      let myChart = echarts.init(this.$refs['echartR1'])
      myChart.on('showTip', (params) => {
        // 如果是7或者15并且满足防抖则切换
        if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd) {
          that.echartR1Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
            myChart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR1Fd = true
            }, 2000)
          }, 1900);
          // 如果是17表示到了最后一个，那么重新来一遍
        } else if (params.dataIndex == 17 && that.echartR1Fd) {
          that.echartR1Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = 0
            option.dataZoom[0].startValue = 5
            myChart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR1Fd = true
            }, 2000)
          }, 1900)
        }
      })
      let option = {
        tooltip: {
          formatter: data => {
            return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}：${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${data[3].seriesName}：${data[3].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[4].color.colorStops[0].color}"></span> ${data[4].seriesName}：${data[4].value}亿`
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
          trigger: 'axis',
          axisPointer: {
            // type: 'cross',',
          },
        },
        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,  //鼠标滚轮触发滚动
          }
        ],
        grid: {
          top: '10%',
          right: '3%',
          left: '5%',
          bottom: '5%',
        },
        legend: {
          data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
          x: 'center',
          y: '0px',
          textStyle: {
            color: '#fff',
            fontSize: "20",
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: right4.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            // rotate: 40,
            textStyle: {
              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
              fontSize: "20",
              fontFamily: 'Microsoft YaHei'
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            nameTextStyle: {
              color: 'rgba(255,255,255,0.6)',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: "20",
                fontFamily: 'Microsoft YaHei'
              },
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 20,
              fontFamily: 'Microsoft YaHei'
            },
          },
        ],
        series: [
          {
            name: '预算额',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#71D5FF',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right4.map(item => item.value),
          },
          {
            name: '已签合同额',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#4D6FF6',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right4.map(item => item.value2),
          },
          {
            name: '产值认定额',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#877CFC',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right4.map(item => item.value),
          },
          {
            name: '结算额',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#52BF80',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right4.map(item => item.value2),
          },
          {
            name: '付款额',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#CADD62',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right4.map(item => item.value),
          },
        ],
      }
      myChart.on('click', function (param) {
        that.projectListTipShow = true
      })
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        interval: 2000,
        loopSeries: true,
      })
    },
    initChartR2 () {
      let that = this
      const itemStyle = {
        // opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0,0,0,0.3)'
      };
      let myChart = echarts.init(this.$refs['echartR2'])
      myChart.on('showTip', (params) => {
        // 如果是7或者15并且满足防抖则切换
        if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd) {
          that.echartR2Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
            myChart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR2Fd = true
            }, 2000)
          }, 1900);
          // 如果是17表示到了最后一个，那么重新来一遍
        } else if (params.dataIndex == 17 && that.echartR2Fd) {
          that.echartR2Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = 0
            option.dataZoom[0].startValue = 5
            myChart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR2Fd = true
            }, 2000)
          }, 1900)
        }
      })
      let option = {
        color: ['#80F1BE', '#fec42c', '#dd4444'],
        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,
          data: ['正偏差', '容差', '负偏差'],
          textStyle: {
            fontSize: 20,
            color: '#fff',
            fontFamily: 'Microsoft YaHei'
          }
        },
        textStyle: {
          color: '#fff',
        },
        tooltip: {
          show: true,
          trigger: "axis",
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
          formatter: data => {
            return `${data[0].value[0]}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color}"></span> ${data[0].seriesName}：${data[0].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color}"></span> ${data[1].seriesName}：${data[1].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color}"></span> ${data[2].seriesName}：${data[2].data[1]}亿`
          },
          axisPointer: {
            //  // type: 'cross',',
          },
        },
        grid: {
          top: '10%',
          right: '4%',
          left: '5%',
          bottom: '5%',
        },
        yAxis: {
          name: '亿元',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#68b4dd66',
              type: 'dashed',
            },
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value}',
            textStyle: {
              color: '#fff',
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 20,
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: right5[0].map(item => item[0]),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#68b4dd66',
              type: 'dashed',
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            // rotate: 40,
            padding: [0, 0, 0, 0],
            textStyle: {
              color: '#fff', //X轴文字颜色
              fontSize: 20,
              fontFamily: 'Microsoft YaHei'
            },
          },
        },
        series: [
          {
            name: '正偏差',
            type: 'scatter',
            itemStyle: itemStyle,
            data: right5[0],
            symbolSize: function (data) {
              return Math.sqrt(data[1]) * 9;
            },
          },
          {
            name: '容差',
            type: 'scatter',
            itemStyle: itemStyle,
            data: right5[1],
            symbolSize: function (data) {
              return Math.sqrt(data[1]) * 8;
            },
          },
          {
            name: '负偏差',
            type: 'scatter',
            itemStyle: itemStyle,
            data: right5[2],
            symbolSize: function (data) {
              return Math.sqrt(data[1]) * 7;
            },
          }
        ]
      }
      myChart.on('click', function (param) {
        // that.showChartLTipDouble(param.name)
        that.projectListTipShow = true
      })
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        interval: 2000,
        loopSeries: true,
      })
    },
    initChartR3 () {
      let that = this
      let myChart = echarts.init(this.$refs['echartR3'])
      myChart.on('showTip', (params) => {
        this.echartR4Chart ? this.echartR4Chart.dispose() : ''
        this.echartR5Chart ? this.echartR5Chart.dispose() : ''
        that.initChartR4()
        that.initChartR5()
        // 如果是7或者15并且满足防抖则切换
        if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR3Fd) {
          that.echartR3Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
            myChart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR3Fd = true
            }, 2000)
          }, 7900);
          // 如果是17表示到了最后一个，那么重新来一遍
        } else if (params.dataIndex == 17 && that.echartR3Fd) {
          that.echartR3Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = 0
            option.dataZoom[0].startValue = 5
            myChart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR3Fd = true
            }, 2000)
          }, 7900)
        }
      })
      let option = {
        tooltip: {
          formatter: data => {
            return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}：${data[2].value}亿`
          },
          trigger: 'axis',
          axisPointer: {
            // type: 'cross',',
          },
          position: (params) => {
            return [params[0] + 10, 60]
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
          confine: true
        },
        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,  //鼠标滚轮触发滚动
          }
        ],
        grid: {
          top: '25%',
          right: '3%',
          left: '10%',
          bottom: '20%',
        },
        legend: {
          data: ["高风险", "中风险", '低风险'],
          x: 'center',
          y: '15px',
          textStyle: {
            // color: 'rgba(250,250,250,0.6)',
            color: '#fff',
            fontSize: "20",
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: right4.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 40,
            textStyle: {
              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            nameTextStyle: {
              color: 'rgba(255,255,255,0.6)',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: '20',
                fontFamily: 'Microsoft YaHei'
              },
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 20,
              fontFamily: 'Microsoft YaHei'
            },
          },
        ],
        series: [
          {
            name: '高风险',
            type: 'bar',
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#CADD62',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right6.map(item => item.value),
          },
          {
            name: '中风险',
            type: 'bar',
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#4D6FF6',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right6.map(item => item.value2),
          },
          {
            name: '低风险',
            type: 'bar',
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#52BF80',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right6.map(item => item.value3),
          },
        ],
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        interval: 8000,
        loopSeries: true,
      })
    },
    initChartR4 () {
      this.echartR4Chart = echarts.init(this.$refs['echartR4'])
      option = {
        title: {
          text: ''
        },
        radar: {
          center: ['50%', '50%'],
          radius: 135,
          indicator: [
            { name: '安全风险', max: 100000 },
            { name: '付款风险', max: 100000 },
            { name: '合同风险', max: 100000 },
            { name: '结算风险', max: 100000 },
            { name: '进度风险', max: 100000 },
            { name: '质量风险', max: 100000 },
          ],
          axisLine: {  // 设置雷达图中间射线的颜色
            lineStyle: {
              color: '#887d33',
            },
          },
          splitLine: { //网格颜色设置
            show: true,
            lineStyle: {
              width: 1,
              color: ['#871b1a', '#638f41', '#d29e35', '#b6802b']
            },
          },
          name: { //修改indicator文字的颜色
            textStyle: {
              color: "#fff",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            }
          },
          splitNumber: 4, //有几个圈
          splitArea: {  //设置图表颜色，show的值为true
            show: true,
            areaStyle: {
              // color:"#c1ddf8", //一般设置方式
              //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
              //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
              //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
              // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              //   { offset: 0, color: '#887D33' }, // 0% 处的颜色 
              //   { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色 
              //   { offset: 1, color: '#430705' }// 100% 处的颜色
              // ], false)
              color: ['#638f41', '#887d33', '#7d4216', '#430705'],
            }
          }
        },
        series: [
          {
            name: '',
            type: 'radar',
            symbol: 'circle', // 单个数值点的样式，还可以取值'rect','angle'等
            symbolSize: 0, // 数值点的大小
            data: [
              {
                value: right7[0],
                name: '安全风险',
                itemStyle: { //该数值区域样式设置
                  normal: {
                    color: 'rgb(44,198,255,0.8)', //背景颜色，还需设置areaStyle
                    lineStyle: {
                      color: 'rgb(44,198,255,0.8)', //边框颜色
                    },
                  },
                },
                label: {  //显示value中具体的数值
                  normal: {
                    show: false,
                    textStyle: {  //更改数值样式
                      color: '#43EDE3'
                    }
                  },
                },
                areaStyle: { //设置区域背景颜色透明度
                  normal: {
                    width: 1,
                    opacity: 0.8,
                  },
                },
              }
            ]
          }
        ]
      };
      // tools.loopShowTooltip(myChart, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      this.echartR4Chart.setOption(option)
    },
    initChartR5 () {
      this.echartR5Chart = echarts.init(this.$refs['echartR5'])
      let option = {
        tooltip: {
          formatter: data => {
            return `${data[0].name}<br /><span style="display:inline-block;border-radius:预算额已50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}：${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${data[3].seriesName}：${data[3].value}亿`
          },
          trigger: 'axis',
          axisPointer: {
            // type: 'cross',',
          },
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
        },
        grid: {
          top: '15%',
          right: '3%',
          left: '5%',
          bottom: '35',
        },
        legend: {
          data: ["预算额", "合同额", "结算额", "支付额"],
          x: 'center',
          y: '10px',
          textStyle: {
            // color: 'rgba(250,250,250,0.6)',
            color: '#fff',
            fontSize: "20",
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: ['设备费', '设计费', '施工费', '材料费'],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            // rotate: 40,
            textStyle: {
              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
              fontSize: '20',    // 文字字体大小
              fontFamily: 'Microsoft YaHei'
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            nameTextStyle: {
              color: 'rgba(255,255,255,0.6)',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: '20',    // 文字字体大小
                fontFamily: 'Microsoft YaHei'
              },
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 20,
              fontFamily: 'Microsoft YaHei'
            },
          },
        ],
        series: [
          {
            name: '预算额',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#71D5FF',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right8.map(item => item.value),
          },
          {
            name: '合同额',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#4D6FF6',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right8.map(item => item.value2),
          },
          {
            name: '结算额',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#877CFC',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right8.map(item => item.value3),
          },
          {
            name: '支付额',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#52BF80',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: right8.map(item => item.value4),
          },
        ],
      }
      this.echartR5Chart.setOption(option)
      tools.loopShowTooltip(this.echartR5Chart, option, {
        interval: 2000,
        loopSeries: true,
      })
    },
  },
})