pc_kingdee_large_screen/cokingCoal/js/cokingCoalE.js

let app = new Vue({
  el: '#app',
  data () {
    return {
      config: {
        data: [18],
        shape: 'round',
        colors: ['#69C0FF', '#43EDE3']
      },
      companyList: [
        { name: '核心人力-1' },
        { name: '核心人力-2' },
        { name: '内部人才市场' },
        { name: '薪酬福利' },
        { name: '培训' }
      ]
    }
  },
  mounted () {
    setTimeout(() => {
      this.aiQualityECharts2();
      this.initChartR1()
    })
  },
  methods: {
    initChartR1 () {
      let myChart = echarts.init(this.$refs['echartR1'])
      let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: 'center',
          orient: 'vertical',
          left: '80%',
          textStyle: {
            color: '#9DB9EB',
          },
        },
        graphic: {
          elements: [{
            type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            style: {
              image: './images/pie-back.png', //这里添加图片地址
              width: 180,
              height: 180
            },
            left: 'center',//
            top: 'middle' //配置图片居中
          }]
          // type: "text",
          // left: "center",
          // top: "45%",
          // style: {
          //   text: "总人数2530",
          //   textAlign: "center",
          //   fill: "#fff",
          //   fontSize: 20,
          //   fontWeight: 700
          // }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '60%'],
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              { value: 1048, name: '教授' },
              { value: 735, name: '副教授' },
              { value: 580, name: '助教' },
              { value: 484, name: '讲师' },
            ],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#00DCFF',
                    '#116CFD',
                    '#8BA2FF',
                    '#FFC200'
                  ];
                  return colorList[colors.dataIndex];
                }
              },
            }
          },
        ],
      }
      myChart.setOption(option)
    },
    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: {
          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,
      });
    },
  },
})