echarts重叠柱状图（非堆叠柱状图）

大力水手~

已于 2023-10-10 17:51:47 修改

阅读量592

点赞数 2

文章标签： echarts 前端 javascript

于 2023-10-08 17:15:37 首次发布

本文链接：https://blog.csdn.net/weixin_44705979/article/details/133686227

版权

1.生产总数和销售总数的直观柱状图（非堆叠），重叠柱状图
2.代码：

const option = {
    backgroundColor: "#fff",
    title: {
      text: `自动派单使用情况分析`,
      textStyle: {
        rich: {
          a: {
            fontSize: 16,
            fontWeight: 600,
          },
        },
      },
      subtext: "2023~2024",
      top: "3%",
      left: "center",
      itemGap: 20,
      subtextStyle: {
        color: "#6C7B8A",
        fontSize: 16,
        fontWeight: 600,
      },
    },
    legend: {
      top: "15%",
      right: "10%",
      icon: "circle",
    },
    tooltip: {
      show: true,
      trigger: "axis",
      backgroundColor: "rgba(255,255,255)",
      axisPointer: {
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#A7D6FF",
              },
              {
                offset: 0.5,
                color: "#fff",
              },
              {
                offset: 1,
                color: "#A7D6FF",
              },
            ],
            global: false,
          },
        },
      },
    },
    grid: {
      top: "25%",
      left: "9%",
      right: "8%",
      bottom: "12%",
    },
    xAxis: {
      type: "category",
      axisLabel: {
        padding: [0, 10, 0, 0],
        interval: 0,
        rotate: 45,
      },
    },
    yAxis: [
      {
        type: "value",
        min: 0,
        name: "数量",
        splitNumber: 6,
        splitLine: { show: true },
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          show: true,
          textStyle: {
            color: "#737373",
            fontSize: 14,
          },
        },
        axisLine: {
          show: true,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(131,101,101,0.2)",
            type: "dashed",
          },
        },
        show: true,
      },
      {
        type: "value",
        max: 100,
        nameTextStyle: {
          color: "#666666",
        },
        position: "right",
        axisLine: {
          lineStyle: {
            color: "#cdd5e2",
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          formatter: "{value} %", //右侧Y轴文字显示
          textStyle: {
            color: "#666666",
            fontSize: 14,
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        miniBarWidth: 20,
        z: "-1",
        barGap: "-100%",
      },
      {
        type: "bar",
        miniBarWidth: 20,
      },
      {
        name: "环比",
        type: "line",
        zlevel: 11,
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          normal: {
            color: "#34b063",
            borderColor: "rgba(52,176,99, 0.5)", //圆点透明 边框
            borderWidth: 7,
            label: {
              show: false, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "#50c878",
                fontSize: 12,
                fontWeight: 400,
              },
              formatter: function (res) {
                if (res.value) {
                  return res.value + "%";
                } else {
                  return 0;
                }
              },
            },
          },
        },
        lineStyle: {
          color: "#50c878",
        },
        data: [
          16.8, 58.37, 11.55, 37.88, 42.23, 21.02, 31.2, 45.6, 88.9, 60.7, 75.3,
          33.6,
        ],
      },
    ],
    color: ["#ccc", "#4474c4"],
    dataset: {
      source: [
        ["111", "年度EBITDA目标", "累计EBITDA"],
        ["组织1", 26.947840915347587, 23.434275047578243],
        ["组织2", 86.81567149391756, 5.657076223365802],
        ["组织3", 19.66516804789249, 21.65491007516144],
        ["组织4", 78.24499918224117, 17.532816749568585],
        ["组织5", 9.068230301905844, 18.72748416004701],
        ["组织6", 97.12694214494779, 4.426496960413959],
        ["组织7", 51.36793101571185, 14.31612203508518],
        ["组织8", 2.6917695675537257, 2.7258768801158917],
        ["组织9", 15.581908368970376, 16.137144766976142],
        ["组织10", 31.898641586056375, 5.917170937924663],
        ["组织11", 31.223132285415687, 1.8969062401314285],
        ["组织12", 70.46729231458406, 5.534117977852744],
      ],
    },
  };