首页 新闻 赞助 找找看

echarts 图形方案寻找

0
悬赏园豆:40 [已解决问题] 解决于 2023-04-10 09:41

如图:实现效果

这种效果是叫导航图吗?
在不写原生js的 有好多 类库 ,组件吗?

s_p的主页 s_p | 初学一级 | 园豆:138
提问于:2023-03-28 16:44
< >
分享
最佳答案
0

这是 流程图 吧?

收获园豆:18
快乐的凡人721 | 老鸟四级 |园豆:3882 | 2023-03-28 19:12

记录使用echarts的graph类型绘制流程图全过程(一)-x,y位置的计算
https://www.cnblogs.com/webhmy/p/11606448.html)

快乐的凡人721 | 园豆:3882 (老鸟四级) | 2023-03-28 19:13
其他回答(3)
0
收获园豆:10
ycyzharry | 园豆:25631 (高人七级) | 2023-03-28 19:25
0

graph图表应该能行,你可以看看这个用 Echarts 做的五行相克图:

var wuXin = new Array("木", "火", "土", "金", "水");
var color = ['#78a355', '#d93a49', '#8e3e1f', '#dea32c', '#50b7c1'];

function roundDatas(num) {
    var datas = [];
    for (var i = 0; i < num; i++) {
        var x = Math.cos(72 * i * Math.PI / 180);
        var y = Math.sin(72 * i * Math.PI / 180);
        datas.push({
            name: wuXin[i],
            x: y,
            y: -x,
            itemStyle: {
                normal: {
                    color: color[i]
                }
            },
        });
    }
    return datas;
}


function linkDatas(num) {
    var ldatas = [];
    for (var i = 0; i < num; i++) {
        ldatas.push({
            label: {
                normal: {
                    show: true,
                    formatter: '相生'
                }
            },
            lineStyle: {
                normal: {
                    color: '#94d6da',
                    width: 2,
                    curveness: 0.3,
                    opacity: 0.8,
                    type: 'dashed',
                }
            },
            source: i,
            target: i + 1
        });

        ldatas.push({
            lineStyle: {
                normal: {
                    color: '#FF5151',
                    width: 2,
                    curveness: 0,
                    opacity: 0.8
                }
            },
            label: {
                normal: {
                    show: true,
                    formatter: '相克'
                }
            },
            source: i,
            target: i + 2
        });

    }
    //////for end///////

    ldatas.push({
        label: {
            normal: {
                show: true,
                formatter: '相生'
            }
        },
        lineStyle: {
            normal: {
                color: '#94d6da',
                type: 'dashed',
                width: 2,
                curveness: 0.3,
                opacity: 0.8
            }
        },
        source: (i - 1),
        target: 0
    });

    ldatas.push({
        lineStyle: {
            normal: {
                color: '#FF5151',
                width: 2,
                curveness: 0,
                opacity: 0.8
            }
        },
        label: {
            normal: {
                show: true,
                formatter: '相克'
            }
        },
        source: 3,
        target: 0
    });
    ldatas.push({
        lineStyle: {
            normal: {
                color: '#FF5151',
                width: 2,
                curveness: 0,
                opacity: 0.8
            }
        },
        label: {
            normal: {
                show: true,
                formatter: '相克'
            }
        },
        source: 4,
        target: 1
    });

    return ldatas;
}
/////linkDatas end//////


option = {
    backgroundColor: '#2E2E2E',
    title: {
        text: '五行相生相克图',
        subtext: '',
        left: 50,
        top: 10,
        backgroundColor: '#FFFAFA',
        borderRadius: 8,
        textStyle: {
            color: '#102b6a',
        },
        subtextStyle: {
            color: '#102b6a',
        }
    },

    color: ['#000000', '#FFFFFF'],
    series: [

        {
            name: '五行',
            type: 'graph',
            //roam: true,//缩放移动
            //draggable: true,
            focusNodeAdjacency: true,
            edgeSymbol: ['', 'arrow'],
            edgeSymbolSize: [3, 15],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 15
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    formatter: '{b}',
                    fontSize: 46
                }
            },


            symbol: 'circle',
            symbolSize: 60,
            top: '60',
            left: '200',
            width: '400',
            height: '400',
            data: roundDatas(5),
            links: linkDatas(5)
        },

        ////////阴阳太极图//////////
        {
            name: '大圆',
            type: 'pie',
            radius: '52',
            center: ['400', '268'],
            data: [{
                value: 50,
                name: '阴'
            }, {
                value: 50,
                name: '阳'
            }, ],
            roseType: 'radius',
            hoverAnimation: false,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false,
                }
            }
        }, {
            name: '黑色圆',
            type: 'pie',
            zlevel: 2,
            radius: '26',
            center: ['400', '294'],
            data: [{
                value: 50,
                name: ''
            }, ],
            roseType: 'radius',
            hoverAnimation: false,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false,
                }
            }
        },

        {
            name: '白色圆',
            type: 'pie',
            zlevel: 2,
            radius: '26',
            center: ['400', '242'],
            data: [{
                value: 50,
                name: ''
            }, ],
            roseType: 'radius',
            hoverAnimation: false,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false,
                }
            }

        },

        {
            name: '黑色圆小',
            type: 'pie',
            zlevel: 3,
            radius: '12',
            center: ['400', '242'],
            data: [{
                value: 50,
                name: ''
            }, ],
            roseType: 'radius',
            hoverAnimation: false,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false,
                }
            }
        },

        {
            name: '白色圆小',
            type: 'pie',
            zlevel: 3,
            radius: '12',
            center: ['400', '294'],
            data: [{
                value: 50,
                name: ''
            }, ],
            roseType: 'radius',
            hoverAnimation: false,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false,
                }
            },

        },


    ]
};
收获园豆:10
LeonLiu^ | 园豆:270 (菜鸟二级) | 2023-04-04 13:57
0

写代码容易还是用设计软件方便~~

收获园豆:2
花飘水流兮 | 园豆:13540 (专家六级) | 2023-04-06 11:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册