注意：示例仅供参考，若是实际场景和示例需求场景有所差别，有可能需要自行调整宏代码。
需求
希望实现图形样式时表示可以支持通过变量控制柱状图颜色。
具体的需求为：需要根据图一中的“占比”的数值来改版图二中柱子的颜色，当“占比”大于0.04时柱子为绿色，小于0.04 柱子为红色。
图一：
图二：
思路
1）因为图形本身没有获取到所有数据的信息，因此需要先在这个图形的扩展属性上添加一下扩展属性：
| 代码块 |
|---|
| 注意 |
提示：本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。 |
说明
在散点地图中，使用经度和维度定位数据点的位置，如下：
现需要让地图上显示数据标签，并且标签内容为对应的区域信息，如下：
思路
1.该地图的数据集中，必须包含区域字段，如下：
2.使用以上数据集创建地图，如下：
3.在该地图的扩展属性中，添加以下扩展属性
{
"chartex":
...
{
...
"allFieldsData":
...
true
...
}
...
}
...
2）新建客户端宏模块。
3）宏代码如下：
...
如下：
4.在该地图上新建客户端宏模块
类型：客户端 对象：chart 事件：beforeRender
5.复制并根据实际情况修改以下宏代码
| 代码块 |
|---|
function main(chartView) { var meterReport = chartView.getContext(); var optionschart = chartView.getChartObject(); var options = chart.getOptions(); //echarts options对象 请参考http://echarts.baidu.com/option.html#series-bar.data.itemStyle.normal.color var series = options.series[0]; var dataset = series.data; var allFieldsData = options.allFieldsData; //所有数据,请参考https://history.wiki.smartbi.com.cn/pages/viewpage.action?pageId=22938999 var allData = allFieldsData.data; var flagColumnIndex = 3; //譬如浮动比例所在列序号要显示的 那一列数据在数据集中的列序号，从0开始 iffor (options.series && options.series.length > 0var i = 0; i < dataset.length; i++) { var columnSerieDatas = options.series[0].data; //柱子所在序列if (!dataset[i].itemStyle) { for (var di in columnSerieDatas) { dataset[i].itemStyle = {}; } var dataItem = columnSerieDatasdataset[di];i].itemStyle.normal = { label: { var flagValue = allData[di][flagColumnIndex].value; show: true, dataItem.itemStyle = dataItem.itemStyle || {}; position: dataItem.itemStyle.normal = dataItem.itemStyle.normal || {};"top", dataItem.itemStyle.normal.color = (flagValue > 0.04) ? "#00ff00" : "#ff0000";formatter: allData[i][flagColumnIndex].value } } } } |
4）效果图：
6.效果图如下
