6.3. 图表渲染器
图表渲染器用于为内置图表插件、自定义图表、自定义图表插件实现图表渲染逻辑,它的格式如下所示:
{
//可选,渲染图表函数是否是异步函数,默认为false
//chart 图表对象
asyncRender: true、false、function(chart){ ...; return true 或者 false; }
//必选,渲染图表函数
//chart 图表对象
render: function(chart){ ... },
//可选,更新图表数据函数是否是异步函数,默认为false
//chart 图表对象
//results 数据集结果对象数组
asyncUpdate: true、false、function(chart, results){ ...; return true 或者 false; }
//必选,更新图表数据函数
//chart 图表对象
//results 要更新的数据集结果对象数组
update: function(chart, results){ ... },
//可选,调整图表尺寸函数,希望图表支持dg-chart-auto-resize时应该定义
//chart 图表对象
resize: function(chart){ ... },
//可选,绑定图表事件处理函数,希望图表支持dg-chart-link、dg-chart-on-*时应该定义
//chart 图表对象
//eventType 事件类型,比如:"click"、"mouseover"等
//handler 图表事件处理函数,格式为:function(chartEvent){ ... }
on: function(chart, eventType, handler){ ... },
//可选,解绑图表事件处理函数
//chart 图表对象
//eventType 事件类型
//handler 图表事件处理函数引用
off: function(chart, eventType, handler){ ... },
//可选,销毁图表函数
//chart 图表对象
destroy: function(chart){ ... }
}
如果asyncRender返回true, 那么在render函数中完成异步操作后, 应该调用chart.statusRendered(true),表明已完成异步渲染。
如果asyncUpdate返回true, 那么在update函数中完成异步操作后, 应该调用chart.statusUpdated(true),表明已完成异步更新数据。
如果希望图表支持dg-chart-link特性, 那么对于on函数,应该构建规范的图表事件对象传递给图表事件处理函数。 通常的做法是:先捕获底层图表元素事件(比如ECharts事件、HTML事件),然后使用 chart.eventNewEcharts()、 chart.eventNewHtml()、 chart.eventData()、 chart.eventOriginalData() 构建 图表事件对象, 最后调用图表事件处理函数。