pc_kingdee_large_screen/coyp_cokingCoal/js/cokingCoalC.js

let app = new Vue({
  el: '#app',
  data () {
    return {
      companyList: [
        { name: '核心人力-1' },
        { name: '核心人力-2' },
        { name: '内部人才市场' },
        { name: '薪酬福利' },
        { name: '培训' }
      ],
    }
  },
  mounted () {
    setTimeout(() => {
      this.aiQualityECharts();
    });
  },
  methods: {
    aiQualityECharts () {
      let chart = echarts.init(document.getElementById("aiQuality"));
      let option = {
        grid: {
          top: 35,
          right: 40,
          left: 60,
          bottom: 20,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"],
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          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: "#00F4FD",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#061C4F",
                },
              ]),
            },
          },
          {
            name: "出池人数",
            type: "bar",
            data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725],
            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: "#F55002",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#0B0243",
                },
              ]),
            },
          },
        ],
        legend: {
          data: ["入池人数", "出池人数"],
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            // fontSize: "10",
          },
          right: 30,
          icon: "roundRect",
          // 小图标的宽高
          itemHeight: 5,
        },
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    }
  },
})