pc_kingdee_large_screen/manpower/js/index2.js

let companyList = [
  { name: '山西焦煤' },
  { name: '晋能控股' },
  { name: '华新燃气' },
  { name: '山西建投' },
  { name: '潞安化工' },
  { name: '华远陆港' },
  { name: '航产集团' },
  { name: '大地控股' },
  { name: '国新能源' },
  { name: '汾酒集团' },
  { name: '云时代' },
  { name: '神农科技' },
  { name: '华阳新材' },
  { name: '华舰体育' },
  { name: '交控集团' },
  { name: '文旅集团' },
  { name: '水控集团' },
  { name: '太重集团' },
]
let barImg =
  'data:image/png;base64,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'
let app = new Vue({
  el: '#app',
  data() {
    return {
      year: '2022',
      config1: {
        number: [100],
        content: '{nt}个',
      },
      storageRecordConfig: {
        header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
        headerBGC: '#05507b33',
        oddRowBGC: '#69c0ff0f',
        evenRowBGC: '',
        headerHeight: '40',
        rowNum: 4,
        align: ['center'],
        data: [
          ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
        ],
      },
      storageRecordConfig2: {
        header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
        headerBGC: '#05507b33',
        oddRowBGC: '#05507b33',
        evenRowBGC: '',
        headerHeight: '40',
        rowNum: 4,
        align: ['center'],
        data: [
          ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
        ],
      },
      companyList: companyList,
      commonOption: {
        title: {
          text: 'xxx',
          x: 'center',
          y: '3%',
          textStyle: {
            color: '#69C0FF',
            fontSize: 24,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: '22%',
          right: '3%',
          left: '3%',
          bottom: '20%',
        },
        legend: {
          data: '',
          top: '12%',
          right: '10',
          textStyle: {
            color: 'rgba(250,250,250,0.6)',
            fontSize: 16,
          },
        },
        xAxis: {
          data: companyList.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 50,
            textStyle: {
              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
              fontSize: 16,
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              color: '#ebf8ac',
              fontSize: 16,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(250,250,250,0.6)',
                fontSize: 16,
              },
            },
          },
        ],
      },
    }
  },
  mounted() {
    // 左侧图表
    this.initChartL1()
    this.initChartL2()
    this.initChartL3()
    // 右侧图表
    this.initChartR1()
    this.initChartR2()
    this.initChartR3()
  },
  methods: {
    initChartL1() {
      let myChart = echarts.init(this.$refs['echartL1'])
      let option = {
        ...this.commonOption,
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: [50, 40, 60, 20, 45, 30, 60, 40, 45, 40, 50, 20, 60, 80, 45, 70, 50, 40],
          },
          {
            data: [50, 40, 60, 20, 45, 30, 60, 40, 45, 40, 50, 20, 60, 80, 45, 70, 50, 40],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'image://' + barImg,
            symbolOffset: ['0', '-25'],
            symbolSize: [35, 35],
            zlevel: 2,
          },
        ],
      }
      option.title.text = '当前各二级企业本部机构数'
      myChart.setOption(option)
    },
    initChartL2() {
      let myChart = echarts.init(this.$refs['echartL2'])
      let option = {
        ...this.commonOption,
        series: [
          {
            name: '人数',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            smooth: false,
            itemStyle: {
              //折线拐点标志的样式
              color: '#69c0ff',
              borderColor: '#69c0ff',
              width: 2,
              shadowColor: '#69c0ff',
              shadowBlur: 4,
            },
            lineStyle: {
              color: '#69c0ff',
              width: 2,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#69c0ff',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,0,0,0)',
                    },
                  ],
                  false
                ),
              },
            },
            data: [60, 50, 40, 90, 30, 55, 40, 20, 50, 40, 40, 55, 40, 30, 50, 40, 35, 40],
          }
        ],
      }
      option.title.text = '当前各二级企业中层管理人员人数'
      option.legend.data = ['人数']
      option.yAxis.push({
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      })
      myChart.setOption(option)
    },
    initChartL3() {
      let myChart = echarts.init(this.$refs['echartL3'])
      let option = {
        ...this.commonOption,
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#43ede3',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: [50, 40, 60, 20, 45, 30, 60, 40, 45, 40, 50, 20, 60, 80, 45, 70, 50, 40],
          },
          {
            data: [50, 40, 60, 20, 45, 30, 60, 40, 45, 40, 50, 20, 60, 80, 45, 70, 50, 40],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'image://' + barImg,
            symbolOffset: ['0', '-25'],
            symbolSize: [35, 35],
            zlevel: 2,
          },
        ],
      }
      option.title.text = '当前各二级企业本部员额数'
      myChart.setOption(option)
    },
    // 右侧图表---------------------------------------------开始
    initChartR1() {
      let myChart = echarts.init(this.$refs['echartR1'])
      let option = {
        ...this.commonOption,
        series: [
          {
            name: '公开招聘数',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            smooth: false,
            itemStyle: {
              //折线拐点标志的样式
              color: '#B889EA',
              borderColor: '#B889EA',
              width: 2,
              shadowColor: '#B889EA',
              shadowBlur: 4,
            },
            lineStyle: {
              color: '#B889EA',
              width: 2,
            },
            data: [60, 50, 80, 80, 90, 55, 40, 60, 50, 80, 90, 55, 40, 60, 50, 90, 55, 40],
          },
          {
            name: '退出人数',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69C0FF',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: [50, 40, 60, 20, 45, 30, 60, 100, 45, 40, 50, 20, 60, 80, 45, 70, 50, 40],
          },
        ],
      }
      option.title.text = '当前各二级企业退出人数与公开招聘人数对比'
      option.legend.data = ['退出人数', '公开招聘数']
      option.yAxis.push({
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      })
      myChart.setOption(option)
    },
    initChartR2() {
      let myChart = echarts.init(this.$refs['echartR2'])
      let option = {
        ...this.commonOption,
        series: [
          {
            name: '薪酬',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            smooth: false,
            itemStyle: {
              //折线拐点标志的样式
              color: '#B889EA',
              borderColor: '#B889EA',
              width: 2,
              shadowColor: '#B889EA',
              shadowBlur: 4,
            },
            lineStyle: {
              color: '#B889EA',
              width: 2,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#B889EA',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,0,0,0)',
                    },
                  ],
                  false
                ),
              },
            },
            data: [60, 50, 40, 90, 30, 55, 40, 20, 50, 40, 40, 55, 40, 30, 50, 40, 35, 40],
          }
        ],
      }
      option.title.text = '当前各二级企业在岗职工平均薪酬'
      option.legend.data = ['薪酬']
      option.legend.show = true
      myChart.setOption(option)
    },
    initChartR3() {
      let myChart = echarts.init(this.$refs['echartR3'])
      let option = {
        ...this.commonOption,
        series: [
          {
            name: '任期值',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            smooth: false,
            itemStyle: {
              //折线拐点标志的样式
              color: '#fbe138',
              borderColor: '#fbe138',
              width: 2,
              shadowColor: '#fbe138',
              shadowBlur: 4,
            },
            lineStyle: {
              color: '#fbe138',
              width: 2,
            },
            data: [60, 50, 80, 80, 90, 55, 40, 60, 50, 80, 90, 55, 40, 60, 50, 90, 55, 40],
          },
          {
            name: '全员劳动合同签约率',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69C0FF',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: [50, 40, 60, 20, 45, 30, 60, 100, 45, 40, 50, 20, 60, 80, 45, 70, 50, 40],
          },
          {
            name: '全员绩效考核',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#43ede3',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: [60, 50, 40, 90, 30, 55, 40, 20, 50, 40, 40, 55, 40, 30, 50, 40, 35, 40],
          },
        ],
      }
      option.title.text = '当前各二级企业本部员额数'
      option.legend.data = ['全员劳动合同签约率','全员绩效考核', '任期值']
      option.yAxis.push({
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      })
      myChart.setOption(option)
    },
  },
})