请问大神们能让点击的节点位于中心位置吗ECharts Gallery

20:11:45图表已生成
代码
var allData = {
    dict: {
        '0': '云盘',
        '1': '文件B',
        '2': '文件C',
        '3': '文件A'
    },
    nodes: [{
        id: '0',
        name: '云盘',
        category: 0,
        //fixed:true,
        //x:300,
        //y:400
    }, {
        id: '1',
        name: '文件B',
        category: 1
    }, {
        id: '2',
        name: '文件C',
        category: 2
    }, {
        id: '3',
        name: '2011-11-15 星期二[北京新闻 北京新闻第一版]',
        category: 2
    }],
    links: [{
        source: '0',
        target: '1',
        value: '引用'
    }, {
        source: '0',
        target: '2',
        value: '分享'
    }, {
        source: '0',
        target: '3',
        value: '200'
    }],
    linkDict: {}
};
var rocket = 'path://M-244.396,44.399c0,0,0.47-2.931-2.427-6.512c2.819-8.221,3.21-15.709,3.21-15.709s5.795,1.383,5.795,7.325C-237.818,39.679-244.396,44.399-244.396,44.399z M-260.371,40.827c0,0-3.881-12.946-3.881-18.319c0-2.416,0.262-4.566,0.669-6.517h17.684c0.411,1.952,0.675,4.104,0.675,6.519c0,5.291-3.87,18.317-3.87,18.317H-260.371z M-254.745,18.951c-1.99,0-3.603,1.676-3.603,3.744c0,2.068,1.612,3.744,3.603,3.744c1.988,0,3.602-1.676,3.602-3.744S-252.757,18.951-254.745,18.951z M-255.521,2.228v-5.098h1.402v4.969c1.603,1.213,5.941,5.069,7.901,12.5h-17.05C-261.373,7.373-257.245,3.558-255.521,2.228zM-265.07,44.399c0,0-6.577-4.721-6.577-14.896c0-5.942,5.794-7.325,5.794-7.325s0.393,7.488,3.211,15.708C-265.539,41.469-265.07,44.399-265.07,44.399z M-252.36,45.15l-1.176-1.22L-254.789,48l-1.487-4.069l-1.019,2.116l-1.488-3.826h8.067L-252.36,45.15z';
var categories = [{
    name: '视频'
}, {
    name: '音频'
}, {
    name: '图片'
}, {
    name: '其他'
}];
option = {
    title: {
        text: '文件关系',
        top: 'bottom',
        left: 'right'
    },
    tooltip: {
                                enterable: true,
                                triggerOn: 'click'},
    //动画
    //animationDurationUpdate: 20000,
    //animationEasingUpdate: 'cubicInOut',
    //animationDurationUpdate: function (idx) {
    // 越往后的数据延迟越大
    //return idx * 1;
    //},
    legend: {
        x: "center",
        //show: false,
        data: categories.map(s => {
            return s.name;
        })
    },
    series: [{
        type: 'graph',
        layout: 'force',
        symbolSize: 45,
        focusNodeAdjacency: true,
        roam: true,
        draggable: false,
        categories: categories,
        dataZoom: [{
            id: 'dataZoomX',
            show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
            backgroundColor: "rgba(47,69,84,0)", //组件的背景颜色
            type: 'slider', //slider表示有滑动块的，inside表示内置的
            dataBackground: { //数据阴影的样式。
                //lineStyle: mylineStyle, //阴影的线条样式
                //areaStyle: myareaStyle, //阴影的填充样式
            },
            fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
            borderColor: "#ddd", //边框颜色。
            filterMode: 'filter', //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
            //'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
            //'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
            //'none': 不过滤数据，只改变数轴范围。
            xAxisIndex: 100, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
            yAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
            radiusAxisIndex: 3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
            angleAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
            start: 30, //数据窗口范围的起始百分比,表示30%
            end: 70, //数据窗口范围的结束百分比,表示70%
            startValue: 10, //数据窗口范围的起始数值
            endValue: 100, //数据窗口范围的结束数值。
            orient: "horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
            zoomLock: false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
            throttle: 100, //设置触发视图刷新的频率。单位为毫秒（ms）。
            zoomOnMouseWheel: true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
            moveOnMouseMove: true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
            left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
            top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
            right: "auto", //组件离容器右侧的距离,'20%'
            bottom: "auto", //组件离容器下侧的距离,'20%'

        }],
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 12
                },
                position: 'top'
            }
        },
        tooltip: {
            formatter: params => {
                // console.log(params);
                var tip = `<span style="color:red;">${params.name}</span><br/>${params.data.contentId}`;
                return tip;
            },
            padding: 5
        },
        force: {
            repulsion: 1000,
            //edgeLength: [1, 200],
            //layoutAnimation :false
        },
        edgeSymbol: 'arrow',
        edgeSymbolSize: [0, 10],
        edgeLabel: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 10
                },
                formatter: "{c}"
            }
        },
        data: allData.nodes,
        links: allData.links,
        markPoint: {
            symbol: rocket,
            symbolSize: 50,
            data: [{
                name: '某个屏幕坐标',
                x: 100,
                y: 100
            }]
        },
        itemStyle: {
            borderColor: 'source',
            borderWidth: 1
        },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0,
                color: 'source'
            }
        },
        emphasis: {
            lineStyle: {
                width: 5
            }
        }
    }],
    animationDelayUpdate: function(idx) {
        console.log(idx);
    }
};


