Echarts在线免费图表

 
            // if (!window["echarts5_3_3"]) {
//     EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/xdchaijs/echarts5.3.3.js")
// }
// // //初始化chart
// let isChart = echarts5_3_3.init(document.getElementById('HHH206'));


let name = ['上传资料', '添加题目', '新建试卷', '发布作业', '发布测试', '发布公告']// '<#=Grid15.a2$#>' ;//
// eval('<#=Grid15.b2$#>')
let xlname = ['上传资料', '添加题目', '新建试卷', '发布作业', '发布测试', '发布公告']// '<#=Grid15.a2$#>' ;//

let dataList = [
    [582, 421.2, 622.1, 625.3, 785, 224],
    [52, 771.2, 122.1, 225.3, 465, 524],
    [902, 411.2, 622.1, 800, 265, 224],
    [552, 771.2, 122.1, 225.3, 465, 900],
    [902, 411.2, 622.1, 800, 265, 224],
    [552, 771.2, 122.1, 225.3, 465, 900]
]


let maxdata = [100, 100, 100, 100, 100, 100];
let indicator = []
let seriesData = []
let colorList = ['rgba(255, 122, 0, 1)', 'rgba(255, 220, 112, 1)', 'rgba(4, 229, 209, 1)', 'rgba(34, 159, 255, 1)']
name.forEach((v, i) => {
    indicator.push({
        name: v,
        max: 900 // maxdata[i]
    })
})
xlname.forEach((v, i) => {
    seriesData.push(
        {
            name: v,
            type: 'radar',
            data: [dataList[i]],
            symbolSize: [0, 0],
            lineStyle: { //边缘颜色
                //  width: 0
                color: colorList[i % 4],
                shadowBlur: 0,
                shadowColor: colorList[i % 4],
            },
            itemStyle: {
                borderWidth: 0,
                color: colorList[i % 4],
                borderColor: colorList[i % 4],
                shadowBlur: 0,
                shadowColor: colorList[i % 4],
            },
            areaStyle: {
                color: colorList[i % 4],
                opacity: 0.3
            }
        }
    )
})

option = {
    backgroundColor: '#013A54',
    legend: {
        orient: 'vertical',
        data: xlname,
        right: 20,
        top: 50,
        itemWidth: 16,
        itemHeight: 8,
        itemGap: 15,
        icon: 'circle',
        textStyle: {
            fontSize: 12,
            color: '#ffff'
        },
        // 图例图标自定义
        itemStyle: {
            // 设置为auto回合内容一样的颜色
            borderColor: 'auto',
            borderWidth: 2,
            color: 'transparent',
            borderRadius: 4
        }
    },
    radar: {
        shape: 'circle',
        center: ['40%', '50%'],
        radius: '55%',
        name: {
            formatter: function (name, indicator) {
                let arr;
                arr = [
                    '{a|' + name + '}'
                ]
                return arr.join('\n')
            },
            textStyle: {
                rich: { //根据文字的组设置格式
                    a: {
                        color: '#8292a8',
                        fontSize: 13,
                        fontWeight: 500,
                        fontFamily: 'Source Han Sans CN',
                    },
                }

            }
        },
        nameGap: 20,
        indicator: indicator,


        splitArea: {
            show: true,
            areaStyle: {
                color: ['rgba(24, 56, 214, 0)', 'rgba(24, 56, 214, 0)', 'rgba(24, 56, 214, 0)', 'rgba(24, 56, 214, 0)', 'rgba(24, 56, 214, 0)']
            }
        },
        axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
                color: 'rgba(255,255,251,0.2)',
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,251,0.2)',// 分隔线颜色
                width: 2 // 分隔线线宽
            }
        }
    },
    series: seriesData
};

// isChart.setOption(option);