salary-management-oneself/src/pages/personnelReport/talentProfitTable/components/totalCostCharts.ts

const TotalCost = (echarts: any) => {
  // 实例化对象
  const myChart = echarts.init(document.getElementById("totalCost"));
  // 配置项
  const option = {
    tooltip: {
      // 坐标轴指示器，坐标轴触发有效
      trigger: "axis",
      axisPointer: {
        // 默认为直线，可选为：'line' | 'shadow'
        type: "shadow"
      }
    },
    legend: {
      icon: "circle",
      top: "5%",
      right: "2%",
      itemGap: 20,
      textStyle: {
        fontSize: 12,//字体大小
        color: "#787E95"//字体颜色
      }
    },
    grid: {
      top: "20%",
      left: "2%",
      right: "2%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        axisTick: {
          alignWithLabel: true,
          show: false
        },
        // 修改坐标值样式
        axisLabel: {
          color: "#B8B8B8",
          fontSize: 16,
          show: true
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "万元",
        // 修改坐标值样式
        axisLabel: {
          color: "#787E95",
          fontSize: 14
          // formatter: '{value} 人'
        },
        nameTextStyle: {
          color: "#787E95",
          fontSize: 16
        },
        // 修改坐标轴线样式
        axisLine: {
          show: true,
          lineStyle: {
            color: "transparent"
          }
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "rgba(93,126,158,1)"
          }
        }
      }
    ],
    series: [
      {
        name: "人工成本",
        type: "bar",
        showBackground: false,
        barWidth: "20%",
        data: [200, 120, 230, 225, 165, 135, 165, 120, 210, 120, 85, 210],
        // bar 样式修改
        itemStyle: {
          color: "#4CAEFF"
        }
      },
      {
        name: "人工成本",
        type: "line",
        yAxisIndex: 0,
        data: [190, 145, 250, 225, 165, 140, 170, 130, 215, 120, 85, 210],
        itemStyle: {
          normal: {
            color: "#64C3FF",
            lineStyle: {
              color: "#64C3FF"
            }
          }
        },
        areaStyle: {
          normal: {
            color: {//分隔区域的颜色
              x0: 0,
              y0: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "#64C3FF" // 0% 处的颜色
              }, {
                offset: 1,
                color: "rgba(100,195,255,0)" // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色
              }],
              globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比
            }
          }
        }
      }
    ]
  };
  // 配置项给实例对象
  myChart.setOption(option);
  return myChart;
};

export default TotalCost;