myChart.on('click', function(params) {
    if (params.dataType == 'node') { //节点
        //console.log(params);
        //console.log(myChart.appendData);
        //myChart.resize();
        nodeOnClick(params);
    }
});

function nodeOnClick(params) {
    var data = params.data;
    var num = Math.floor(Math.random() * 5 + 1);
    for (let i = 1; i <= num; i++) {
        var newNode = {
            id: data.id + i,
            name: i,
            category: Math.floor(Math.random() * 4),
            draggable: true
        };
        if (!allData.dict[newNode.id]) {
            allData.nodes.push(newNode);
            allData.dict[newNode.id] = true;
        }
        if (!allData.linkDict[data.id + '->' + newNode.id]) {
            allData.links.push({
                source: data.id,
                target: newNode.id,
                value: '->' + i
            });
            allData.linkDict[data.id + '->' + newNode.id] = true;
        }
    }
    var node = allData.nodes.find(s => {
        return s.id == data.id;
    });
    node.fixed = true;
    node.x = 10; //params.event.offsetX;
    node.y = 10; //params.event.offsetY;

    myChart.setOption({
        series: [{
            data: allData.nodes,
            links: allData.links
        }]
    });
}

myChart.dispatchAction({
    type: 'dataZoom',
    batch: [{ // 第一个 dataZoom 组件
        start: 100,
        end: 100
    }]
});


// 定义抠图方法
function getImgData(imgSrc, radius, center = {
    x: 0,
    y: 0
}) {
    return new Promise((resolve) => {
        const canvas = document.createElement('canvas');
        const contex = canvas.getContext('2d');
        const img = new Image();
        img.crossOrigin = '';
        const diameter = 2 * radius;
        img.onload = function() {
            canvas.width = diameter;
            canvas.height = diameter;
            contex.clearRect(0, 0, diameter, diameter);
            contex.save();
            contex.beginPath();
            contex.arc(radius, radius, radius, 0, 2 * Math.PI); // 画出圆
            contex.clip(); // 裁剪上面的圆形
            contex.drawImage(img, center.x - radius, center.y - radius, diameter, diameter, 0, 0, diameter, diameter); // 在刚刚裁剪的园上画图
            contex.restore(); // 还原状态
            resolve(canvas.toDataURL('image/png', 1));
        };
        img.src = imgSrc;
    });
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
