Echarts在线免费图表

 
            var ERdata = ['表1', '表2', '表3', '表4', '表5'];
option = {
    title: {
        text: 'Graph 简单示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [{
        type: 'graph',
        legendHoverLink: true,
        layout: 'none',
        symbol: 'rect',
        symbolSize: 60,
        roam: true,

        //                      分类栏目
        label: {
            normal: {
                show: true,
                color: '#000000',
                textStyle: {
                    fontSize: 12
                },
            }
        },
        itemStyle: {
            normal: {
                color: '#ffd200',
            }
        },
        data: roundDatas(),
        //                      连接线相关
        edgeSymbol: ['none', 'none'],
        edgeLabel: {
            normal: {
                show: true,
                fontSize: 20,
                color: '#ffd200',
            }
        },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0,
            }
        },
        links: [],
    }],
    graphic: echarts.util.map(ERdata, function(dataItem, dataIndex) {
        return {
            type: 'circle',
            shape: {
                r: 10
            },
            //                        position:myChart.convertToPixel({'seriesIndex':0}, [200,200]),
            invisible: false,
            draggable: true,
            z: 100,
        }
    }),
};

function roundDatas() {
    
    let datas = [];
    for (let i = 0; i < ERdata.length; i++) {
        let x = (i % 2) * 200;
        let y = Math.floor(i / 2) * 20;
        datas.push({
            name: ERdata[i],
            x: x,
            y: y,
        });
    }
    return datas;
}