条形图

实例模板
应用：大屏项目二次开发
模板路径：应用空间-宏服-测试-人员结构分布（hte_2021_04_23112441959）
示例模板：

1、预览效果

2、实现原理

基于乐创者报表（lczReport）中单元格的自定义控件功能+echarts实现。

3、配置步骤

3.1、引入echarts

res\lczReport\lib\echarts\echarts.min.js

3.2、报表模板中设置自定义控件

3.3、配置脚本

ER.widget.extend(this, {
    type: 'echarts',
    init: function (datas, element, echarts) {
        myChart = echarts.init(element);
        console.log(datas);
        var content = datas.content;
        var legends = content['职称'].reduce((pre, cur) => {
            if (!pre.includes(cur)) {
                return pre.concat(cur)
            } else {
                return pre
            }
        }, [])
        var yAxis = content['板块'].reduce((pre, cur) => {
            if (!pre.includes(cur)) {
                return pre.concat(cur)
            } else {
                return pre
            }
        }, [])
        var dataArr = new Array();
        for (let i = 0; i < legends.length; i++) {
            dataArr[i] = new Array();
            for (let k = 0; k < yAxis.length; k++) {
                dataArr[i][k] = {
                    value: 0,
                    showPercent: 0, // 显示百分比 用于label和tooltip
                    realPercent: 0, // 真实百分比，用于最小值处理。
                    maxSign: false
                };
            }
        }

        for (var i = 0; i < datas.content["数量"].length; i++) {
            var val = datas.content["数量"][i];
            var seriesName = datas.content["职称"][i];
            var categoryName = datas.content["板块"][i];
            var seriesIndex = legends.indexOf(seriesName);
            var categoryIndex = yAxis.indexOf(categoryName);
            dataArr[seriesIndex][categoryIndex].value = dataArr[seriesIndex][categoryIndex].value + parseInt(val);
        }
        var sumList = []
        for (var i = 0; i < dataArr[0].length; i++) {
            var firstNotEmptyIndex = -1;
            var lastNotEmptyIndex = -1;
            var firstSign = false;
            var sumNumber = 0
            for (var j = 0; j < dataArr.length; j++) {
                if (!firstSign) {
                    if (dataArr[j][i].value > 0) {
                        firstSign = true;
                        firstNotEmptyIndex = j;
                    }
                }
                if (dataArr[j][i].value > 0) {
                    lastNotEmptyIndex = j;
                }
                sumNumber += parseInt(dataArr[j][i].value)
            }
            sumList.push(sumNumber)
            if (firstNotEmptyIndex >= 0)
                dataArr[firstNotEmptyIndex][i].radiusLeft = true;
            if (lastNotEmptyIndex >= 0)
                dataArr[lastNotEmptyIndex][i].radiusRight = true;
        }

        for (let i = 0; i < dataArr[0].length; i++) {
            var maxNum = 0;
            var maxNumIndex = 0;
            for (let j = 0; j < dataArr.length; j++) {
                const element = dataArr[j][i];
                var showPercent = Math.round((element.value / sumList[i]) * 10000) / 100;
                element.showPercent = showPercent;
                if (element.value > maxNum) {
                    maxNum = element.value;
                    maxNumIndex = j;
                }
            }
            dataArr[maxNumIndex][i].maxSign = true;
        }
        var percentIncList = new Array();
        for (let i = 0; i < dataArr[0].length; i++) {
            percentIncList[i] = 0;

        }
        for (let i = 0; i < dataArr[0].length; i++) {
            for (let j = 0; j < dataArr.length; j++) {
                const element = dataArr[j][i];
                if (element.showPercent > 0 && element.showPercent < 1.5) {
                    percentIncList[i] += 1.5 - element.showPercent;
                    element.realPercent = 1.5;
                } else {
                    element.realPercent = element.showPercent;
                }
            }
        }

        for (let i = 0; i < percentIncList.length; i++) {
            const element = percentIncList[i]; // i 为列号
            if (element > 0) {
                for (let j = 0; j < dataArr.length; j++) {
                    const element2 = dataArr[j][i];
                    if (element2.maxSign) {
                        element2.realPercent -= element;
                    }
                }
            }

        }

        console.log(dataArr)
        option = {
            color: ['rgb(193,135,12)', 'rgb(22,192,205)', 'rgb(148,121,225)', 'rgb(85,48,214)', 'rgb(6,127,214)', 'rgb(255,204,32)'],
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.seriesName + "：" + params.data.value[2] + "人" + '(' + params.data.value[3] + '%)'
                }
            },
            label: {
                show: false
            },
            legend: {
                selectedMode: false,
                data: legends,
                itemGap: 20,
                itemWidth: 20,
                itemHeight: 10,
                textStyle: {
                    color: 'white',
                    fontSize: 13,
                },
                top: '11%',
                align: "auto",
                height: "15%",
                orient: "vertical",
            },
            grid: {
                left: '6%',
                right: '6%',
                bottom: '2%',
                top: '32%',
                width: '100%',
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'value'
            },
            yAxis: {
                show: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                type: 'category',
                data: yAxis.reverse(),
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        fontSize: 13,
                        color: function (value, index) {
                            return value == '金融板块' ? 'rgb(255,155,4)' : 'white';
                        }
                    }
                }
            },
            barWidth: '29%',
            series: []
        }
        var li = []
        for (let i = 0; i < legends.length; i++) {
            var legend = legends[i];
            var obj = {
                name: legend,
                type: 'bar',
                stack: 'total',
                label: {
                    show: false,
                    formatter: function (params) {
                        return params.data.value[2]
                    },
                    fontSize: 10,
                },
                emphasis: {
                    focus: 'none'
                },
                data: dataArr[i]
            };
            li.push(obj);
        }
        // var sumList = [0, 0, 0, 0, 0, 0]
        // for (let k = 0; k < li.length; k++) {
        //     var data = li[k].data
        //     for (let l = 0; l < data.length; l++) {
        //         sumList[l] = sumList[l] + parseInt(data[l].value)
        //     }
        // }
        // console.log(sumList);
        for (let k = 0; k < li.length; k++) {
            var data = li[k].data
            var retLi = []
            for (let l = 0; l < data.length; l++) {
                var count = data[l].value;
                var obj = {}
                if (data[l].radiusLeft && data[l].radiusRight) {
                    obj = {
                        barBorderRadius: [10, 10, 10, 10]
                    }
                } else if (data[l].radiusLeft) {
                    obj = {
                        barBorderRadius: [10, 0, 0, 10]
                    }
                } else if (data[l].radiusRight) {
                    obj = {
                        barBorderRadius: [0, 10, 10, 0]
                    }
                }
                retLi.push({
                    itemStyle: obj,
                    //value: [data[l].realPercent, yAxis[data.length-l-1], yAxis[data.length-l-1].showPercent]
                    value: [data[l].realPercent, yAxis[data.length-l-1], count,data[l].showPercent]
                })
            }
            li[k].data = retLi
        }
        // console.log(li)
        option.series = li
        myChart.setOption(option)
    }

})