vue 数据汇总图表工具 VisActor

Site Guide——VisActor/VChart tutorial documents

Demo

<div id="line" class="mx-auto kxb-downsize" style="height: 500px"></div>

this.userList = [
{ date: '2024-03', num: 50, type: '报名人数' },
{ date: '2024-03', num: 30, type: '支付人数' },
{ date: '2024-03', num: 21, type: '到账人数' },
{ date: '2024-04', num: 5, type: '报名人数' },
{ date: '2024-04', num: 3, type: '支付人数' },
{ date: '2024-04', num: 2, type: '到账人数' },
];
  
renderLine() {
      const spec1 = {
        type: "line",
        background: "rgba(0, 0, 0, 0)",
        data: {
          values: this.userList,
        },
        xField: "date",
        yField: "num",
        seriesField: "type",
        invalidType: "break",
        color: ["blue", "yellow", "green"],
        legends: {
          visible: true,
        },
      };

      const vchart = new VChart(spec1, { dom: "line" });
      vchart.renderSync();
    },