原来的模样:
使用自定义的图标之后:
感觉立即高大上了,这里的图标使用的是http://www.easyicon.net/,像素128px,图标的大小可以在echarts的option中设置:
var option = { title: { text: 'Graph 简单示例' },tooltip: {},animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',series : [ { type: 'graph',layout: 'none',symbolSize: 50,//设置图标显示大小 roam: true,label: { normal: { show: true,position: 'bottom' } },edgeSymbol: ['circle','arrow'],edgeSymbolSize: [4,10],edgeLabel: { normal: { textStyle: { fontSize: 20 } } },data: this.graphData.nodes,links: this.graphData.links,lineStyle: { normal: { opacity: 0.9,width: 2,curveness: 0 } } } ] };
nodes和links数据:
{ "nodes": [ { "name": "source1","x": 20,"y": 300,"symbol": "image://src/Meta-data/semantic-analysis/img/png/database_folder.png" },{ "name": "source2","y": 200,{ "name": "source3","y": 400,{ "name": "table1","x": 150,"symbol": "image://src/Meta-data/semantic-analysis/img/png/table_windows.png" },{ "name": "table2",{ "name": "table3",{ "name": "transform1","x": 350,"symbol": "image://src/Meta-data/semantic-analysis/img/png/batch_process.png" },{ "name": "table4","x": 550,"symbol": "image://src/Meta-data/semantic-analysis/img/png/table_windows.png" } ],"links": [ { "source": "source1","target": "table1" },{ "source": "source2","target": "table2" },{ "source": "source3","target": "table3" },{ "source": "table1","target": "transform1" },{ "source": "table2",{ "source": "table3",{ "source": "transform1","target": "table4" } ] }原文链接:https://www.f2er.com/angularjs/148888.html