图表组件

图表组件是一个基于 ECharts 的 Vue 图表组件，提供丰富的图表类型和配置选项。支持折线图、柱状图、饼图、仪表盘、雷达图、散点图、漏斗图等多种图表类型，并支持自定义配置和动态数据更新。

基础使用

修改图表数据

通过注入的 api.getRule 方法可以动态修改图表配置和数据：

function onChange($inject) {
    const newConfig = {
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130]
        }],
        category: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    };
    $inject.api.getRule('ref_F2vulxvqc841dac').props.config = newConfig;
}

获取图表实例

通过注入的 api.el 方法可以获取图表实例，进行更高级的操作：

function getChartInstance($inject) {
    const chartComponent = $inject.api.el('ref_F2vulxvqc841dac');
    const chartInstance = chartComponent.chart;

    if (chartInstance) {
        // 获取图表数据
        const option = chartInstance.getOption();
        console.log('当前图表配置:', option);

        // 动态更新数据
        chartInstance.setOption({
            series: [{
                data: [100, 200, 300, 400, 500]
            }]
        });
    }
}

配置项

图表组件提供了丰富的配置选项，您可以通过在设计器中配置属性来自定义图表的行为和外观。

属性名	类型	默认值	必需	说明
title	String	-	否	图表标题
subtitle	String	-	否	图表副标题
type	String	-	否	图表类型（line/bar/pie/gauge/radar/scatter/funnel/custom）
config	Object	-	否	图表配置对象
data	Array	-	否	图表数据
value	Number	-	否	仪表盘数值
min	Number	-	否	仪表盘最小值
max	Number	-	否	仪表盘最大值
name	String	-	否	数据名称
valueFormat	String	-	否	数值格式化模板
funnelSort	String	-	否	漏斗图排序方式
indicator	Array	-	否	雷达图指标配置
smooth	Boolean	-	否	是否平滑曲线
stripe	Boolean	-	否	是否横向条形图
showLegend	Boolean	true	否	是否显示图例
showSeriesLabel	Boolean	-	否	是否显示系列标签
pieType	String	-	否	饼图类型（doughnut/half-doughnut）
stack	Boolean	-	否	是否堆叠
barBackgroundColor	String	-	否	柱状图背景色
loadOptions	Function	() => {}	否	自定义配置函数

事件

图表组件提供了丰富的事件，方便您监听图表状态变化并执行相应的处理。

事件名	参数	说明
beforeLoad	chart, options	图表加载前事件，在图表初始化前触发
loaded	chart, options	图表加载完成事件，在图表渲染完成后触发
click	...args	图表点击事件，当用户点击图表元素时触发

事件使用示例

监听图表加载完成：

function handleLoaded(chart, options) {
    console.log('图表加载完成:', chart);
    console.log('图表配置:', options);
    // 可以在这里进行图表初始化后的操作
    // 比如添加自定义交互、设置主题等
}

监听图表点击：

function handleClick(...args) {
    console.log('图表点击事件:', args);
    const [params] = args;
    if (params && params.data) {
        console.log('点击的数据:', params.data);
        // 根据点击的数据执行相应操作
    }
}

方法

图表组件提供了多种方法，方便您进行程序化控制。

方法名	参数	说明	返回值
load	-	重新加载图表	-

方法使用示例

程序化重新加载图表：

function reloadChart($inject) {
    const chartComponent = $inject.api.el('ref_F2vulxvqc841dac');
    chartComponent.load();
    console.log('图表已重新加载');
}

动态更新图表数据：

function updateChartData($inject, newData) {
    const chartComponent = $inject.api.el('ref_F2vulxvqc841dac');
    const chartInstance = chartComponent.chart;

    if (chartInstance) {
        chartInstance.setOption({
            series: [{
                data: newData
            }]
        });
    }
}

图表类型

支持的图表类型

类型名	说明	特殊配置项
line	折线图	smooth（平滑曲线）
bar	柱状图	stripe（横向）、barBackgroundColor
area	面积图	smooth（平滑曲线）
pie	饼图	pieType（doughnut/half-doughnut）
gauge	仪表盘	value、min、max、name
radar	雷达图	indicator（指标配置）
scatter	散点图	-
funnel	漏斗图	funnelSort（排序方式）
custom	自定义图表	loadOptions（自定义配置函数）

Data

数据名	初始值	说明
chart	null	ECharts实例