页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。


注意

示例仅供参考,若是实际场景和示例需求场景有所差别,有可能需要自行调整宏代码。

需求

在电子表格中一个柱图图形中实现其中的柱图根据数值改色,当柱图数值超过一定数值的时候柱子颜色就改变成其他颜色。

原本的效果图:


面板
borderColor#BBBBBB
bgColor#F0F0F0
borderWidth1
borderStylesolid

目录



需求

在电子表格中一个柱图图形中实现其中的柱图根据数值改色,当柱图数值超过一定数值的时候柱子颜色就改变成其他颜色。

原本的效果图:


设置后的效果图,数据大于100000小于200000的柱图的颜色为黄色,数据大于200000的柱图的颜色为红色,指标值小于100000的柱图的颜色为灰色

思路

1)在“分析展现”中新建仪表分析,数据如下


2)新建客户端宏

3)宏代码如下,在宏代码中所示设置柱子指标值小于4000为红色,指标值大于4000小于6000为黄色:


代码块
languagejs
linenumberstrue
function main(chartView) {
    var chart = chartView.getChartObject(); //获取图形对象
    var options = chart.getOptions();
    var series = options.series;
    var datas = [];
    for (var j in series) {
        if (series[j].type == "bar") {
            datas = series[j].data; //获取柱子信息
        }
    }
    for (var i in datas) {
        var value = parseInt(datas[i].value[1]);
        datas[i].itemStyle = datas[i].itemStyle || {};
        if (value < 200000 && value > 100000) {
            //设置柱子的指标值大于100000小于200000的柱图的颜色为黄色
            datas[i].itemStyle = {
                "normal": {
                    "color": "#FFFF66"
                }
            }
        } else if (value > 200000) {
            //设置柱子的指标值大于200000的柱图的颜色为红色
            datas[i].itemStyle = {
                "normal": {
                    "color": "#FF0033"
                }
            }
        } else {
            //设置柱子的指标值小于100000的柱图的颜色为灰色
            datas[i].itemStyle = {
                "normal": {
                    "color": "#7A7A7A"
                }
            }
        }
    }
}

客户端效果图:

示例资源:设置柱图在不同数值区间显示不同颜色.xml