6.3. 图表渲染器

图表渲染器用于为内置图表插件、自定义图表、自定义图表插件实现图表渲染逻辑,它的格式如下所示:

  1. {
  2. //可选,渲染图表函数是否是异步函数,默认为false
  3. //chart 图表对象
  4. asyncRender: truefalsefunction(chart){ ...; return true 或者 false; }
  5. //必选,渲染图表函数
  6. //chart 图表对象
  7. render: function(chart){ ... },
  8. //可选,更新图表数据函数是否是异步函数,默认为false
  9. //chart 图表对象
  10. //results 数据集结果对象数组
  11. asyncUpdate: truefalsefunction(chart, results){ ...; return true 或者 false; }
  12. //必选,更新图表数据函数
  13. //chart 图表对象
  14. //results 要更新的数据集结果对象数组
  15. update: function(chart, results){ ... },
  16. //可选,调整图表尺寸函数,希望图表支持dg-chart-auto-resize时应该定义
  17. //chart 图表对象
  18. resize: function(chart){ ... },
  19. //可选,绑定图表事件处理函数,希望图表支持dg-chart-link、dg-chart-on-*时应该定义
  20. //chart 图表对象
  21. //eventType 事件类型,比如:"click"、"mouseover"等
  22. //handler 图表事件处理函数,格式为:function(chartEvent){ ... }
  23. on: function(chart, eventType, handler){ ... },
  24. //可选,解绑图表事件处理函数
  25. //chart 图表对象
  26. //eventType 事件类型
  27. //handler 图表事件处理函数引用
  28. off: function(chart, eventType, handler){ ... },
  29. //可选,销毁图表函数
  30. //chart 图表对象
  31. destroy: function(chart){ ... }
  32. }

如果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() 构建 图表事件对象, 最后调用图表事件处理函数。