Echarts：利用Angle将点呈圆环状均匀分布

效果图 MockData.js

    makelinks() {
        this.randomData()
        let lines = []
        for(let i = 0; i < 20; i++) {
            let obj = {}
            if (parseInt(i / 10) === 0) {
                obj["source"] = "center"
                obj["target"] = `${i}` 
                obj["lineStyle"] = {
                    normal: {
                        color: 'target',
                        width: 2,
                    }
                }                
            } else {
                obj["source"] = `${i}`
                obj["target"] = "center"
                obj["lineStyle"] = {
                    normal: {
                        color: 'source',
                        width: 2,
                    }
                }    
            }         
            lines.push(obj)
        }  
        for(let i = 0; i < 40; i++) {
            if(this.random.includes(i)) continue;
            let obj = {}
            obj["source"] = `${i}-${i}`
            obj["target"] = "center"
            obj["lineStyle"] = {
                normal: {
                    color: 'source',
                    // width: 2,
                }
            }             
            lines.push(obj)
        }        
        return lines
    }

    getinsideData() {
        const insidedata = this.insideData();
        const angle = []
        for (let i = 0; i < 19; i++) {
            angle[i] = (360 / 19 * i)
        }        
        insidedata.map((item, index) => {
            if (index === 0) {
                item["value"] = [0, 0]
                item["angle"] = 0
                item["symbolSize"] = 100
                item["itemStyle"] = {
                    color: '#f5930e',
                    borderColor: "#f5930e"
                }
            } else {
                item["value"] = [1, 20*index]
                item["angle"] = angle[index]
                item["symbolSize"] = 50
                if(index % 2 === 0) {
                    item["itemStyle"] = {
                        color: '#eb45a7',
                        borderColor: "#872b76",
                    }                    
                } else {
                    item["itemStyle"] = {
                        color: '#0cc4bc',
                        borderColor: "#438c71",
                    }
                }
            }
        })
        return insidedata
    }

    insideData() {
        let insidedata = 
        [
            {
                name: 'center'
            },
            {
                name: '1'
            },
            {
                name: '2'
            },
            {
                name: '3'
            },
            {
                name: '4'
            },
            {
                name: '5'
            },
            {
                name: '6'
            },
            {
                name: '7'
            },
            {
                name: '8'
            },
            {
                name: '9'
            }, 
            {
                name: '10'
            },
            {
                name: '11'
            },
            {
                name: '12'
            },
            {
                name: '13'
            },
            {
                name: '14'
            },
            {
                name: '15'
            },
            {
                name: '16'
            },
            {
                name: '17',
            },
            {
                name: '18'
            },  
        ]
        return insidedata;
    }

    getoutData() {
        const outdata = this.outData()
        const angle = []
        for (let i = 0; i < 40; i++) {
            angle[i] = (360 / 40 * i)
        }
        this.random.map(item => {
            console.log(`random-${item}`, outdata[item])
            outdata[item]["itemStyle"] = {
                borderColor: "#487aad",
            }   
        })        
        outdata.map((item, index) => {
                item["value"] = [2, 9*index]
                item["angle"] = angle[index]
                item["symbolSize"] = 20
        })
        return outdata
    }

Vue

    mounted() {
        const new_makeechartsdata = new makeechartsdata()
        const links = new_makeechartsdata.makelinks()
        const insidenodes = new_makeechartsdata.getinsideData();
        const outsidenodes = new_makeechartsdata.getoutData();
        let myChart = echarts.init(document.getElementById('polar'))
        myChart.hideLoading();        
        let nodes = [...insidenodes, ...outsidenodes]
        var option = {
            title: {
                text: '关系图'
            },
            polar: {},
            radiusAxis: {
                show: false
            },
            angleAxis: {
                type: 'value',
                min: 0,
                max: 360,
                show: false
            },
            series: [
                {
                    type: 'graph',
                    roam: true,
                    coordinateSystem: 'polar',
                    label: {
                        show: true,
                        position: 'outside',
                        color: '',
                        fontSize: 14
                    },
                    lineStyle: {
                        normal: {
                            curveness: 0.3
                        }
                    },
                    symbol: 'circle',
                    symbolSize: 20,
                    symbolPosition: 'start',
                    nodes: nodes,
                    links
                },
                {
                    type: 'lines',
                    coordinateSystem: 'polar',
                    lineStyle: {
                        color: '#f60',
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.1
                    }
                }
            ]
        };

        myChart.setOption(option)
    }