pc_kingdee_large_screen/investmentNew/js/index.js

let app = new Vue({
  el: '#app',
  data () {
    return {
      leftEcharts1: '',
      leftEcharts2: '',
      leftEcharts3: '',
      leftEcharts4: '',
      leftEcharts5: '',
      leftEcharts6: '',
      leftEcharts7: '',
      leftEcharts8: '',
      shanxiMap: '',// 山西地图
      industryProportion: 1, // 主辅业占比轮播
      industryLayout: 0,//产业布局分析
      time1: '', // 4秒定时器
      time2: '', // 针对投前产业布局分析的定时器
    }
  },
  created () {

  },
  beforeDestroy () {

  },
  mounted () {
    this.time4s()
    this.timeNs()
    setTimeout(() => {
      this.leftEcharts1Fun()
      this.leftEcharts2Fun()
      this.leftEcharts3Fun()
      this.leftEcharts4Fun()
      this.leftEcharts5Fun()
      this.leftEcharts6Fun()
      this.leftEcharts7Fun()
      this.leftEcharts8Fun()
      this.chinaEchartsFun()
    })
    // this.moChart()

  },
  methods: {
    // 4秒定时器
    time4s () {
      let that = this
      // 4秒定时器
      this.time1 = setInterval(() => {
        that.industryProportion == 1 ? that.industryProportion = 2 : that.industryProportion = 1
        that.leftEcharts1.dispose()
        that.leftEcharts2.dispose()
        that.leftEcharts3.dispose()
        that.leftEcharts4.dispose()
        that.leftEcharts1Fun()
        that.leftEcharts2Fun()
        that.leftEcharts3Fun()
        that.leftEcharts4Fun()
      }, 4000);
    },
    // 针对投前产业布局分析的定时器
    timeNs () {
      let that = this
      this.time2 = setInterval(() => {
        if (that.industryLayout < 3) {
          that.industryLayout = that.industryLayout + 1
        } else {
          that.industryLayout = 0
        }
        this.time2 && clearInterval(this.time2)
        this.timeNs()
        that.leftEcharts5.dispose()
        that.leftEcharts5Fun()
      }, left1[that.industryLayout].length * 2000);
    },
    // 主辅业占比点击方法
    industryProportionChange (e) {
      let that = this
      this.industryProportion = e
      this.time1 && clearInterval(this.time1)
      that.leftEcharts1.dispose()
      that.leftEcharts2.dispose()
      that.leftEcharts3.dispose()
      that.leftEcharts4.dispose()
      that.leftEcharts1Fun()
      that.leftEcharts2Fun()
      that.leftEcharts3Fun()
      that.leftEcharts4Fun()
      this.time4s()
    },
    // 产业布局分析点击方法
    industryLayoutChange (e) {
      this.industryLayout = e
    },
    yuanChange (value) {
      return Number((value / 100000000).toFixed(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 {
          floatPart = floatPart.slice(0, 2)
          return intPartFormat + '.' + floatPart
        }
      } else {
        return intPartFormat
      }
    },
    leftEcharts1Fun () {
      let that = this
      this.leftEcharts1 = echarts.init(this.$refs['leftEcharts1'])
      option = {
        title: {
          text: that.industryProportion == 1 ? '30%' : '70%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: '#68BDFF',
            fontSize: '20'
          }
        },
        color: ['#68BDFF', '#254F7F'],
        series: [{
          name: 'Line 1',
          type: 'pie',
          clockWise: true,
          radius: ['80%', '100%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: 80,
            name: '01',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '02',
            value: 20
          }]
        }]
      }
      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts1.setOption(option)
    },
    leftEcharts2Fun () {
      let that = this
      this.leftEcharts2 = echarts.init(this.$refs['leftEcharts2'])
      let nameList = ['a'];
      let valueList = that.industryProportion == 1 ? [30] : [70];
      let total = 100; // 数据总数
      var category = nameList.map((item, index) => {
        return {
          value: valueList[index],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#40A9FF50',
                },
                {
                  offset: 1,
                  color: '#40A9FF',
                },
              ],
              false
            ),
          },
        };
      });
      var totalList = [];
      var totalBorderList = [];
      nameList.map((item, index) => {
        totalList.push({
          value: total,
          itemStyle: {
            color: 'rgba(51, 147, 236, 0.29)',
          },
        });
        totalBorderList.push({
          value: total,
          itemStyle: {
            borderColor: 'rgba(51, 147, 236, 0.29)',
            color: 'transparent',
          },
        });
      });
      var datas = [];
      category.forEach((value) => {
        datas.push(value.value);
      });
      option = {
        // backgroundColor: 'rgb(231,238,249)',
        xAxis: {
          max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: '0%',
          top: '15%', // 设置条形图的边距
          right: '15%',
          bottom: '5%',
        },
        yAxis: [
          {
            type: 'category',
            inverse: false,
            data: nameList,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            // 内
            type: 'bar',
            barWidth: 16,
            barGap: '20%',
            silent: true,
            // label: {
            //     normal: {
            //         formatter: (item) => {
            //             return `${item['name']}：${item['value']} `;
            //         },
            //         textStyle: {
            //             color: 'rgba(105, 120, 136, 1)',
            //             fontSize: 14,
            //         },
            //         position: [0, '-25px'],
            //         show: true,
            //     },
            // },
            data: category,
            z: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(81, 193, 156, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(234, 177, 100, 1)',
                    },
                  ],
                  false
                ),
              },
            },
            animationEasing: 'elasticOut',
          },

          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: '#143362',
              },
            },
            symbolRepeat: 'fixed',
            symbolMargin: 8,
            symbol: 'rect',
            symbolClip: false,
            symbolSize: [4, 20],
            symbolPosition: 'start',
            symbolOffset: [0, -2],
            symbolBoundingData: total,
            data: [total, total, total, total],
            z: 2,
            animationEasing: 'elasticOut',
          },
          {
            // label
            type: 'pictorialBar',
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: 'none',
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  var text;
                  text = `${((params['data'] * 100) / total).toFixed(2)}亿`;
                  return text;
                },
                textStyle: {
                  // 图列内容样式
                  fontSize: "20",
                  fontWeight: 800
                },
                position: 'right',
                offset: [0, -3],
                distance: 10, // 向右偏移位置
                show: true,
                color: '#68BDFF',
              },
            },
            data: datas,
            z: 0,
          },
          {
            name: '外框',
            type: 'bar',
            barGap: '-130%', // 设置外框粗细
            data: totalBorderList,
            barWidth: 26,
            itemStyle: {
              normal: {
                // barBorderRadius: [5, 5, 5, 5],
                borderWidth: 1, // 边框宽度
                borderColor: 'rgb(51, 147, 236)', // 边框色
                color: 'rgb(231,238,249)'
              },
            },
            z: 0,
          }
        ],
      };

      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts2.setOption(option)
    },
    leftEcharts3Fun () {
      let that = this
      this.leftEcharts3 = echarts.init(this.$refs['leftEcharts3'])
      option = {
        title: {
          text: that.industryProportion == 1 ? '70%' : '30%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: '#68BDFF',
            fontSize: '20'
          }
        },
        color: ['#5BDCC8', '#254F7F'],
        series: [{
          name: 'Line 1',
          type: 'pie',
          clockWise: true,
          radius: ['80%', '100%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: 80,
            name: '01',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '02',
            value: 20
          }]
        }]
      }
      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts3.setOption(option)
    },
    leftEcharts4Fun () {
      let that = this
      this.leftEcharts4 = echarts.init(this.$refs['leftEcharts4'])
      let nameList = ['a'];
      let valueList = that.industryProportion == 1 ? [70] : [30];
      let total = 100; // 数据总数
      var category = nameList.map((item, index) => {
        return {
          value: valueList[index],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#5BDCC850',
                },
                {
                  offset: 1,
                  color: '#5BDCC8',
                },
              ],
              false
            ),
          },
        };
      });
      var totalList = [];
      var totalBorderList = [];
      nameList.map((item, index) => {
        totalList.push({
          value: total,
          itemStyle: {
            color: 'rgba(51, 147, 236, 0.29)',
          },
        });
        totalBorderList.push({
          value: total,
          itemStyle: {
            borderColor: 'rgba(51, 147, 236, 0.29)',
            color: 'transparent',
          },
        });
      });
      var datas = [];
      category.forEach((value) => {
        datas.push(value.value);
      });
      option = {
        // backgroundColor: 'rgb(231,238,249)',
        xAxis: {
          max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: '0%',
          top: '15%', // 设置条形图的边距
          right: '15%',
          bottom: '5%',
        },
        yAxis: [
          {
            type: 'category',
            inverse: false,
            data: nameList,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            // 内
            type: 'bar',
            barWidth: 16,
            barGap: '20%',
            silent: true,
            // label: {
            //     normal: {
            //         formatter: (item) => {
            //             return `${item['name']}：${item['value']} `;
            //         },
            //         textStyle: {
            //             color: 'rgba(105, 120, 136, 1)',
            //             fontSize: 14,
            //         },
            //         position: [0, '-25px'],
            //         show: true,
            //     },
            // },
            data: category,
            z: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(81, 193, 156, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(234, 177, 100, 1)',
                    },
                  ],
                  false
                ),
              },
            },
            animationEasing: 'elasticOut',
          },

          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: '#143362',
              },
            },
            symbolRepeat: 'fixed',
            symbolMargin: 8,
            symbol: 'rect',
            symbolClip: false,
            symbolSize: [4, 20],
            symbolPosition: 'start',
            symbolOffset: [0, -2],
            symbolBoundingData: total,
            data: [total, total, total, total],
            z: 2,
            animationEasing: 'elasticOut',
          },
          {
            // label
            type: 'pictorialBar',
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: 'none',
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  var text;
                  text = `${((params['data'] * 100) / total).toFixed(2)}亿`;
                  return text;
                },
                textStyle: {
                  // 图列内容样式
                  fontSize: "20",
                  fontWeight: 800
                },
                position: 'right',
                offset: [0, -3],
                distance: 10, // 向右偏移位置
                show: true,
                color: '#68BDFF',
              },
            },
            data: datas,
            z: 0,
          },
          {
            name: '外框',
            type: 'bar',
            barGap: '-130%', // 设置外框粗细
            data: totalBorderList,
            barWidth: 26,
            itemStyle: {
              normal: {
                // barBorderRadius: [5, 5, 5, 5],
                borderWidth: 1, // 边框宽度
                borderColor: 'rgb(51, 147, 236)', // 边框色
                color: 'rgb(231,238,249)'
              },
            },
            z: 0,
          }
        ],
      };

      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts4.setOption(option)
    },
    leftEcharts5Fun () {
      let that = this
      this.leftEcharts5 = echarts.init(this.$refs['leftEcharts5'])
      let dataList = []
      left1[that.industryLayout].forEach((item, index) => {
        dataList[index] = {
          value: item.y,
          name: item.name,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 0,
                  color: commonColor2[index], //顶部颜色
                },
                {
                  offset: 1,
                  color: commonColor[index],// 底部颜色
                },
              ]),
              borderColor: commonColor[index],
              borderWidth: 3
            }
          }
        }
      })
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: function (e) {
            return `<span style="display:inline-block;margin-right:15px;border-radius:10px;width:20px;height:20px;background-color:${e.borderColor};"></span>${e.name} ${e.percent}%<br>${e.value}亿 ${left1[that.industryLayout][e.seriesIndex].num}个`
          },
          backgroundColor: 'rgba(50,50,50,0.7)',    // 提示框浮层的背景颜色
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
            fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '28',    // 文字字体大小
          },
        },
        legend: {
          top: 'center',
          orient: 'vertical',
          left: '75%',
          textStyle: {
            color: '#fff',
            fontSize: 28,
            padding: [0, 20]
          },
        },
        graphic: {
          elements: [{
            type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            style: {
              image: './img/whiteCircle.png', //这里添加图片地址
              width: 80,
              height: 80
            },
            left: 'center',//
            top: 'middle' //配置图片居中
          }]
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['20%', '80%'],
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                }
              },
            },
            label: {
              "normal": {
                "show": false,
                "textStyle": {
                  "fontSize": 28,
                  color: '#fff'
                }
              }
            },
            roseType: 'area',
            data: dataList,
          },
          {
            tooltip: {
              show: false
            },
            type: 'pie',
            radius: ["80%", "82%"],
            hoverAnimation: false,
            name: "",
            data: [{
              name: '',
              value: 0,
              itemStyle: {
                normal: {
                  color: "#345189"
                }
              }
            }]
          },
        ],
      }
      //轮播
      tools.loopShowTooltip(that.leftEcharts5, option, {
        interval: 2000,
        loopSeries: true,
      });
      //注册
      that.leftEcharts5.setOption(option)
    },
    leftEcharts6Fun () {
      let that = this
      this.leftEcharts6 = echarts.init(this.$refs['leftEcharts6'])
      var dataArr = 44;
      var colorSet = {
        color: '#22B95E'
      };
      var color1 = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(255,255,255,0.1)"
          },
          {
            offset: 1,
            color: "rgba(255,255,255,0.3)"
          }
        ],
        global: false
      }
      var color2 = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#30DBBA"
          },
          {
            offset: 1,
            color: "#2DE696"
          }
        ],
        global: false
      }

      option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "内部进度条",
            type: "gauge",
            // center: ['20%', '50%'],
            radius: '50%',

            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [dataArr / 100, 'rgba(0,0,0,0)'],
                  [1, 'rgba(0,0,0,0)']
                ],
                width: 1
              }
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,

            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              color: "#ffffff"
            },
            detail: {
              formatter: function (value) {
                if (value !== 0) {
                  var num = Math.round(value);
                  return parseInt(num).toFixed(0) + "%";
                } else {
                  return 0;
                }
              },
              offsetCenter: [0, 117],
              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 60,
                color: "#58F7DF"
              }
            },
            title: { //标题
              show: true,
              offsetCenter: [0, 220], // x, y，单位px
              textStyle: {
                color: "#40A9FF",
                fontSize: 34, //表盘上的标题文字大小
                fontWeight: 400,
                fontFamily: 'MicrosoftYaHei'
              }
            },
            data: [{
              name: "总额度:1,323.85亿",
              value: dataArr,
              itemStyle: {
                fontSize: '50', //y轴上方单位的大小
                color: "#FFF666",
                fontFamily: "MicrosoftYaHei",
              }
            }],
            pointer: {
              show: true,
              length: '100%',
              radius: '20%',
              width: 3 //指针粗细

            },
            animationDuration: 4000,
          },
          {
            name: "内部阴影",
            type: "gauge",
            radius: '75%',
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [dataArr / 100, new echarts.graphic.LinearGradient(
                    0, 1, 0, 0, [{
                      offset: 0,
                      color: '#081947',
                    }, {
                      offset: 0.5,
                      color: '#5DF5A9',
                    },
                    {
                      offset: 1,
                      color: '#F6F16A',
                    }
                  ]
                  )],
                  [
                    1, '#0E4889'
                  ]
                ],
                width: 70

              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,

            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },

          },
          {
            name: '外部刻度',
            type: 'gauge',
            //  center: ['20%', '50%'],
            radius: '90%',
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 5, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(0,0,0,0)']
                ]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: '#ffffff',
              fontSize: 28,
              fontFamily: 'SourceHanSansSC-Regular',
              fontWeight: 'bold',
              // position: "top",
              distance: -45,
              formatter: function (v) {
                switch (v + '') {
                  case '0':
                    return '0';
                  case '10':
                    return '10';
                  case '20':
                    return '20';
                  case '30':
                    return '30';
                  case '40':
                    return '40';
                  case '50':
                    return '50';
                  case '60':
                    return '60';
                  case '70':
                    return '70';
                  case '80':
                    return '80';
                  case '90':
                    return '90';
                  case '100':
                    return '100';
                }
              }
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 10,
              lineStyle: {
                color: '#3798D7', //用颜色渐变函数不起作用
                width: 1,
              },
              length: -6
            }, //刻度样式
            splitLine: {
              show: true,
              length: -12,
              lineStyle: {
                color: '#3798D7', //用颜色渐变函数不起作用
              }
            }, //分隔线样式
            detail: {
              show: false
            }
          },
          { //指针上的圆
            type: 'pie',
            tooltip: {
              show: false
            },
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ['0%', '4%'],
            center: ['50%', '50%'],
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 120,
              itemStyle: {
                normal: {
                  color: "#ffffff",
                },
              }
            }]
          },

        ]
      };

      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts6.setOption(option)
    },
    leftEcharts7Fun () {
      let that = this
      this.leftEcharts7 = echarts.init(this.$refs['leftEcharts7'])
      let option = {
        title: {
          text: '固定资产进度分布',
          textStyle: {
            color: '#fff',
            fontSize: 28,
            fontWeight: 500,
            fontFamily: 'Microsoft YaHei'
          },
          top: '20',
          left: '220'
        },
        textStyle: {
          color: '#fff',
        },
        tooltip: {
          show: false,
          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: false
          }
        },
        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: function (data) {
                if (data == '特别监管') {
                  return '#40A9FF'
                } else if (data == '备案') {
                  return '#5BDCC8'
                }
              },
              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: 'red',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', //X轴文字颜色
              fontSize: 20,
              padding: [-80, 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]) * 5;
            },
            // label: {
            //   emphasis: {
            //     show: true,
            //     formatter: function (param) {
            //       return param.data[2];
            //     },
            //     position: 'top'
            //   }
            // },
            itemStyle: {
              normal: {
                color: '#69c0ff'
              }
            },
            // data: left13[0]
          },
          {
            name: '备案',
            type: 'scatter',
            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 5;
            },
            // label: {
            //   emphasis: {
            //     show: true,
            //     formatter: function (param) {
            //       return param.data[2];
            //     },
            //     position: 'top'
            //   }
            // },
            itemStyle: {
              normal: {
                color: '#957DFF'
              }
            },
            // data: left13[1]
          },
        ]
      }
      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts7.setOption(option)
    },
    leftEcharts8Fun () {
      let that = this
      this.leftEcharts8 = echarts.init(this.$refs['leftEcharts8'])
      let option = {
        title: {
          text: '固定资产进度分布',
          textStyle: {
            color: '#fff',
            fontSize: 28,
            fontWeight: 500,
            fontFamily: 'Microsoft YaHei'
          },
          top: '20',
          left: '220'
        },
        textStyle: {
          color: '#fff',
        },
        tooltip: {
          show: false,
          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: false
          }
        },
        grid: {
          top: '0%',
          right: '5%',
          left: '15%',
          bottom: '-10%',
        },
        yAxis: {
          data: ['备案', '特别监管'],
          splitLine: {
            show: false,
            lineStyle: {
              color: '#68b4dd66',
              type: 'dashed',
            },
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            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: 'red',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', //X轴文字颜色
              fontSize: 20,
              padding: [-80, 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]) * 5;
            },
            // label: {
            //   emphasis: {
            //     show: true,
            //     formatter: function (param) {
            //       return param.data[2];
            //     },
            //     position: 'top'
            //   }
            // },
            itemStyle: {
              normal: {
                color: '#69c0ff'
              }
            },
            // data: left13[0]
          },
          {
            name: '备案',
            type: 'scatter',
            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 5;
            },
            // label: {
            //   emphasis: {
            //     show: true,
            //     formatter: function (param) {
            //       return param.data[2];
            //     },
            //     position: 'top'
            //   }
            // },
            itemStyle: {
              normal: {
                color: '#957DFF'
              }
            },
            // data: left13[1]
          },
        ]
      }
      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts8.setOption(option)
    },
    chinaEchartsFun () {
      this.geoCoordMap = []
      /*获取地图数据*/
      this.shanxiMap = echarts.init(this.$refs['shanxi'])
      // echarts.registerMap('china', china)
      echarts.registerMap('china', shanxi)
      // var mapFeatures = echarts.getMap('china').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] })
      // })
      // var data = [
      //   { "name": "新疆", value: 29780 },
      //   { "name": "西藏", value: 2186 },
      //   { "name": "内蒙古", value: 1135 },
      //   { "name": "青海", value: 29780 },
      //   { "name": "四川", value: 2568 },
      //   { "name": "黑龙江", value: 29780 },
      //   { "name": "甘肃", value: 6959 },
      //   { "name": "云南", value: 5632 },
      //   { "name": "广西", value: 6707 },
      //   { "name": "湖南", value: 29780 },
      //   { "name": "陕西", value: 1894 },
      //   { "name": "广东", value: 15769 },
      //   { "name": "吉林", value: 8259 },
      //   { "name": "河北", value: 5741 },
      //   { "name": "湖北", value: 3030 },
      //   { "name": "贵州", value: 4542 },
      //   { "name": "山东", value: 19780 },
      //   { "name": "江西", value: 3157 },
      //   { "name": "河南", value: 6690 },
      //   { "name": "辽宁", value: 8678 },
      //   { "name": "山西", value: 5303 },
      //   { "name": "安徽", value: 29780 },
      //   { "name": "福建", value: 10259 },
      //   { "name": "浙江", value: 3016 },
      //   { "name": "江苏", value: 3202 },
      //   { "name": "重庆", value: 4540 },
      //   { "name": "宁夏", value: 19780 },
      //   { "name": "海南", value: 8626 },
      //   { "name": "台湾", value: 4361 },
      //   { "name": "北京", value: 20000 },
      //   { "name": "天津", value: 4080 },
      //   { "name": "上海", value: 19780 },
      //   { "name": "香港", value: 6991 },
      //   { "name": "澳门", value: 13873 },
      //   { "name": "南海诸岛", value: 0 }
      // ];
      // var geoCoordMap = {
      //   "新疆": [86.9023, 41.148],
      //   "西藏": [87.8695, 31.6846],
      //   "内蒙古": [110.5977, 41.3408],
      //   "青海": [95.2402, 35.4199],
      //   "四川": [102.9199, 30.1904],
      //   "黑龙江": [128.1445, 46.7156],
      //   "甘肃": [102.7129, 38.166],
      //   "云南": [101.0652, 24.6807],
      //   "广西": [108.7813, 23.6426],
      //   "湖南": [111.5332, 27.3779],
      //   "陕西": [108.5996, 33.7396],
      //   "广东": [113.8668, 22.8076],
      //   "吉林": [126.1746, 43.5938],
      //   "河北": [115.4004, 38.1688],
      //   "湖北": [112.2363, 30.8572],
      //   "贵州": [106.6113, 26.6385],
      //   "山东": [118.2402, 36.2307],
      //   "江西": [115.7156, 27.99],
      //   "河南": [113.0668, 33.8818],
      //   "辽宁": [123.0438, 41.0889],
      //   "山西": [112.44, 37.73],
      //   "安徽": [117.2461, 31.0361],
      //   "福建": [118.3008, 25.9277],
      //   "浙江": [120.498, 29.0918],
      //   "江苏": [119.8586, 32.915],
      //   "重庆": [107.7539, 29.8904],
      //   "宁夏": [105.9961, 37.1096],
      //   "海南": [109.9512, 19.2041],
      //   "台湾": [120.8254, 23.5986],
      //   "北京": [116.4551, 40.2539],
      //   "天津": [117.4219, 39.4189],
      //   "上海": [121.4648, 31.2891],
      //   "香港": [114.6178, 22.3242],
      //   "澳门": [113.5547, 21.6484],
      //   '南海诸岛': [128.8254, 21.5986]
      // };
      var data = [
        { name: '大同市', value: 6035, value2: 28 },
        { name: '朔州市', value: 3361, value2: 13 },
        { name: '忻州市', value: 7335, value2: 25 },
        { name: '吕梁市', value: 10904, value2: 45 },
        { name: '太原市', value: 25167, value2: 113 },
        { name: '阳泉市', value: 2512, value2: 28 },
        { name: '晋中市', value: 14857, value2: 52 },
        { name: '临汾市', value: 13055, value2: 30 },
        { name: '长治市', value: 10300, value2: 23 },
        { name: '运城市', value: 4106, value2: 23 },
        { name: '晋城市', value: 4543, value2: 31 }
      ]
      var geoCoordMap = {
        '太原市': [112.53, 37.87],
        '大同市': [113.3, 40.12],
        '阳泉市': [113.57, 37.85],
        '长治市': [113.08, 36.18],
        '晋城市': [112.83, 35.52],
        '朔州市': [112.43, 39.33],
        '晋中市': [112.94, 37.4],
        '运城市': [110.97, 35.03],
        '忻州市': [112.53, 38.72],
        '临汾市': [111.5, 36.08],
        '吕梁市': [111.13, 37.52],
      }
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };

      var convertedData = [
        convertData(data),
        convertData(data.sort(function (a, b) {
          return b.value - a.value;
        }).slice(0, 6))
      ];
      data.sort(function (a, b) {
        return a.value - b.value;
      })
      option = {
        // backgroundColor: '#404a59',
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut',
        geo: {
          map: 'china',
          center: [112.53, 37.67],
          zoom: 4.5,
          label: {
            emphasis: {
              show: false
            }
          },
          tooltip:{
            trigger: 'item',
            formatter: function (params) {
              console.log(params,'??????????')
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              // borderColor: 'rgba(147, 235, 248, 1)',
              borderColor: '#7fb3ff',
              borderWidth: 3,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#468ff8' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0a2c6d' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              // shadowColor: 'rgba(128, 217, 248, 1)',
              shadowColor: '#468ff8',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 20
            },
            emphasis: {
              areaColor: {
                colorStops: [{
                  offset: 0,
                  color: '#3844aa' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#7284fc' // 100% 处的颜色
                }],
              },
              borderColor: '#b3baff',
              borderWidth: 5
            }
          },
          regions: [
            {
              name: '太原市',
              value: 2000,
              itemStyle: {
                emphasis: {
                  borderColor: '#ffe036',
                  borderWidth: 5,
                  areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                      offset: 0,
                      color: '#ffe036' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#7c732a' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                }
              }
            },
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],
        },
        tooltip: {
          trigger: 'item',
          className: 'custom-tooltip-box',
          confine: true, // 不超出当前表
          formatter: function (params) {
            console.log(params)
            return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
          <div class="flex items-center">
            <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
          </div>
            <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">26<span style="font-size:20px" class="fn">个</span></span></div>
            <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">180<span style="font-size:20px" class="fn">亿</span></span></div>
          </div>`
          },
        },
        xAxis: {
          type: 'value',
          scale: true,
          position: 'top',
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 2,
            textStyle: {
              color: '#aaa'
            }
          },
        },
        yAxis: {
          type: 'category',
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#ddd'
            }
          },
          data: categoryData
        },
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertedData[0],
            symbolSize: function (val) {
              return Math.max(val[2] / 500, 8);
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
                fontSize: '30',
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                color: '#ffc809',
                shadowBlur: 50,
                shadowColor: '#ffc809',
                fontSize: "500",
              }
            },
            zlevel: 1
          }
        ]
      };
      var categoryData = [];
      var barData = [];
      var sum = 0;
      for (var i = 0; i < data.length; i++) {
        categoryData.push(data[i].name);
        barData.push(data[i].value);
        sum += data[i].value;
      }
      let that = this
      // this.shanxiMap.on('click', function (params) {
      //   if (params.name == '山西') {
      //     that.shanxiMap.dispose()
      //     that.centerShow = true
      //     setTimeout(() => {
      //     })
      //   }
      // })
      tools.loopShowTooltip(this.shanxiMap, option, {
        interval: 2000,
        loopSeries: false,
      });
      this.shanxiMap.setOption(option)
    },
  }
})