Echarts在线免费图表

 
            let dataList = [
    {
        id: 1,
        name: '威胁监测',
        num: '23.42%',
        color: '#2b6df3',
        size: [260, 60],
        borderColor: '#aec1e0',
        position: [50, 50],
    },
    {
        id: 2,
        name: '安全加固',
        num: '15.72%',
        size: [300, 50],
        borderColor: '#84b4fe',
        color: '#2b6df3',
        position: [75, 38],
    },
    {
        id: 3,
        name: '拦截事件',
        num: '13.87%',
        size: [280, 50],
        borderColor: '#6993ef',
        color: '#2b6df3',
        position: [30, 62],
    },
    {
        id: 4,
        name: '策略优化',
        num: '11.86%',
        size: [240, 50],
        borderColor: '#4b6ec2',
        color: '#0c6491',
        position: [70, 65],
    },
    {
        id: 5,
        name: '安全评估',
        num: '9.51%',
        size: [220, 50],
        borderColor: '#4b6ec2',
        color: '#0c6491',
        position: [75, 20],
    },

    {
        id: 6,
        name: '风险评估',
        num: '5.76%',
        size: [240, 50],
        borderColor: '#1c44b2',
        color: '#0c6491',
        position: [31, 35],
    },
    {
        id: 7,
        name: '响应处置',
        num: '2.21%',
        size: [250, 50],
        borderColor: '#1c44b2',
        color: '#0c6491',
        position: [35, 24],
    },
    {
        id: 8,
        name: '攻击还原分析',
        num: '2.21%',
        size: [260, 50],
        borderColor: '#0f246f',
        color: '#0c6491',
        position: [40, 78],
    },

    {
        id: 9,
        name: '其他',
        num: '1.98%',
        size: [160, 50],
        borderColor: '#969696',
        color: '#969696',
        position: [76, 87],
    },

    {
        id: 10,
        name: '其他2',
        num: '0.8%',
        size: [160, 50],
        borderColor: '#969696',
        color: '#969696',
        position: [40, 10],
    },
];
let data = [];
// 渲染数据，并写入chart
dataList.map((item) => {
    data.push({
        name: `${item.name}`,
        number: item.num,
        value: item.position,
        symbolSize: item.size,
        itemStyle: {
            normal: {
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                        offset: 0.2,
                        color: 'rgba(27, 54, 72, 0.5)',
                    },
                    {
                        offset: 1,
                        color: item.color,
                    },
                ]),
                borderWidth: 1,
                borderColor: item.borderColor,
            },
        },
    });
});
option = {
    backgroundColor: '#000',
    xAxis: [
        {
            type: 'value',
            show: false,
            min: 0,
            max: 100,
        },
    ],
    yAxis: [
        {
            min: 0,
            show: false,
            max: 100,
        },
    ],
    grid: {
        show: false,
        top: 10,
        bottom: 10,
    },
    series: [
        {
            type: 'scatter',
            symbolSize: [215, 50],
            //散点形状设置symbol: 'circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, 'arrow’
            symbol: 'rect',
            label: {
                normal: {
                    show: true,
                    formatter: '{b}',
                    color: '#fff',
                    textStyle: {
                        fontSize: '20',
                    },
                    // 自定义label显示内容与样式
                    formatter: (params) => {
                        return `{title|${params.data.name}}{nbsp|}{num|${params.data.number}}`;
                    },
                    rich: {
                        title: {
                            color: '#ffffff',
                            align: 'center',
                            fontSize: '16',
                        },
                        // 间距
                        nbsp: {
                            width: 20
                        },
                        num: {
                            color: '#b0b0b0',
                            align: 'center',
                            fontSize: '14',
                        }
                    }
                },
            },
            animationDurationUpdate: 100,
            animationEasingUpdate: 100,
            animationDelay: function (inx) {
                // 150(数值越大延迟就越大)
                return inx * 150;
            },
            data: data,
        },
    ],
};