echarts 3.0 使用自定义图标

前端之家收集整理的这篇文章主要介绍了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"
    }
  ]
}
原文链接:https://www.f2er.com/angularjs/148888.html

猜你在找的Angularjs相关文章