pc_kingdee_large_screen/cokingCoal/js/newIndex.js

let app = new Vue({
  el: "#app",
  data() {
    return {
      config5: {
        waitTime: 2000,
        rowNum: 4,
        header: ["单位名称", "平均工资涨幅", ''],
        data: [
          ["山焦财务", '<span class="red"><span class="listText">-12%</span><span class="redImg"></span></span>'],
          ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
          ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
          ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
          ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>'],
          ["山焦财务", '<span class="red"><span class="listText">-1%</span><span class="redImg"></span></span>'],
          ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
          ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
          ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
          ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>']
        ],
        align: ["center", "center"],
        headerBGC: "#153A62",
        oddRowBGC: "#061F42",
        evenRowBGC: "#0C284A",
      },
      config1: {
        waitTime: 2000,
        rowNum: 1,
        data: [
          ["山焦财务", '<span class="red"><span class="listText">-12%</span><span class="redImg"></span></span>'],
          ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
          ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
          ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
          ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>'],
          ["山焦财务", '<span class="red"><span class="listText">-1%</span><span class="redImg"></span></span>'],
          ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
          ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
          ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
          ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>']
        ],
        align: ["center", "center"],
        headerBGC: "#153A62",
        oddRowBGC: "#061F42",
        evenRowBGC: "#0C284A",
      },
      eChartsBig: undefined,
      time2: undefined,
      leftEcharts5: undefined,
      industry: {
        x: ["矿井", "选煤厂", "火电厂", "清洁能源厂", "焦化厂"],
        y: [151, 50, 6, 32, 4]
      },
      twoBar: undefined,
      echartTwoList: {
        x: ["回采", "掘进", "开拓工人", "运输", "机电", "通风安全", "安拆", "露天", "其他"],
        y: [11556, 15008, 6073, 10562, 8492, 10776, 1553, 119, 3668]
      },
      echartTwoList2: {
        x: ["煤炭洗选人员", "焦炭化工人员", "民爆人员", "金融人员", "煤炭销售人员"],
        y: [10115, 6327, 2301, 104, 2604]
      },
      twoIndex: 1,
      time2: 1,
      time3: 1,
    }
  },
  mounted() {
    this.$nextTick(() => {
      let organization = this.$refs.organization
      this.initOrganization(organization, "")
      let mobilize = this.$refs.mobilize
      this.initOrganization(mobilize,)
      let industry = this.$refs.industry
      this.initOrganization(industry, "", this.industry, "")
      let sequence = this.$refs.sequence
      this.initOrganization(sequence, "", { x: ["管理序列", "技术序列", "操作序列"], y: [1200, 680, 562] })
      let serviceAge = this.$refs.serviceAge
      this.initLineEcharts(serviceAge)
      let level = this.$refs.level
      this.initLineElseEcharts(level)
      let initChartR1 = this.$refs.initChartR1
      this.initChartR1(initChartR1)
      let initChartsBig = this.$refs.initChartsBig
      this.initChartsBig(initChartsBig)
      let leftEnd = this.$refs.leftEnd
      this.initOrganization(leftEnd)
      let echarts90 = this.$refs.echarts90
      this.initLineElseEcharts(echarts90)
      let student = this.$refs.student
      this.initOrganization(student, "")
      let works = this.$refs.works
      this.initBarCharts(works)
      let efficiency = this.$refs.efficiency
      this.initBarCharts(efficiency)
      let whole = this.$refs.whole
      this.initBarCharts(whole)
      let buffer = this.$refs.buffer
      this.initStereoscopic(buffer)
      let share = this.$refs.share
      this.initHorizontalBar(share)
      let el = this.$refs.container
      this.initProvinceChart(el)
      let echartTwo = this.$refs.echartTwo
      this.initTwoBarEcharts(echartTwo, this.echartTwoList)


      this.timeNs()
      this.timePractice()
    })
  },

  methods: {
    // 针对学历结构的定时器
    timeNs() {
      let that = this;
      this.time2 = setInterval(() => {
        this.time2 && clearInterval(this.time2);
        this.timeNs();
        that.leftEcharts5.dispose();
        let initChartsBig = that.$refs.initChartsBig
        that.initChartsBig(initChartsBig)
      }, 15000);
    },
    // 针对从业人员类别的定时器
    timePractice() {
      let that = this;
      this.time3 = setInterval(() => {
        this.time3 && clearInterval(this.time3);
        this.timePractice();
        that.twoBar.dispose();
        let echartTwo = that.$refs.echartTwo
        if (that.twoIndex == 1) {
          that.initTwoBarEcharts(echartTwo, that.echartTwoList)
          that.twoIndex = 2
        } else {
          that.initTwoBarEcharts(echartTwo, that.echartTwoList2)
          that.twoIndex = 1
        }
      }, 15000);
    },
    initOrganization(el, title = "", data = { x: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"], y: [0, 680, 562, 268, 717, 843, 987, 126, 723, 569] }, unit = "") {
      let chart = echarts.init(el);
      let option = {
        title: {
          show: false,
          top: 5,
          left: "center",
          text: title,
          textStyle: {
            color: "#5EB7FF",
            fontWeight: "normal",
            fontSize: 32
          }
        },
        grid: {
          top: 10,
          right: 40,
          left: 105,
          bottom: 40,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          data: data.x,
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            interval: 0,
            // rotate: 40,
            textStyle: {
              color: "white",
              fontSize: 30,
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: unit,
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: 30,
            },
          },
          nameTextStyle: {
            fontSize: 30,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            data: data.y,
            showBackground: true,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "10%",
            itemStyle: {
              barBorderRadius: [30, 30, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#02355C",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#40A9FF",
                },
              ]),
            },
          }
        ],
        legend: {
          data: ["入池人数", "出池人数"],
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            // fontSize: "10",
          },
          right: 30,
          icon: "roundRect",
          // 小图标的宽高
          itemHeight: 5,
        },
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    initLineEcharts(el) {
      let chart = echarts.init(el);
      let option = {
        grid: {
          top: 15,
          right: 15,
          left: 45,
          bottom: 45,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#ddd",
            },
          },
        },
        legend: {
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            // fontSize: "10",
          },
          right: 30,
          icon: "roundRect",
          // 小图标的宽高
          itemHeight: 5
        },
        xAxis: {
          type: "category",
          data: ["5年以下", "6-10年", "11-15年", "16-20年", '21-25年', '26-30年', '30年以上'],
          boundaryGap: false,
          splitLine: {
            show: false,
            interval: "auto",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#7ECEF4",
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            margin: 10,
            textStyle: {
              // fontSize: 10,
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#7ECEF4",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 10,
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "",
            type: "line",
            smooth: false,
            showSymbol: true, // 节点长显
            symbol: 'image://' + 'data:image/png;base64,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',
            symbolSize: 30,
            data: ["1100", "400", "608", "811", '358', '698', '125', '765'],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#40A9FF",
                    },
                    {
                      offset: 1,
                      color: "#051F41",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#40A9FF",
              },
            },
            lineStyle: {
              normal: {
                width: 2,
              },
            },
          }, {
            name: "",
            type: "line",
            smooth: false,
            showSymbol: true, // 节点长显
            symbol: 'image://' + 'data:image/png;base64,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',
            symbolSize: 30,
            data: ["100", "900", "68", "981", '1358', '628', '525', '565'],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#45DAD1",
                    },
                    {
                      offset: 1,
                      color: "#051F41",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#45DAD1",
              },
            },
            lineStyle: {
              normal: {
                width: 2,
              },
            },
          }
        ],
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    initLineElseEcharts(el) {
      let chart = echarts.init(el);
      let option = {
        grid: {
          top: 15,
          right: 15,
          left: 45,
          bottom: 45,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#ddd",
            },
          },
        },
        legend: {
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            // fontSize: "10",
          },
          right: 30,
          icon: "roundRect",
          // 小图标的宽高
          itemHeight: 5
        },
        xAxis: {
          type: "category",
          data: ["5年以下", "6-10年", "11-15年", "16-20年", '21-25年', '26-30年', '30年以上'],
          boundaryGap: false,
          splitLine: {
            show: false,
            interval: "auto",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#7ECEF4",
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            margin: 10,
            textStyle: {
              // fontSize: 10,
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#7ECEF4",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 10,
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "",
            type: "line",
            smooth: false,
            showSymbol: true, // 节点长显
            symbol: 'image://' + 'data:image/png;base64,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',
            symbolSize: 30,
            data: ["1100", "400", "608", "811", '358', '698', '125', '765'],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#40A9FF",
                    },
                    {
                      offset: 1,
                      color: "#051F41",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#40A9FF",
              },
            },
            lineStyle: {
              normal: {
                width: 2,
              },
            },
          }
        ],
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    initChartR1(el) {
      let myChart = echarts.init(el)
      data = echarts2;
      arrName = getArrayValue(data, "name");
      arrValue = getArrayValue(data, "value");
      sumValue = eval(arrValue.join("+"));
      objData = array2obj(data, "name");
      optionData = getData(data);
      function getArrayValue(array, key) {
        var key = key || "value";
        var res = [];
        if (array) {
          array.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      }

      function array2obj(array, key) {
        var resObj = {};
        for (var i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i];
        }
        return resObj;
      }

      function getData(data) {
        var res = {
          series: [],
          yAxis: [],
        };
        for (let i = 0; i < data.length; i++) {
          // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
          res.series.push({
            name: "",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [53 - i * 15 + "%", 48 - i * 15 + "%"],
            center: ["35%", "50%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [
              {
                value: data[i].value,
                name: data[i].name,
              },
              {
                value: sumValue - data[i].value,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          res.series.push({
            name: "",
            type: "pie",
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [53 - i * 15 + "%", 48 - i * 15 + "%"],
            center: ["35%", "50%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [
              {
                value: 7.5,
                itemStyle: {
                  color: "rgb(3, 31, 62)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
              {
                value: 2.5,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
        }
        return res;
      }
      let option = {
        graphic: {
          elements: [{
            type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            style: {
              image: './images/loop.png', //这里添加图片地址
              width: 320,
              height: 320
            },
            left: '150',//
            top: 'middle' //配置图片居中
          }]
        },
        legend: {
          show: true,
          icon: "circle",
          top: "center",
          left: "70%",
          data: arrName,
          width: 50,
          formatter: function (name) {
            return (
              "{title|" + name + "}\n{value|" + objData[name].value + "}  {title|项}"
            );
          },

          textStyle: {
            rich: {
              title: {
                fontSize: 32,
                lineHeight: 30,
                color: "rgb(0, 178, 246)",
              },
              value: {
                fontSize: 32,
                lineHeight: 40,
                color: "#fff",
              },
            },
          },
        },
        tooltip: {
          show: false,
          normal: {
            show: false,
            trigger: "item",
            label: {
              margin: 10,    // label 距离轴的距离
              color: '#FFF',     // 文字的颜色
              fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
              fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
              fontSize: '30',    // 文字字体大小
              lineHeight: '50',    // 行高 
            },
          },
          // formatter: "{a}<br>{b}:{c}({d}%)666",
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
            fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
          },
          formatter: data => {
            console.log(data)
            // 小圆点
            return `<br /><span style="display:inline-block;border-radius:50%;margin-right:10px; width:7px;height:7px;background-color:blue"></span>${data.name}：${data.percent}`
          },

        },
        color: [
          "rgb(24, 183, 142)",
          "rgb(1, 179, 238)",
          "rgb(22, 75, 205)",
          "rgb(52, 52, 176)",
        ],
        grid: {
          top: "21%",
          bottom: "48%",
          left: "36%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: "#fff",
                fontSize: 24,
              },
              show: true,
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    initChartsBig(el) {
      this.leftEcharts5 = echarts.init(el);
      let option = {
        color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
        grid: {
          left: -100,
          top: 50,
          bottom: 10,
          right: 10,
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 50
          },
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vartical",
          // x: "right",
          top: "center",
          right: "15",
          // bottom: "0%",
          itemWidth: 30,
          itemHeight: 12,
          itemGap: 16,
          textStyle: {
            color: '#A3E2F4',
            fontSize: 30,
            fontWeight: 0
          },
          data: ['IDS', 'VPN', '交换机', '防火墙', 'WAF', '堡垒机']
        },
        polar: {},
        angleAxis: {
          interval: 1,
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B4A6B",
              width: 1,
              type: "solid"
            },
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: "#0B4A6B",
            margin: 8,
            fontSize: 16
          },
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B3E5E",
              width: 1,
              type: "solid"
            },
          },
          axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 20, 0],
            color: "#0B3E5E",
            fontSize: 30
          },
          splitLine: {
            lineStyle: {
              color: "#0B3E5E",
              width: 2,
              type: "solid"
            }
          }
        },
        calculable: true,
        series: [{
          type: 'pie',
          radius: ["5%", "10%"],
          hoverAnimation: false,
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 55
            },
            emphasis: {
              show: false
            }
          },
          data: [{
            name: '',
            value: 0,
            tooltip: { show: false },
            itemStyle: {
              normal: {
                color: "#0B4A6B"
              }
            }
          }]
        }, {
          type: 'pie',
          radius: ["90%", "95%"],
          hoverAnimation: false,
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 55
            },
            emphasis: {
              show: false
            }
          },
          name: "",
          data: [{
            name: '',
            value: 0,
            tooltip: { show: false },
            itemStyle: {
              normal: {
                color: "#0B4A6B"
              }
            }
          }]
        }, {
          stack: 'a',
          type: 'pie',
          radius: ['20%', '80%'],
          roseType: 'area',
          zlevel: 10,
          label: {
            normal: {
              show: true,
              formatter: "{c}",
              textStyle: {
                fontSize: 35,
              },
              position: 'outside'
            },
            emphasis: {
              show: true
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: 20,
              length2: 55
            },
            emphasis: {
              show: false
            }
          },
          data: [{
            value: 10,
            name: 'IDS'
          },
          {
            value: 5,
            name: 'VPN'
          },
          {
            value: 15,
            name: '交换机'
          },
          {
            value: 25,
            name: '防火墙'
          },
          {
            value: 20,
            name: 'WAF'
          },
          {
            value: 35,
            name: '堡垒机'
          }
          ]
        },]
      }
      this.leftEcharts5.setOption(option, {
        notMerge: true,
        notMerge: false,

      });
      tools.loopShowTooltip(this.leftEcharts5, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    initBarCharts(el) {
      let chart = echarts.init(el);
      var option = {
        tooltip: { //提示框组件
          trigger: 'axis',
          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 30,
          }
        },
        grid: {
          left: '9%',
          right: '15%',
          bottom: '10%',
          top: 30,
        },
        legend: {//图例组件，颜色和名字
          right: 10,
          top: 0,
          itemGap: 16,
          itemWidth: 18,
          itemHeight: 10,
          data: [{
            name: '流入',
            //icon:'image://../wwwroot/js/url2.png', //路径
          },
          {
            name: '流出',
          }],
          textStyle: {
            color: '#a8aab0',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 30,
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,//坐标轴两边留白
            data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
            axisLabel: { //坐标轴刻度标签的相关设置。
              interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
              margin: 15,
              textStyle: {
                color: '#078ceb',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 30,
              }
            },
            axisTick: {//坐标轴刻度相关设置。
              show: false,
            },
            axisLine: {//坐标轴轴线相关设置
              lineStyle: {
                color: '#fff',
                opacity: 0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: false,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 30,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.06
              }
            }

          }
        ],
        series: [
          {
            name: '流入',
            type: 'bar',
            data: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6, 4.2, 3.6, 6, 6.4],
            barWidth: 10,
            barGap: 0,//柱间距离
            label: {//图形上的文本标签
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 30,
                },
              },
            },
            itemStyle: {//图形样式
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1, color: 'rgba(127, 128, 225, 0.7)'
                }, {
                  offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
                }, {
                  offset: 0.31, color: 'rgba(0, 208, 208, 0.7)'
                }, {
                  offset: 0.15, color: 'rgba(0, 208, 208, 0.7)'
                }, {
                  offset: 0, color: 'rgba(104, 253, 255, 0.7)'
                }], false),
              },
            },
            markLine: {
              symbol: ['none'],
              silent: true,

              data: [{
                yAxis: 5.3,
                name: "社会劳动生产率",
                lineStyle: {
                  normal: {
                    type: "dashed",
                    width: 3,
                    color: '#3E7DFE'
                  }
                },
                label: {
                  show: true,
                  distance: 20,
                  fontWeight: "lighter",
                  formatter: "社会劳动生产率",
                },
              }, {
                yAxis: 5.64,
                lineStyle: {
                  normal: {
                    type: "dashed",
                    width: 3,
                    color: 'red'
                  }
                },
                label: {
                  show: true,
                  distance: 20,
                  fontWeight: "lighter",
                  formatter: "省属企业平均劳动生产率",
                },
              },{
                yAxis: 1.64,
                lineStyle: {
                  normal: {
                    type: "dashed",
                    width: 3,
                    color: 'rgba(127, 128, 225, 0.7)'
                  }
                },
                label: {
                  show: true,
                  distance: 20,
                  fontWeight: "lighter",
                  formatter: "央企平均劳动生产率",
                },
              },]
            },
          },
          {
            name: '流出',
            type: 'bar',
            data: [2.9, 5, 4.4, 2.7, 5.7, 4.6, 1.2, 2.7, 4.8, 6.0],
            barWidth: 10,
            barGap: 0.2,//柱间距离
            label: {//图形上的文本标签
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 30,
                },
              },
            },
            itemStyle: {//图形样式
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1, color: 'rgba(127, 128, 225, 0.7)'
                }, {
                  offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
                }, {
                  offset: 0.25, color: 'rgba(226, 99, 74, 0.7)'
                }, {
                  offset: 0, color: 'rgba(253, 200, 106, 0.7)'
                }], false),
              },
            },
          }
        ]
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    initBarEcharts(el) {
      let chart = echarts.init(el);
      var scale = 2;
      var singleData = [224, 220, 335];
      var multipleData = [442, 440, 220];
      var judgeData = [110, 220, 115];
      var color = "#189cbb";
      option = {
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['单选题', '多选题', '判断题'],
          align: 'left',
          itemGap: 50,
          // x: 'right',
          right: '10%',
          y: '1%',
          icon: 'rect',
          itemWidth: 15 * scale, // 图例图形宽度
          itemHeight: 15 * scale, // 图例图形高度
          textStyle: {
            color: "#3fdaff",
            fontSize: 16 * scale
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['高等教育学', '高等教育心理学', '综合学科'],
          axisLabel: {
            // inside: true,
            padding: [15, 0, 0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 13 * scale,
            }
          },
          axisTick: {
            inside: true,
            length: 8 * scale,
            lineStyle: {
              color: color,
            }
          },
          axisLine: {
            lineStyle: {
              color: color,
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(80,224,255,0.3)',
              type: 'dashed'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          max: 600,
          axisLabel: {
            // inside: true,
            padding: [0, 15, 0, 0],
            textStyle: {
              color: color,
              fontSize: 16 * scale,
            }
          },
          axisTick: {
            lineStyle: {
              color: color,
            }
          },
          axisLine: {
            lineStyle: {
              color: color,
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(80,224,255,0.3)',
              type: 'dashed'
            },
            show: false,
          },
          name: '题数(答对)',
          nameTextStyle: {
            color: "#fff",
            fontSize: 16 * scale,
            padding: [0, 0, 10, 0]
          }
        }],
        series: [{
          name: '单选题',
          type: 'bar',
          stack: '单选题',
          barWidth: '15%',
          barGap: '40%',
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 20 * scale,
              formatter: function (params) {
                return params.data.value;
              },
              textStyle: {
                color: "#ffc72b",
                fontSize: 20 * scale
              }
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(94,218,255,0.4)',
            }
          },
          data: singleData
        },
        {
          name: '单选题',
          type: 'bar',
          stack: '单选题',
          barWidth: '15%',
          barGap: '40%',
          itemStyle: {
            normal: {
              color: '#83e0fc',
            }
          },
          data: [2 * scale, 2 * scale, 2 * scale]
        }, {
          name: '多选题',
          type: 'bar',
          stack: '多选题',
          barWidth: '15%',
          barGap: '40%',
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 20 * scale,
              formatter: function (params) {
                return params.data.value;
              },
              textStyle: {
                color: "#ffc72b",
                fontSize: 20 * scale
              }
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(20,124,146,0.4)',
            }
          },
          data: multipleData
        },
        {
          name: '多选题',
          type: 'bar',
          stack: '多选题',
          barWidth: '15%',
          barGap: '40%',
          itemStyle: {
            normal: {
              color: '#23aecb',
            }
          },
          data: [2 * scale, 2 * scale, 2 * scale]
        }, {
          name: '判断题',
          type: 'bar',
          stack: '判断题',
          barWidth: '15%',
          barGap: '40%',
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 20 * scale,
              formatter: function (params) {
                return params.data.value;
              },
              textStyle: {
                color: "#ffc72b",
                fontSize: 20 * scale
              }
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(9,149,124,0.4)',
            }
          },
          data: judgeData
        },
        {
          name: '判断题',
          type: 'bar',
          stack: '判断题',
          barWidth: '15%',
          barGap: '40%',
          itemStyle: {
            normal: {
              color: '#10c8a7',
            }
          },
          data: [2 * scale, 2 * scale, 2 * scale]
        },]
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    initStereoscopic(el) {
      let chart = echarts.init(el);
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x + 17, shape.y]
          const c1 = [shape.x - 23, shape.y - 6]
          const c2 = [xAxisPoint[0] - 23, xAxisPoint[1] - 13]
          const c3 = [xAxisPoint[0] + 17, xAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x + 17, shape.y]
          const c2 = [xAxisPoint[0] + 17, xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + 35, xAxisPoint[1] - 15]
          const c4 = [shape.x + 35, shape.y - 15]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x + 17, shape.y]
          const c2 = [shape.x + 35, shape.y - 15] //右点
          const c3 = [shape.x - 5, shape.y - 20]
          const c4 = [shape.x - 23, shape.y - 6]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 注册三个面图形
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)


      const VALUE = [2016, 1230, 3790]

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params, ticket, callback) {
            const item = params[1]
            return item.name + ' : ' + item.value;
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '15%',
          bottom: '12%',
        },
        xAxis: {
          type: 'category',
          data: ['雄县', '安新', '容城'],
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD',
              fontSize: 35,
            }
          },
          axisLabel: {
            fontSize: 35
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 30
          },
          boundaryGap: ['20%', '20%']
        },
        series: [{
          type: 'custom',
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#1BC9F1'
                  },
                  {
                    offset: 1,
                    color: '#1C7084'
                  }
                  ])
                }
              }, {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#1C7287'
                  },
                  {
                    offset: 1,
                    color: '#1BC3EB'
                  }
                  ])
                }
              }, {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#06728A'
                  },
                  {
                    offset: 1,
                    color: '#06728A'
                  }
                  ])
                }
              }]
            }
          },
          data: VALUE
        }, {
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: (e) => {
                switch (e.name) {
                  case '雄县':
                    return VALUE[0]
                  case '安新':
                    return VALUE[1]
                  case '容城':
                    return VALUE[2]
                }
              },
              fontSize: 30,
              color: '#fff',
              offset: [2, -25]
            }
          },
          itemStyle: {
            color: 'transparent'
          },
          tooltip: {

          },
          data: VALUE
        }]
      }
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    initHorizontalBar(el) {
      let chart = echarts.init(el);
      var bg =
        'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=';
      var bar =
        'image://data:image/png;base64,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';
      var data = [220, 182, 191];
      var barWidth = 20;
      var maxNum = 0;
      for (var i = 0; i < data.length; i++) {
        if (data[i] > maxNum) {
          maxNum = data[i];
        }
      }

      option = {
        grid: {
          top: '10%',
          left: '10%',
          right: '8%',
          bottom: '0%',
        },

        xAxis: {
          show: false,
        },
        yAxis: {
          data: data.map((item, index) => `data ${index}`),
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: { fontSize: 35, color: '#fff' },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            type: 'pictorialBar',
            barWidth: barWidth,
            zlevel: 2,
            data: data.map(function (item) {
              return {
                value: item,
                symbol: bar,
              };
            }),
          },
          {
            type: 'pictorialBar',
            barWidth: barWidth,
            data: data.map(function (item) {
              return {
                realValue: item,
                value: maxNum,
                symbol: bg,
              };
            }),
            label: {
              show: true,
              position: 'right',
              distance: 150,
              align: "right",
              formatter: function (params) {
                return params.data.realValue + ' 件';
              },
              color: '#fff',
              fontSize: 35,
            },
          },
        ],
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        nterval: 2000,
        loopSeries: true,
      });

    },
    initProvinceChart(el, mapData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]) {
      var data = [
        {
          name: '大同市',
          value: mapData[0].value,
          value2: mapData[0].value
        },
        {
          name: '朔州市',
          value: mapData[1].value,
          value2: mapData[1].value
        },
        {
          name: '忻州市',
          value: mapData[2].value,
          value2: mapData[2].value
        },
        {
          name: '吕梁市',
          value: mapData[3].value,
          value2: mapData[3].value
        },
        {
          name: '太原市',
          value: mapData[4].value,
          value2: mapData[4].value
        },
        {
          name: '阳泉市',
          value: mapData[5].value,
          value2: mapData[5].value
        },
        {
          name: '晋中市',
          value: mapData[6].value,
          value2: mapData[6].value
        },
        {
          name: '长治市',
          value: mapData[7].value,
          value2: mapData[7].value
        },
        {
          name: '临汾市',
          value: mapData[8].value,
          value2: mapData[8].value
        },
        {
          name: '晋城市',
          value: mapData[9].value,
          value2: mapData[9].value
        },
        {
          name: '运城市',
          value: mapData[10].value,
          value2: mapData[10].value
        }
      ]
      for (let i = 0; i < data.length; i++) {
        const name = data[i].name;
        const mapDataObj = mapData.find(obj => obj.name === name);

        if (mapDataObj) {
          data[i].value = mapDataObj.value;
          data[i].value2 = mapDataObj.value;
        }
      }
      console.log(data)
      let formdata = '太原' // 中心点
      this.geoCoordMap = []
      /*获取地图数据*/
      this.mapChart = echarts.init(el)
      echarts.registerMap('shanxi', jsonData)
      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] })
      })
      // 地图数据
      var chinaGeoCoordMap = {
        太原市: [112.149248, 37.957014],
        大同市: [113.295259, 40.29031],
        阳泉市: [113.505474, 38.064652],
        长治市: [113.113556, 36.191112],
        晋城市: [112.551274, 35.577553],
        朔州市: [112.433387, 39.531261],
        晋中市: [112.936465, 37.696495],
        运城市: [111.003957, 35.222778],
        忻州市: [112.733538, 38.8769],
        临汾市: [111.517973, 36.08415],
        吕梁市: [111.134335, 37.524366],

      }
      // 飞线点数据
      var chinaDatas = [
        [{
          name: '太原市',
          value: 0,
        },],
        [{
          name: '大同市',
          value: 0,
        },],
        [{
          name: '阳泉市',
          value: 0,
        },],
        [{
          name: '长治市',
          value: 0,
        },],
        [{
          name: '晋城市',
          value: 0,
        },],
        [{
          name: '朔州市',
          value: 0,
        },],
        [{
          name: '晋中市',
          value: 9,
        },],
        [{
          name: '运城市',
          value: 0,
        },],
        [{
          name: '忻州市',
          value: 0,
        },],
        [{
          name: '临汾市',
          value: 0,
        },],
        [{
          name: '吕梁市',
          value: 0,
        },],
      ]
      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = chinaGeoCoordMap[dataItem[0].name]
          var toCoord = [112.549248, 37.857014] //中心点地理坐标
          if (fromCoord && toCoord) {
            res.push([{
              // 飞线从哪里出发
              coord: toCoord,
            },
            {
              // 飞线去往哪里
              coord: fromCoord,
              value: dataItem[0].value,
            },
            ])
          }
        }
        return res
      }
      var series = [];
      [
        [formdata, chinaDatas]
      ].forEach(function (item) {
        series.push({
          type: 'lines',
          name: "模拟数据",
          coordinateSystem: 'geo',
          zlevel: 2,
          effect: {
            show: true,
            period: 5, //值越小 速度越快
            trailLength: 0.3, // 0-1  值越大，越拖
            symbol: 'pin', //箭头图标
            symbolSize: 8, //图标大小
            color: "#E6C50B"
          },
          lineStyle: {
            normal: {
              show: true,
              type: 'dashed',
              width: 2, //尾迹线条宽度
              opacity: 0.1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              color: '#E6C50B', // 飞线颜色
            },
          },

          data: convertData(item[1]),
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 10, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 1, //波纹圆环最大限制，值越大波纹越大
            color: '#E6C50B',
          },

          itemStyle: {
            normal: {
              color: '#E6C50B',
              shadowBlur: 10,
              shadowColor: '#E6C50B',
            },
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              offset: [15, 0],
              color: '#fff',
              show: true
            },
          },
          symbol: 'circle',
          symbolSize: 9,
          data: item[1].map(function (dataItem) {
            return {
              itemStyle: {
                color: '#fff' // 修改标点的颜色
              },
              //在这里定义你所要展示的数据
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
            }
          }),
        })
      })
      let option = {
        tooltip: {
          trigger: "item",
          padding: 15,
          backgroundColor: 'rgba(0, 0, 0, 0)',
          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>
            </div>`
              callback(ticket, tipHtml)
              return tipHtml
            }
            if (params.componentSubType == 'map') {
              let tipHtml = `
              <div class="tooltip-cont">
              <p>数量：<span>${data[params.dataIndex].value2}</span></p>
            </div>`
              callback(ticket, tipHtml)
              return tipHtml
            }

          },
        },

        geo: {
          show: true,
          map: 'shanxi',
          layoutCenter: ['50.5%', '52%'], //地图位置
          layoutSize: '100%',
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: '100%',
          zoom: 1.1, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          scaleLimit: { //滚轮缩放的极限控制
            min: 1,
            max: 2
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#25B9E9',
              shadowColor: '#25B9E9',
              borderWidth: 6, //设置外层边框
              borderColor: '#00FFFF',
              shadowOffsetX: 5,
              shadowOffsetY: 5,
              shadowBlur: 5,
            },
            emphasis: {
              areaColor: '#013d95',
              borderColor: '#e7e1a0',
              borderWidth: 4, //设置外层边框
            },
          },
        },
        series: [{
          type: 'map',
          mapType: 'shanxi',
          aspectScale: 0.75,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: '100%',
          zoom: 1.1, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          scaleLimit: { //滚轮缩放的极限控制
            min: 1,
            max: 2
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: '#fff',
              fontSize: 32,
              fontWeight: "bolder"
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#1C4FBB',
              borderColor: 'rgba(5,216,252,0.7)',
              borderWidth: 6,//隐藏省界线
              shadowColor: 'rgba(5,216,252,0.7)',
              shadowBlur: 90

            },
            emphasis: {
              areaColor: 'rgba(25,79,183,0.6)',
              borderColor: '#d4bc1d',
              borderWidth: 8, //设置外层边框
              label: {
                color: "#fff"
              }
            }
          },
          data: data,

        },
        // 区域散点图
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 2, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 8, //波纹圆环最大限制，值越大波纹越大
            color: '#d4bc1d',
          },
          emphasis: {
            itemStyle: {
              color: '#d4bc1d'
            }
          },
          label: {
            show: true,
            normal: {
              show: false
            },
          },
          symbol: 'circle',
          symbolSize: 30,

          data: series[1].data,
        },
        // 线 和 点
        {
          type: 'lines',
          zlevel: 1, //设置这个才会有轨迹线的小尾巴
          effect: {
            show: true,
            period: 3,
            trailLength: 0.1,
            color: '#d4bc1d', //流动点颜色
            symbol: 'arrow',
            symbolSize: 15
          },
          lineStyle: {
            color: '#d4bc1d', //线条颜色
            show: true,
            type: "dashed",
            width: 5,
            opacity: 0.4,
            curveness: 0.2
          },
          data: series[0].data

        },
        ],
      }
      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)
    },
    initTwoBarEcharts(el, data) {
      this.twoBar = echarts.init(el);
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '15%',
          right: '3%',
          left: '14%',
          bottom: '15%'
        },
        xAxis: [{
          type: 'category',
          data: data.x,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
          axisLabel: {
            color: '#e2e9ff',
            textStyle: {
              fontSize: 26
            },
          },
        }],
        yAxis: [{
          name: '',
          axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff',
            textStyle: {
              fontSize: 26
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          }
        }],
        series: [{
          type: 'bar',
          data: data.y,
          barWidth: '20px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,244,255,1)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(0,77,167,1)' // 100% 处的颜色
              }], false),
              barBorderRadius: [30, 30, 30, 30],
              shadowColor: 'rgba(0,160,221,1)',
              shadowBlur: 4,
            }
          },
        }]
      };
      this.twoBar.setOption(option);
      tools.loopShowTooltip(this.twoBar, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    handleWarning(){
      console.log(12312312);
    },
  },

})