Echarts 将数字数组以百分比的形式展示

echarts yekong 288℃

Echarts效果

function gettotallist(listdata) {
    let total = 0
    var list2 = listdata;
    var list = []
    listdata.forEach((type) => {
        total = total + type
    });
    list2.forEach((type) => {
        var data = Number(Number((type / total) * 100).toFixed(0))
        list.push(data)
    });
    return list
}

function gettotal(listdata) {
    let total = 0
    listdata.forEach((type) => {
        total = total + type
    });
    return total
}

function fengxianecharts() {
    var echartsx = echarts.init(document.getElementById("fengxianecharts"));
    let colorList = ['rgba(201, 0, 0, 1)', 'rgba(255, 98, 22, 1)', 'rgba(255, 225, 85, 1)', 'rgba(28, 138, 215, 1)'];
    // let list1 = [1070, 700, 170, 270]
    // let list2 = [110, 140, 70, 30]
    // let list3 = [70, 70, 70, 70]
    // let list4 = [70, 70, 70, 70]
    var bodydata = [[1070, 700, 170, 270], [110, 140, 70, 30], [70, 70, 70, 70], [70, 70, 70, 70]]
    let list = [gettotal(bodydata[0]), gettotal(bodydata[1]), gettotal(bodydata[2]), gettotal(bodydata[3])]
    let newlist1 = gettotallist(bodydata[0])
    console.log(newlist1)
    let newlist2 = gettotallist(bodydata[1])
    let newlist3 = gettotallist(bodydata[2])
    let newlist4 = gettotallist(bodydata[3])
    var data = [['Period', '重大风险', '较大风险', '一般风险', '低风险'],
        ['港口', ...newlist1],
        ['航运', ...newlist2],
        ['物流', ...newlist3],
        ['其他', ...newlist4]]
    var option = {
        legend: {
            bottom: 10,
            x: 'center',
            itemWidth: 10,
            itemGap: 10,
            itemHeight: 10,
            textStyle: {color: '#fff', fontSize: is1600 ? 10 : 12}
        },
        tooltip: {
            show: true,
            formatter: function (params, ticket, callback) {
                console.log(params)
                console.log(params.name)
                console.log(params.seriesName)
                var data2 = ''
                data.forEach((type, index) => {

                    if (type[0] == params.name) {
                        console.log(type[0])
                        console.log('sssss')
                        console.log(params.name)
                        console.log(params)
                        console.log(params.seriesIndex)
                        console.log(params.seriesName)
                        data2 = params.seriesName + ':' + bodydata[index - 1][params.seriesIndex]
                    }
                });
                console.log(params.seriesIndex)
                return data2
            }
        },
        dataset: {
            source: data,
        },
        xAxis: {
            name: 'Thousands',
            type: 'value',
            show: false,
            axisLine: {
                show: true,
                symbol: ['none', 'arrow'], //两端都显示箭头
                symbolOffset: [0, 5], //箭头距离两端的距离,可为负数
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 1)',
                margin: is1600 ? 5 : 15,
                fontFamily: 'Helvetica Condensed Bold',
                fontSize: is1600 ? 10 : 12
            }
        },
        yAxis: {
            name: '',
            type: 'category',
            axisLine: {
                show: false,
                symbol: ['none', 'arrow'], //两端都显示箭头
                symbolOffset: [0, 5], //箭头距离两端的距离,可为负数
            },
            axisTick: { //y轴刻度线
                show: false
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 1)',
                margin: is1600 ? 5 : 15,
                fontFamily: 'Helvetica Condensed Bold'
            }
        },
        grid: {
            top: is1600 ? '0%' : '5%',
            right: '12%',
            bottom: '15%',
            left: '5%',
            containLabel: true,
        },
        series: [
            {
                stack: '0',
                type: 'bar',
                itemStyle: {
                    //通常情况下:
                    normal: {
                        //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                        color: colorList[0],
                        marginRight: 10,
                    },
                },
                //鼠标悬停时:
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
            {
                stack: '0',
                type: 'bar',
                itemStyle: {
                    //通常情况下:
                    normal: {
                        //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                        color: colorList[1],
                    },
                },
                //鼠标悬停时:
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
            {
                stack: '0',
                type: 'bar',
                itemStyle: {
                    //通常情况下:
                    normal: {
                        //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                        color: colorList[2],
                    },
                },
                //鼠标悬停时:
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
            {
                stack: '0',
                type: 'bar',
                itemStyle: {
                    //通常情况下:
                    normal: {
                        //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                        color: colorList[3],
                    },
                },
                //鼠标悬停时:
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: function (e) {
                            console.log(e.dataIndex)
                            return list[e.dataIndex]
                        },
                        textStyle: {color: '#fff', fontFamily: 'Helvetica Condensed Bold'}
                    }
                },
            }
        ],
    };
    echartsx.clear();
    echartsx.resize();
    echartsx.setOption(
        option
    );
}

喜欢 (0)