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",
      "x": 20,
      "y": 200,
      "symbol": "image://src/meta-data/semantic-analysis/img/png/database_folder.png"
    },
    {
      "name": "source3",
      "x": 20,
      "y": 400,
      "symbol": "image://src/meta-data/semantic-analysis/img/png/database_folder.png"
    },
    {
      "name": "table1",
      "x": 150,
      "y": 300,
      "symbol": "image://src/meta-data/semantic-analysis/img/png/table_windows.png"
    }, {
      "name": "table2",
      "x": 150,
      "y": 200,
      "symbol": "image://src/meta-data/semantic-analysis/img/png/table_windows.png"
    }, {
      "name": "table3",
      "x": 150,
      "y": 400,
      "symbol": "image://src/meta-data/semantic-analysis/img/png/table_windows.png"
    }, {
      "name": "transform1",
      "x": 350,
      "y": 300,
      "symbol": "image://src/meta-data/semantic-analysis/img/png/batch_process.png"
    }, {
      "name": "table4",
      "x": 550,
      "y": 300,
      "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",
      "target": "transform1"
    }, {
      "source": "table3",
      "target": "transform1"
    }, {
      "source": "transform1",
      "target": "table4"
    }
  ]
}