Echarts在线免费图表

 
            let zData = ["导游", "讲解员", "售票员", "安保"];
let lc = [45, 50, 25, 34];
let option = {
  backgroundColor: "#000",
  tooltip: {
    show: true,
    trigger: "axis",
    backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
    textStyle: {
      color: "#fff",
    },
    formatter: "{b}：{c}人",
  },
  grid: {
    right: "4%",
    top: "8%",
    left: "2%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: true,
    data: zData,
    axisLabel: {
      interval: 0,
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: 16
      },
    },
    axisTick: {
      //坐标轴刻度相关设置。
      show: false,
    },
    axisLine: {
      //坐标轴轴线相关设置
      lineStyle: {
        color: "#fff",
      },
    },
    splitLine: {
      //坐标轴在 grid 区域中的分隔线。
      show: false,
    },
  },
  yAxis: [
    {
      type: "value",
      splitNumber: 5,
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255, 255, 255, 0.80)",
          fontSize: 16
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.60)",
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      name: "从业人员",
      type: "pictorialBar",
      stack: "数量",
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#FFFFFF",
            fontSize: 16,
          },
        },
      },
      itemStyle: {
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00C2FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0, 194, 255,0)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          }
        },
      },
      symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z",
      data: lc,
    },
  ],
};