Echarts在线免费图表

 
            

const legendNames = [
  { name: "断采产品数" },
  { name: "断采门店数" },
  { name: "恢复产品数" },
  { name: "恢复门店数", subText: "[ 每个柱状条可点击查看明细 ]" },
];

const seriesList = (name, type, color, data) => {
  return {
    name: name,
    type: type,
    barGap: "30%",
    barCategoryGap: "40%",
    data: data,
    smooth: true,
    symbol: "circle",
    symbolSize: 9,
    label: {
      show: type === "bar",
      position: "top",
    },
    emphasis: {
      focus: "series",
    },
    itemStyle:
      type === "bar"
        ? {
          color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: `rgba(${color}, 1)`,
              },
              {
                offset: 1,
                color: `rgba(${color}, 0)`,
              },
            ]);
          },
        }
        : {
          color: `rgba(${color}, 1)`,
          borderWidth: 3,
          borderColor: "#f3f3f3",
        },
  };
};

const data = {
  xData: [1, 2, 3, 4, 5, 6, 7],
  yData: [1, 2, 3, 4, 5, 6, 7],
  yData2: [1, 2, 3, 4, 5, 6, 7],
  yData3: [1, 2, 3, 4, 5, 6, 7],
  yData4: [1, 2, 3, 4, 5, 6, 7],
}

const statisticsBarData = (data, type = "bar", title) => {
  const { xData, yData, yData2, yData3, yData4 } = data;
  return {
    color: ["#FF6772", "#F6C864", "#62C892", "#50ACD1"],
    title: {
      text: title,
      left: "center",
      top: "30px",
      textStyle: {
        color: "#333",
        fontSize: "14px",
      },
    },
    legend: {
      top: "55px",
      icon: "circle",
      textStyle: {
        color: "#ffffff",
        fontSize: 12,
        rich: {
          name: {
            fontSize: 12,
            color: "#666666",
            padding: [2, 0, 0, 0], //上，右，下，左
          },
          subtext: {
            fontSize: 12,
            color: "#999999",
            padding: [2, 0, 0, 40], //上，右，下，左
          },
        },
      },
      // 格式化图例文本
      formatter(name) {
        const textArr = [];
        legendNames.map((item) => {
          if (item.name === name) {
            if (item.subText && type === "bar") {
              textArr.push(`{name|${item.name}}`);
              textArr.push(`{subtext|${item.subText}}`);
            } else {
              textArr.push(`{name|${item.name}}`);
            }
          }
        });

        return textArr.join("");
      },
    },
    backgroundColor: "#F5F7FA",
    tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
    grid: {
      top: "30%",
      left: "20px",
      right: "20px",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xData,
        boundaryGap: type === "bar",
        axisLabel: {
          interval: 0,
          rotate: type === "bar" ? 0 : 90,
          textStyle: {
            rich: {
              subtext: {
                color: "#666",
                padding: [0, 0, 0, 0], //上，右，下，左
              },
            },
          },
          formatter(val) {
            if (type === "line") {
              const date = val.split("-");
              const textArr = [`{subtext|${date[0]}}`, `{subtext|${date[1]}}`];
              return textArr.join("\n");
            }

            return val;
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      seriesList("断采产品数", type, "255, 103, 114", yData),
      seriesList("断采门店数", type, "246, 200, 100", yData2),
      seriesList("恢复产品数", type, "98, 200, 146", yData3),
      seriesList("恢复门店数", type, "80, 172, 209", yData4),
    ],
  };
};

option = statisticsBarData(data, "bar", "标题");