echart 玫瑰散点图

118 阅读1分钟

1650792386(1).jpg

var value = 90;
var angledata = [
    "p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8", "p9", "p10", "p11", "p12",
    "p13", "p12", "p15", "p16", "p17", "p18", "p19", "p20", "p21", "p22", "p23", "p24",
    "p25", "p26", "p27", "p28", "p29", "p30", "p31", "p32", "p33", "p34", "p35", "p36",
];
var datas = [{
        name: "中心",
        des: "中心",
        symbolSize: 0,
        draggable: false,
        itemStyle: {
            normal: {
                color: "#E75FC3",
                borderColor: '#FFFFFF',
                borderWidth: 0,
            }
        },
        label: {
            show: false
        },
        value: [0, 0],
        label: {
            normal: {
                show: true,
                backgroundColor: {
                    type: "pattern",
                    repeat: "no-repeat"
                },
                color: '#37CFEB',
                formatter: function() {
                    return "    ";
                }
            }
        }
    },
    {
        name: "组织一_7",
        des: "组织一",
        symbolSize: 30,
        draggable: false,
        itemStyle: {
            normal: {
                color: "#f00",
                borderColor: '#FFFFFF',
                borderWidth: 0,
            }
        },
        label: {
            show: false
        },
        value: [8, 'p33']
    },


    {
        name: "组织一_8",
        des: "组织一",
        symbolSize: 30,
        draggable: false,
        itemStyle: {
            normal: {
                color: "#0f0",
                borderColor: '#FFFFFF',
                borderWidth: 0,
            }
        },
        label: {
            show: false
        },
        value: [3, 'p15']
    },


]
var links = [
    //从 中心点出发
    {
        source: "中心",
        target: "组织一_7",
        des: "指示线提示",
        value: "",
        lineStyle: {
            curveness: 0,
            color: '#f00',
            width: 10
        }
    },
    {
        source: "中心",
        target: "组织一_8",
        des: "指示线提示",
        value: "",
        lineStyle: {
            curveness: 0,
            color: '#0f0',
            width: 10
        }
    },

    //第1块   // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

]
var charts = {
    datas: datas,
    links: links
}
option = {
    
    xAxis: {
        show:false,
    },
    yAxis: {
        show:false,
    },
    polar: {
        center: ["50%", "50%"],
        "radius": "80%"
    },
      radiusAxis: {
        // show: false,
        type: 'value',
        min: 0,
        max: 12,
        splitLine: {
            show: true,
            lineStyle: {
                type:'dashed'
            }
        },
        axisLine: {
            show: false
        },
        axisTick:{
            show:false
        },
        axisLabel:{
            show:false
        }
    },
    angleAxis: {
        show: false,
        type: 'category',
        data: angledata,
        boundaryGap: false,



    },
    series: [

        // 进度圈
        {
            type: 'pie',
            clockWise: true,
            radius: ["87%", "80%"],
            data: [{
                    value: value,
                    itemStyle: {
                        normal: {
                            color: '#00f',
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: false
                            }
                        },
                    },
                    label: {
                        position: "center"
                    },
                },
                {
                    name: 'gap',
                    value: 100 - value,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0,
                        }
                    },
                }
            ]
        },
        {
        type: 'graph',

        coordinateSystem: 'polar',

        data: charts.datas,
        links: charts.links,

    }


    ]
};