页面树结构
转至元数据结尾
转至元数据起始

(仅供参考)

问题描述

在个别报表场景下需要设置双Y联合图根据不同的折线数值区间设置不同的柱子颜色,效果如图:

解决方案

在报表宏界面新建客户端模块。在弹出的新建模块对话框中,选择对象为char、事件为beforeRenderer、并把下面宏代码复制到代码编辑区域。关于电子表格如何针对不同的图形写宏可参考文档:电子表格如何针对不同图形写宏?

类型

对象

事件

ClientSidecharbeforeRenderer
function main(chartView) {
    var chart = chartView.getChartObject(); //获取图形对象
    var options = chart.getOptions();
    var series = options.series;
    var dataline = [];
    for (var j in series) {
        if (series[j].type == "line") {
            dataline = series[j].data; //获取线图信息
        } else if (series[j].type == "bar") {
            databar = series[j].data; //获取柱图信息
        }
    }
    for (var i in dataline) {
        var value = parseInt(dataline[i].value[1]);
        databar[i].itemStyle = databar[i].itemStyle || {};
        if (value < 1999 && value > 1000) {
            //设置柱子的指标值大于100000小于200000的柱图的颜色为黄色
            databar[i].itemStyle = {
                "normal": {
                    "color": "#FFFF66"
                }
            }
        } else if (value > 2000) {
            //设置柱子的指标值大于200000的柱图的颜色为红色
            databar[i].itemStyle = {
                "normal": {
                    "color": "#FF00FF"
                }
            }
        } else {
            //设置柱子的指标值小于100000的柱图的颜色为灰色
            databar[i].itemStyle = {
                "normal": {
                    "color": "#00ffff"
                }
            }
        }
    }
}