拖拽怎么添加symbol图标和对应的名字ECharts Gallery

20:11:45图表已生成
代码
    //本身关系图不能进行拖拽（设其自带原点为A），我们设置与图中data相同的点（点B）， A点不动  
    //B点动，B点变化后改变data、的值，从而逼迫A点从新画图，下图是B点没隐藏这样方便我们看。  

    //设置点的大小  
    var symbolSize = 20;  
    option = null;  
    //设置个个点坐标  
    var data = [[520,400], [800,400],
				[670,250],
				[70,50], [140,50], [210,50],
				[280,50], [350,50], [420,50],
				[490,50], [560,50], [630,50],
				[700,50], [770,50], [840,50],
				[910,50], [980,50], [1050,50],
				[1120,50], [1190,50], [1260,50]
			   ];  
	
    //设置连接线终点以及起点的位置（排序数值是坐标点在data里的序号）  
	var xydata =[[0,2],[1,2],
				 [2,3],
				 [2,4],[2,5],[2,6],
				 [2,7],[2,8],[2,9],
				 [2,10],[2,11],[2,12],
				 [2,13],[2,14],[2,15],
				 [2,16],[2,17],[2,18],
				 [2,19],[2,20]]
	
    //当0时候表示输入起点坐标，其他值输入终点坐标  
    var position = 0;  
    //起点  
    var positionSource;  
    //钟点  
    var positionTarget;  
    //设置判断点击线还是点击点  
    var ok = 1;  
    //删除数组的索引位置  
    var del;  
    var linkss = xydata.map(function (item, i) {  
        return {  
            source: xydata[i][0],  
            target: xydata[i][1]  
  
        };  
    });  
	
    myChart.setOption({   
        //定义将坐标系转化为像素
        tooltip: {  
            triggerOn: 'none',  
  
            formatter: function (params) {  
                return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);  
            }  
        },  
	
        //定义X轴  最大刻度最小刻度是否从零开始  
        xAxis: {  
			show:false,
            min: 0,  
            max: 1330,  
            type: 'value',  
            axisLine: {onZero: false}  
        },  
        //同上  
        yAxis: {  
			show:false,
            min: 0,  
            max: 450,  
            type: 'value',  
            axisLine: {onZero: false}  
        },  
		
        series: [  
               {  
                id: 'a',    
                type: 'graph',  
                layout: 'none',  
                coordinateSystem: 'cartesian2d',  
                //设置球的大小  
                symbolSize: symbolSize,  
				
                label: {  
                    normal: {  
                        show: true  
                    }  
                },
                //指定数据数组  
                data: data,  
                //指定连线方式   
                edges: linkss,  
                //指定连线颜色  
                lineStyle: {  
                    normal: {  
                        color: '#2f4554'  
                    }  
                }  
            }  
        ]  
    }); 
	
    myChart.setOption({  
        graphic: echarts.util.map(data, function (item, dataIndex) {  
            return {  
                type: 'circle', 
				edgeSymbol:'image://mcu.png',
                //将坐标转化为像素  
                position: myChart.convertToPixel('grid', item),  
                shape: {  
                    r: symbolSize  
                    // 拖动点的大小  
                },  
                //指定虚拟圈是否可见  
                invisible: false,  
                //指定圈被拖拽 
                draggable: true,  
                //指定拖拽的反应
                ondrag: echarts.util.curry(onPointDragging, dataIndex),  
                //指定鼠标移入移出的反应  
                onmousemove: echarts.util.curry(showTooltip, dataIndex),  
                onmouseout: echarts.util.curry(hideTooltip, dataIndex),  
                //Z值 及坐标z  
                z: 2 ,
            };  
        })  
    });  
    //将像素转化为坐标  如果删除   后台会打印   像素  
    window.addEventListener('resize', function () {  
        myChart.setOption({  
            graphic: echarts.util.map(data, function (item, dataIndex) {  
                return {  
                    position: myChart.convertToPixel('grid', item)  
                };  
            })  
        });  
    });  
    
    function showTooltip(dataIndex) {  
        myChart.dispatchAction({  
            type: 'showTip',  
            seriesIndex: 0,  
            dataIndex: dataIndex  
  
        });  
    }  
  
    function hideTooltip(dataIndex) {  
        myChart.dispatchAction({  
            type: 'hideTip'  
        });  
    }  
  
    function onPointDragging(dataIndex, dx, dy) {  
        data[dataIndex] = myChart.convertFromPixel('grid', this.position);  
        myChart.setOption({  
            series: [{  
                id: 'a',  
                data: data,  
            }]  
        });  
        console.log('array', data);            
    }  
    //点击事件  
    
    console.log('xydata', xydata);  
    if (option && typeof option === "object") {  
        myChart.setOption(option, true);  
    }    
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
