图表类型

按图表类型约定图表默认的配置, 使用约定优于配置的方法, 每一种图表类型有大量约定配置, 极大简化配置心智

Table

表格

{
  "chartType": "table",
  "dataset": [
    { "date": "2019", "type": "A", "goalProfit": 10, "profit": 10, "sales": 100, "leftCount": 1, "salesCount": 100 },
    { "date": "2020", "type": "A", "goalProfit": 30, "profit": 30, "sales": 320, "leftCount": 2, "salesCount": 200 },
    { "date": "2021", "type": "A", "goalProfit": 30, "profit": 30, "sales": 300, "leftCount": 3, "salesCount": 300 },
    { "date": "2022", "type": "A", "goalProfit": 50, "profit": 50, "sales": 240, "leftCount": 4, "salesCount": 400 },
    { "date": "2023", "type": "A", "goalProfit": 40, "profit": 40, "sales": 500, "leftCount": 5, "salesCount": 500 }
  ]
}

透视表

{
  "chartType": "pivotTable",
  "dataset": [
    { "date": "2019", "type": "A", "goalProfit": 10, "profit": 10, "sales": 100, "leftCount": 1, "salesCount": 100 },
    { "date": "2020", "type": "A", "goalProfit": 30, "profit": 30, "sales": 320, "leftCount": 2, "salesCount": 200 },
    { "date": "2021", "type": "A", "goalProfit": 30, "profit": 30, "sales": 300, "leftCount": 3, "salesCount": 300 },
    { "date": "2022", "type": "A", "goalProfit": 50, "profit": 50, "sales": 240, "leftCount": 4, "salesCount": 400 },
    { "date": "2023", "type": "A", "goalProfit": 40, "profit": 40, "sales": 500, "leftCount": 5, "salesCount": 500 }
  ]
}

Cartesian

折线图

