let app = new Vue({
  el: '#app',
  data () {
    return {
      companyList: [
        { name: '核心人力-1' },
        { name: '核心人力-2' },
        { name: '内部人才市场' },
        { name: '薪酬福利' },
        { name: '培训' }
      ],
      config5: {
        header: ["单位名称", "平均工资涨幅"],
        data: [
          ["山焦财务", "-1%"],
          ["山焦担保", "4%"],
          ["山焦股份", "6%"],
          ["山焦国华", "-20%"],
          ["山焦国华", "9%"],
          ["山焦财务", "-1%"],
          ["山焦担保", "4%"],
          ["山焦股份", "6%"],
          ["山焦国华", "-20%"],
          ["山焦国华", "9%"]
        ],
        align: ["center", "center", "center", "center"],
        headerBGC: "#153A62",
        oddRowBGC: "#061F42",
        evenRowBGC: "#0C284A",
      },
    }
  },
  mounted () {
    setTimeout(() => {
      this.budgetECharts();
      this.salaryECharts();
      this.aiQualityECharts1();
      this.aiQualityECharts2();
    })
  },
  methods: {
    aiQualityECharts1 () {
      let chart = echarts.init(document.getElementById("aiQuality1"));
      let option = {
        grid: {
          top: 30,
          right: 40,
          left: 75,
          bottom: 50,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"],
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "white",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: "单位吨：工",
          nameTextStyle: {//y轴上方单位的颜色
            color: '#fff',
          },
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
            },
          },
          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: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
            showBackground: true,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "10%",
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#13445D",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#45DAD1",
                },
              ]),
            },
          }
        ],
        legend: {
          data: ["入池人数", "出池人数"],
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            // fontSize: "10",
          },
          right: 30,
          icon: "roundRect",
          // 小图标的宽高
          itemHeight: 5,
        },
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    aiQualityECharts2 () {
      let chart = echarts.init(document.getElementById("aiQuality2"));
      let option = {
        grid: {
          top: 30,
          right: 40,
          left: 75,
          bottom: 50,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"],
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "white",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: "单位吨：人",
          nameTextStyle: {//y轴上方单位的颜色
            color: '#fff'
          },
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
            },
          },
          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: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
            showBackground: true,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "10%",
            itemStyle: {
              barBorderRadius: [10, 10, 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,
      });
    },
    budgetECharts () {
      let chart = echarts.init(document.getElementById("budget"));
      let option = {
        grid: {
          top: 35,
          right: 40,
          left: 60,
          bottom: 50,
        },
        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: ["集团公司", "山焦西山", "山焦汾西", "山焦霍州", '山焦山煤', '山焦华晋', '山焦焦化', '山焦民爆'],
          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: false,
            symbol: "circle",
            symbolSize: 6,
            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,
      });
    },
    salaryECharts () {
      let chart = echarts.init(document.getElementById("salary"));
      let option = {
        grid: {
          top: 35,
          right: 40,
          left: 60,
          bottom: 50,
        },
        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: ["集团公司", "山焦西山", "山焦汾西", "山焦霍州", '山焦山煤', '山焦华晋', '山焦焦化', '山焦民爆'],
          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: false,
            symbol: "circle",
            symbolSize: 6,
            data: ['8000', '5000', '3500', '9000', '6000', '18000', '7500', '4500'],
            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,
      });
    },
  },
})