需求

希望实现图形样式时表示可以支持通过变量控制柱状图颜色。

具体的需求为：需要根据图一中的“占比”的数值来改版图二中柱子的颜色，当“占比”大于0.04时柱子为绿色，小于0.04 柱子为红色。

图一：

图二：

思路

1）因为图形本身没有获取到所有数据的信息，因此需要先在这个图形的扩展属性上添加一下扩展属性：

 {
 "chartex": {
 "allFieldsData": true
 }
}

2）新建客户端宏模块。

3）宏代码如下：

//对象：chartView, 事件：beforeRender
function main(chartView) {
    var options = chartView.getChartObject().getOptions(); //echarts options对象 请参考http://echarts.baidu.com/option.html#series-bar.data.itemStyle.normal.color
    var allFieldsData = options.allFieldsData; //所有数据,请参考https://history.wiki.smartbi.com.cn/pages/viewpage.action?pageId=22938999
    var allData = allFieldsData.data;
    var flagColumnIndex = 3; //譬如浮动比例所在列序号
    if (options.series && options.series.length > 0) {
        var columnSerieDatas = options.series[0].data; //柱子所在序列
        for (var di in columnSerieDatas) {
            var dataItem = columnSerieDatas[di];
            var flagValue = allData[di][flagColumnIndex].value;
            dataItem.itemStyle = dataItem.itemStyle || {};
            dataItem.itemStyle.normal = dataItem.itemStyle.normal || {};
            dataItem.itemStyle.normal.color = (flagValue > 0.04) ? "#00ff00" : "#ff0000";
        }
    }
}

4）效果图：