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

（本文仅供参考，因代码具有一定场景限制，如和实际应用场景不符合，需根据实际情况自行调整相关代码）

需求背景：

百分比堆积图会将数据集中的数据分类进行叠加显示，适合用来显示大类别下小类别的占比情况，通过将数据进行归一化使得展示结果占比情况更清晰。


实现效果：

实现步骤：

1、制作堆积图


2、添加宏代码

百分比堆积图 
function main(page: IPage, portlet: IEChartsPortlet) {
    let opt = portlet.getChartOptions();
    let series = opt.series;
    let sumData = Array(opt.xAxis.data.length).fill(0);;
    for (let i = 0; i < series.length; i++) {
        let data = series[i].data;
        for (let j = 0; j < data.length; j++){
            if (data[j] && data[j].value[1]) {
                sumData[j] = sumData[j] +  data[j].value[1]
            }
        }
    }
    for (let i = 0; i < series.length; i++) {
        let data = series[i].data;
        for (let j = 0; j < data.length; j++){
            data[j].value[1] =  data[j].value[1] <= 0 ? 0 : data[j].value[1] / sumData[j]
        }
        series[i].label.formatter = function (params) { return (params.value[1] * 100).toFixed(2) + '%' };
    }
    opt.yAxis.max = 1
    console.log(opt)
}

3、开启标签提示


补充问题：

1、使用过程中可能会搭配双Y联合图使用，在使用双Y联合图时，需要注意先拖拽堆积指标，堆积指标需要在上方，如下图。然后修改宏代码如下。

百分比堆积图（双Y） 
function main(page: IPage, portlet: IEChartsPortlet) {
    let opt = portlet.getChartOptions();
    console.log(opt);
    let series = opt.series;
    let sumData = Array(opt.xAxis.data.length).fill(0);;
    for (let i = 0; i < series.length - 1; i++) {
        let data = series[i].data;
        for (let j = 0; j < data.length; j++){
            if (data[j] && data[j].value[1]) {
                sumData[j] = sumData[j] +  data[j].value[1]
            }
        }
    }
    for (let i = 0; i < series.length - 1; i++) {
        let data = series[i].data;
        for (let j = 0; j < data.length; j++){
            data[j].value[1] =  data[j].value[1] <= 0 ? 0 : data[j].value[1] / sumData[j]
        }
        series[i].label.formatter = function (params) { return (params.value[1] * 100).toFixed(2) + '%' };
    }
    opt.yAxis[0].max= 1
}


2、上述宏代码中并未对提示框做处理，目前提示框位置仍显示为原本堆积图的值，如需对提示框进行定制处理，可参考：【仪表盘】自定义地图的提示信息





  • 无标签