Измените цвета карты дерева между зеленым и красным в соответствии со значениями echarts - PullRequest
Новая
       28

Измените цвета карты дерева между зеленым и красным в соответствии со значениями echarts

0 голосов
/ 23 ноября 2018

Я хочу цвет секторов между зелеными и красными вариациями в соответствии со значениями древовидной карты echarts.в jquery.Я делаю echarts из запроса ajax в asp MVC через apache ignite в кэш-памяти.Цвета заполняются по правилу по умолчанию, но я хочу, чтобы они заполнялись в соответствии с моим правилом, т. Е. Темно-зеленый, когда значение выше, светло-зеленый, когда значение соответственно уменьшается. 

$.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;
      })
  });
});
...