{
  "chartType": "line",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

堆叠柱状图

{
  "chartType": "column",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

并列柱状图

{
  "chartType": "columnParallel",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

百分比柱状图

{
  "chartType": "columnPercent",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

条形图

{
  "chartType": "bar",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

并列条形图

{
  "chartType": "barParallel",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

百分比条形图

{
  "chartType": "barPercent",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

堆叠面积图

{
  "chartType": "area",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

百分比面积图

{
  "chartType": "areaPercent",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

散点图

export const ScatterChart = memo(() => {
  const vseed: VSeed = {
    chartType: 'scatter',
    dataset: [
      { date: '2019', profit: 10, sales: 20 },
      { date: '2020', profit: 30, sales: 60 },
      { date: '2021', profit: 30, sales: 60 },
      { date: '2022', profit: 50, sales: 100 },
      { date: '2023', profit: 200, sales: 80 },
    ],
    measures: [
      {
        id: 'sales',
        alias: '销售额',
      },
      {
        id: 'profit',
        alias: '利润',
      },
    ],
    dimensions: [
      {
        id: 'date',
        alias: '日期',
      },
    ],
    label: {
      enable: false,
    },
  }
  return <VChartRender vseed={vseed} />
})

Polar

饼图

{
  "chartType": "pie",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

环形图

{
  "chartType": "donut",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

玫瑰图

export const RoseChart = memo(() => {
  const vseed: VSeed = {
    chartType: 'rose',
    dataset: [
      { date: '2023', profit: 40 },
      { date: '2022', profit: 50 },
      { date: '2021', profit: 25 },
      { date: '2020', profit: 30 },
      { date: '2019', profit: 10 },
    ],
  }
  return <VChartRender vseed={vseed} />
})

雷达图

export const RadarChart = memo(() => {
  const vseed: VSeed = {
    chartType: 'radar',
    dataset: [{ profit: 10, sales: 20, count: 50, rateOfReturn: 1 }],
  }
  return <VChartRender vseed={vseed} />
})

堆叠玫瑰图

export const StackedRoseChart = memo(() => {
  const vseed: VSeed = {
    chartType: 'rose',
    dataset: [
      { date: '2019', profit: 10, sales: 20 },
      { date: '2020', profit: 30, sales: 60 },
      { date: '2021', profit: 30, sales: 60 },
      { date: '2022', profit: 50, sales: 100 },
      { date: '2023', profit: 40, sales: 80 },
    ],
  }
  return <VChartRender vseed={vseed} />
})

并列玫瑰图

分组玫瑰图

{
  "chartType": "roseParallel",
  "dataset": [
    { "date": "2019", "profit": 10, "sales": 20 },
    { "date": "2020", "profit": 30, "sales": 60 },
    { "date": "2021", "profit": 30, "sales": 60 },
    { "date": "2022", "profit": 50, "sales": 100 },
    { "date": "2023", "profit": 40, "sales": 80 }
  ]
}

Other

热力图

export const HeatmapChart = memo(() => {
  const vseed: VSeed = {
    chartType: 'heatmap',
    dataset: [
      {
        type: 'A',
        subType: 'a',
        value: 98,
      },
      {
        type: 'A',
        subType: 'b',
        value: 71,
      },
      {
        type: 'A',
        subType: 'c',
        value: 22,
      },
      {
        type: 'A',
        subType: 'd',
        value: 49,
      },
      {
        type: 'A',
        subType: 'e',
        value: 92,
      },
      {
        type: 'B',
        subType: 'a',
        value: 85,
      },
      {
        type: 'B',
        subType: 'b',
        value: 45,
      },
      {
        type: 'B',
        subType: 'c',
        value: 19,
      },
      {
        type: 'B',
        subType: 'd',
        value: 58,
      },
      {
        type: 'B',
        subType: 'e',
        value: 26,
      },
      {
        type: 'C',
        subType: 'a',
        value: 44,
      },
      {
        type: 'C',
        subType: 'b',
        value: 23,
      },
      {
        type: 'C',
        subType: 'c',
        value: 6,
      },
      {
        type: 'C',
        subType: 'd',
        value: 42,
      },
      {
        type: 'C',
        subType: 'e',
        value: 27,
      },
      {
        type: 'D',
        subType: 'a',
        value: 79,
      },
      {
        type: 'D',
        subType: 'b',
        value: 89,
      },
      {
        type: 'D',
        subType: 'c',
        value: 65,
      },
      {
        type: 'D',
        subType: 'd',
        value: 56,
      },
      {
        type: 'D',
        subType: 'e',
        value: 1,
      },
      {
        type: 'E',
        subType: 'a',
        value: 59,
      },
      {
        type: 'E',
        subType: 'b',
        value: 94,
      },
      {
        type: 'E',
        subType: 'c',
        value: 45,
      },
      {
        type: 'E',
        subType: 'd',
        value: 80,
      },
      {
        type: 'E',
        subType: 'e',
        value: 47,
      },
    ],
  }
  return <VChartRender vseed={vseed} />
})

漏斗图

export const FunnelChart = memo(() => {
  const vseed: VSeed = {
    chartType: 'funnel',
    dataset: [
      { date: '2022', profit: 100, sales: 100 },
      { date: '2023', profit: 80, sales: 80 },
      { date: '2020', profit: 60, sales: 60 },
      { date: '2021', profit: 40, sales: 40 },
      { date: '2019', profit: 20, sales: 20 },
    ],
  }
  return <VChartRender vseed={vseed} />
})

#图表类型

#Table

#表格

#透视表

#Cartesian

#折线图

#堆叠柱状图

#并列柱状图

#百分比柱状图

#条形图

#并列条形图

#百分比条形图

#堆叠面积图

#百分比面积图

#散点图

#Polar

#饼图

#环形图

#玫瑰图

#雷达图

#堆叠玫瑰图

#并列玫瑰图

#Other

#热力图

#漏斗图

图表类型

Table

表格

透视表

Cartesian

折线图

堆叠柱状图

并列柱状图

百分比柱状图

条形图

并列条形图

百分比条形图

堆叠面积图

百分比面积图

散点图

Polar

饼图

环形图

玫瑰图

雷达图

堆叠玫瑰图

并列玫瑰图

Other

热力图

漏斗图