echart旭日图数据转换_echarts横坐标时间轴

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>echart旭日图</title>
    <style>
        .m-main{margin: 200px;width: 150px;height:150px;}
    </style>
</head>

<body>
    <div id="main" class="m-main"></div>
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.1/echarts.js"></script>
    <script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));

    let data = [];
    let net = ['内网', '外网'];
    let level = ['高危', '中危', '低危', '信息'];
    let sum = 0;
    let itemStyle = [
        [{
                color: '#ab7550',
                itemStyle: [{
                    color: '#ab7550'
                }, {
                    color: '#825d44'
                }]
            },
            {
                color: '#614838',
                itemStyle: [{
                    color: '#523c2e'
                }, {
                    color: '#4e3d32'
                }]
            }
        ],
        [{
                color: '#3b3933',
                itemStyle: [{
                    color: '#414028'
                }, {
                    color: '#3b3933'
                }]
            },
            {
                color: '#605f42',
                itemStyle: [{
                    color: '#5f5e41'
                }, {
                    color: '#56564c'
                }]
            }
        ]
    ];    

    for (let i = 0; i < 50; i++) {
        let temp = {};
        temp.net = Math.random() > 0.3 ? 0 : 1;
        temp.level = Math.floor(Math.random() * 3.9);
        temp.msg = '信息' + i;
        temp.num = parseInt(Math.random() * 20 + 1, 10);
        sum += temp.num;
        data.push(temp);
    }

    for (let i = 0; i < data.length; i++) {
        data[i].parsent = ((data[i].num / sum) * 100).toFixed(2) + '%';
    }

    let formatData = [{
        info: {
            net: '外网',
            num: 0,
            parsent: '100%'
        },
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#292929'
                }, {
                    offset: 1,
                    color: '#e08849'
                }],
                globalCoord: false
            }
        },
        children: [{
                info: {
                    net: '外网',
                    level: '高危',
                    num: 0,
                    parsent: '100%'
                },
                children: []
            },
            {
                info: {
                    net: '外网',
                    level: '中危',
                    num: 0,
                    parsent: '100%'
                },
                children: []
            },
            {
                info: {
                    net: '外网',
                    level: '低危',
                    num: 0,
                    parsent: '100%'
                },
                children: []
            },
            {
                info: {
                    net: '外网',
                    level: '信息',
                    num: 0,
                    parsent: '100%'
                },
                children: []
            }
        ]
    }, {
        info: {
            net: '内网',
            num: 0,
            parsent: '100%'
        },
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#605F42'
                }, {
                    offset: 1,
                    color: '#292929'
                }],
                globalCoord: false
            }
        },
        children: [{
                info: {
                    net: '内网',
                    level: '高危',
                    num: 0,
                    parsent: '100%'
                },
                children: []
            },
            {
                info: {
                    net: '内网',
                    level: '中危',
                    num: 0,
                    parsent: '100%'
                },
                children: []
            },
            {
                info: {
                    net: '内网',
                    level: '低危',
                    num: 0,
                    parsent: '100%'
                },
                children: []
            },
            {
                info: {
                    net: '内网',
                    level: '信息',
                    num: 0,
                    parsent: '100%'
                },
                children: []
            }
        ]
    }];
    for (let i = 0; i < data.length; i++) {
        let temp = {};
        temp = Object.assign({}, data[i]);
        temp.net = net[data[i].net];
        temp.level = level[data[i].level];
        formatData[data[i].net].children[data[i].level].children.push({
            info: temp,
            value: data[i].num,
        });
    }

    for (let i = 0; i < formatData.length; i++) {
        let isFirst = true;
        let numLevel_1 = 0;
        for (let j = 0; j < formatData[i].children.length; j++) {
            if (formatData[i].children[j].children.length > 0) {
            	let index = isFirst ? 0 : 1;
                formatData[i].children[j].itemStyle = itemStyle[i][index];

                let isFirst2 = true;
                let numLevel_2 = 0;
                for (let z = 0; z < formatData[i].children[j].children.length; z++) {
                	let index2 = isFirst2 ? 0 : 1;
                    formatData[i].children[j].children[z].itemStyle = itemStyle[i][index].itemStyle[index2];
                    let num = formatData[i].children[j].children[z].info.num;
                    numLevel_2 += num;
                    isFirst2 = !isFirst2;
                }
                formatData[i].children[j].info.num = numLevel_2;
                formatData[i].children[j].info.parsent = (numLevel_2 / sum * 100).toFixed(2) + '%';
                numLevel_1 += numLevel_2;
                isFirst = !isFirst;
            }
        }
        formatData[i].info.num = numLevel_1;
        formatData[i].info.parsent = (numLevel_1 / sum * 100).toFixed(2) + '%';
    }
    let option = {
        grid: {
            top: '0',
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: false
        },
        tooltip: {
            show: true,
            formatter: function(params, ticket, callback) {
                let net = params.data.info.net;
                let level = params.data.info.level ? '·' + params.data.info.level : '';
                let msg = params.data.info.msg ? '·' +params.data.info.msg : '';

                let num = params.data.info.num;
                let parent = params.data.info.parsent;
                var text = net + level + msg;
                return `<div>${net}${level}${msg}</div>
                <div>${num} ${parent}</div>`;
            }
        },
        series: {
            radius: ['20%', '100%'],
            type: 'sunburst',
            nodeClick: false,
            itemStyle: {
                borderWidth: 1
            },
            animationDurationUpdate: 0,
            emphasis: {
                itemStyle: {
                    opacity: 0.8
                }
            },
            sort: null,
            data: formatData
        }
    };

    myChart.setOption(option);
    </script>
</body>

</html>

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/189197.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...