Echarts

介绍

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

API

Props

参数名	描述	类型	默认值
status	默认状态，支持变量绑定	'default' | 'hide'	'default'
data	数据源，支持变量绑定	DataSource	-
customChart	配置项参数，Echarts 图表的配置参数	Config	-
chartEvent	图表实例初始化事件，Echarts 图表实例初始化后执行的事件	ChartEvent	-
width	宽，图表画布宽度	string	'500px'
height	高，图表画布高度	string	'300px'
key	唯一标识，组件唯一标识	string	组件 key 值

Type

DataSource

type DataSource = {
  "dimensions":Array<string>,
  "source": Array<Record<string, any>
}

Config

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

ChartEvent

function chartEvent(ctx, charts) {
  // 这里可以在图表初始化后执行事件初始化,事件类型及参数参考echarts文档
  charts.on("click", (params) => {
    console.log(params);
  });
}