echarts 3.0 使用自定义图标

原来的模样：

使用自定义的图标之后：

感觉立即高大上了，这里的图标使用的是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"
    }
  ]
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!