Echarts

介绍

Echarts 是一个由百度开发的开源 JavaScript 可视化库，提供了丰富的图表类型和强大的定制功能。我们将 Echarts 集成到图表组件，用户可以使用 Echarts 组件轻松地创建各种复杂的自定义图表，满足不同的数据展示需求。

API

Props

参数	说明	类型	默认值
默认状态	支持变量绑定	默认 / 隐藏	默认
数据源	支持变量绑定	DataSource	-
配置项参数	Echarts 图表的配置参数	Config	-
宽	图表画布宽度	string	500px
高	图表画布高度	string	300px
唯一标识	组件唯一标识	string	组件 key 值

Type

DataSource

{
  "dimensions": [
    "year",
    "sales1",
    "sales2",
    "sales3"
  ],
  "source": [
    {
      "year": "2018",
      "sales1": 43.3,
      "sales2": 85.8,
      "sales3": 93.7
    },
    {
      "year": "2019",
      "sales1": 83.1,
      "sales2": 73.4,
      "sales3": 55.1
    },
    {
      "year": "2020",
      "sales1": 86.4,
      "sales2": 65.2,
      "sales3": 82.5
    },
    {
      "year": "2021",
      "sales1": 72.4,
      "sales2": 53.9,
      "sales3": 39.1
    },
    {
      "year": "2022",
      "sales1": 83.1,
      "sales2": 73.4,
      "sales3": 55.1
    },
    {
      "year": "2023",
      "sales1": 86.4,
      "sales2": 65.2,
      "sales3": 82.5
    }
  ]
}

Config

function customChart(ctx, data) {
  // 这里可以返回需要自定义的图表属性，可扩展属性范围参考echarts
  return {
    legend: {},
    tooltip: {},
    dataset: data,
    xAxis: { type: "category" },
    yAxis: {},
    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
  };
}