DataGear 看板提供了圖表選項配置功能（具體參考官網文檔dg-chart-options章節），可自定義樣式、位置、顯示內容等圖表選項，其中的processUpdateOptions回調函數配置項，可以在圖表更新數據前以編程方式處理圖表更新選項。
本文以柱狀圖爲例，介紹如何使用processUpdateOptions配置項，製作根據數據設定柱狀圖條目顏色的數據可視化看板。
首先，定義CSV數據集：
名稱, 數值
a, 5
b, 18
c, 13
d, 9
e, 6
然後，定義圖表：
圖表類型：基本柱狀圖
數據集：
名稱 -> 名稱 (name)
數值 -> 數值 (value)
然後，新建看板，在可視模式下插入上述圖表：
然後，切換至源碼模式，插入根據數據設定柱狀圖條目顏色的JavaScript源碼，如下所示：
<!DOCTYPE html>
<html>
...
<script>
var normalValueTop = 15;
var normalValueBottom = 8;
var options=
{
processUpdateOptions: function(updateOptions, chart, results)
{
//series結構參考ECharts官網配置項文檔
var series0Data = updateOptions.series[0].data;
for(var i=0; i<series0Data.length; i++)
{
var sdi = series0Data[i];
//內置柱圖系列數據對象格式爲：{ value: [ 名稱, 數值 ] }
var name = sdi.value[0];
var value = sdi.value[1];
if(value > normalValueTop)
sdi.itemStyle = { color: "red" };
else if(value < normalValueBottom)
sdi.itemStyle = { color: "blue" };
else
sdi.itemStyle = { color: "green" };
}
}
};
</script>
</head>
<body dg-chart-auto-resize="true">
...
<div style="width:100%;height:100%;" dg-chart-options="options" dg-chart-widget="..."></div>
...
</body>
</html>
切換回可視模式，最終效果如下所示：
源碼地址：
Gitee：https://gitee.com/datagear/datagear