Nsryjdtyk

I want the color of sectors between green and red variations according to values of treemap of echarts.
in jquery.
I am making echarts from ajax request in asp MVC through apache ignite in memory cache.
Colors are filling through default rule but I want them to fill according to my rule i.e dark green when the value is higher, lighter green as value decreases accordingly.

$.get('Ignite/HeatMap', function (diskData) {

diskData = jsonparser(diskData);

myChart.hideLoading();

var modes = ['HeatMap'];

var formatUtil;

formatUtil = echarts.format;



function buildData(mode, originList) {



    var out = ;



    for (var i = 0; i < originList.length; i++) {

        var node = originList[i];

        var newNode = out[i] = cloneNodeInfo(node);

        var value = newNode.value;



        if (!newNode) {

            continue;

        }



        if (mode === 1) {

            var tmp = value[1];

            value[1] = value[0];

            value[0] = tmp;

        }



        if (node.children) {

            newNode.children = buildData(mode, node.children);

        }

    }



    return out;

}



function cloneNodeInfo(node) {



    if (!node) {

        return;

    }

    var newNode = {};

    newNode.name = node.name;

    newNode.chg = node.chg;

    newNode.value = node.value;

    newNode.company = ((node.company === null) ? ' ' : node.company);

    return newNode;

}



function getLevelOption(mode) {

    return [

        {

            color: mode === 2

                ? [

                    '#c23531', '#314656', '#61a0a8', '#dd8668',

                    '#91c7ae', '#6e7074', '#61a0a8', '#bda29a',

                    '#44525d', '#c4ccd3'

                ]

                : null,

            colorMappingBy: 'id',

            itemStyle: {

                normal: {

                    borderColor: 'grey',

                    borderWidth: 2,

                    gapWidth: 2

                }

            }

        },

        {

            colorAlpha: mode === 2

                ? [0.5, 1] : null,

            itemStyle: {

                normal: {

                    borderColor: '#262931',

                    borderWidth: 5,

                    gapWidth: 1

                },

                emphasis: {

                    borderColor: 'yellow'

                }

            }

        }

    ];

}



function getTooltipFormatter(mode) {

    var amountIndex = mode === 1 ? 1 : 0;

    var amountIndex2011 = mode === 1 ? 0 : 1;



    return function (info) {

        var value = info.value;

        var treePathInfo = info.treePathInfo;

        var treePath = ;



        for (var i = 1; i < treePathInfo.length; i++) {

            treePath.push(treePathInfo[i].name);

        }



        if (treePathInfo.length == 3) {

            getsymbolcharts(info.data.name);



            var html = '<div class="row"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><div class="tooltip-title">';

            html += ((treePath[0] === null) ? ' ' : treePath[0]);

            html += '</div ></div></div><div class="row"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><div class="tooltip-hovered"><div class="row"><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';

            html += ((info.data.name === null) ? ' ' : info.data.name);

            html += '</div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><div id="symbolchart" class="symbolchart"></div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';

            html += ((info.data.value === null) ? ' ' : info.data.value);

            html += '</div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';

            html += ((info.data.chg === null) ? ' ' : info.data.chg) + ' %';

            html += '</div></div><div class="row"><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><span class="heatmap-companyname" > ';

            html += info.data.company;

            html += '</span></div></div></div></div></div>';

            return html;

        }



        if (treePathInfo.length == 2) {

            //getlistsymbolcharts();



            var options = ;

            $.each(info.data.children, function (key, value) {

                options.push(value);

            });



            options.sort(function (a, b) {

                if (a.value < b.value) { return 1 }

                if (a.value > b.value) { return -1 }

                return 0;

            });



            var html = '<div class="row"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><div class="tooltip-title">';

            html += ((treePath[0] === null) ? ' ' : treePath[0]);

            html += '</div ></div></div><div class="row"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><div class="tooltip-hovered"><div class="row"><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';

            html += ((options[0].name === null) ? ' ' : options[0].name);

            html += '</div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><div id="symbolchart" class="symbolchart"></div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';

            html += ((options[0].value === null) ? ' ' : options[0].value);

            html += '</div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';

            html += ((options[0].chg === null) ? ' ' : options[0].chg) + ' %';

            html += '</div></div><div class="row"><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><span class="heatmap-companyname" > ';

            html += options[0].company;

            html += '</span></div></div></div></div></div><div class="row"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><ul class="heatmap-symbols-list">';

            for (var i = 0; i < options.length; i++)

            {

                html += ' <li><div class="row"><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';

                html += options[i].name;

                html += '</div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';



                html += '<div id="listsymbolchart' + i +'" class="alllistsymbolchart"></div>';

                html+= '</div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';

                html += options[i].value;

                html += '</div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">';

                html += options[i].chg + ' %';

                html += '</div></div></li>';

            }

            html += '</ul></div></div>';

            return html;

        }

    };

}



function createSeriesCommon(mode) {

    return {

        type: 'treemap',

        tooltip: {

            backgroundColor: "white",

            trigger: 'item',

            borderColor: "black",

            borderWidth: 3,

            borderRadius: 0,

            textStyle: {

                color: "black"

            },

            confine: true,

            formatter: getTooltipFormatter(mode)

        },

        label: {

            normal: {

                formatter: function (params) {

                    var arr = [

                        params.name,

                        params.data.chg + ' %'

                    ];

                    return arr.join('n');

                }

            }

        },

        itemStyle: {

            normal: {

                borderColor: 'black'

            }

        },

        levels: getLevelOption(0)

    };

}



function isValidNumber(num) {

    return num !== null && isFinite(num);

}



myChart.setOption(option = {

    tooltip: {

    },

    series: modes.map(function (mode, idx) {

        var seriesOpt = createSeriesCommon(idx);

        seriesOpt.name = mode;

        seriesOpt.emphasis = {

            upperLabel: {

                show: true,

                textStyle: {

                    color: 'black'

                }

            }

        };

        seriesOpt.nodeClick = false,

        seriesOpt.breadcrumb = {

                show: false

            };

        seriesOpt.upperLabel = {

            normal: {

                show: true,

                height: 30

            }

        };

        seriesOpt.visualDimension = idx === 2 ? 2 : null;

        seriesOpt.data = buildData(idx, diskData);

        seriesOpt.levels = getLevelOption(idx);

        return seriesOpt;

      })

  });

});