ECharts实现关系图+饼图的组合图-一一网

想法

饼图除了跟日历坐标系搭配使用外，是否还能够跟其他图（折线图、关系图等等）一起搭配组合呢？如果能够组合在一起，那又该怎么实现呢？

关于ECharts实现饼图与折线图的组合图已经完成，写在之前发的一篇文章中。以下是饼图与关系图的组合图，这种组合图能够比单个图表达更多的信息。例如，饼图能够用来分析某一变量在一段时间内的分布状况，而关系图能够用来分析各个变量之间的某种关系，如因果关系。因此使用这种组合图来分析各种任务具有不错的效果。

实现

不同场景下有不同的分析任务需求，本文只是给了一种最基本最简单的实现代码。如果有更复杂但与此相似的需求，只需要在下面代码的基础上修改对应的数据。下面就直接贴出关系图与饼图的组合图的ECharts实现代码和效果图。如果大家有什么问题和想法，欢迎评论交流学习。

代码

// 初始节点数据
data = [
  {
    name: 'Node 1',
    x: 500,  // 自定义关系图节点出现的坐标，以达到关系图的自定义布局
    y: 100
  },
  {
    name: 'Node 2',
    x: 200,
    y: 300
  },
  {
    name: 'Node 3',
    x: 400,
    y: 350
  },
  {
    name: 'Node 4',
    x: 500,
    y: 500
  }
]
// 初始边数据
links = [
  {
    source: 0,  // 可以为索引，也可以为节点的name
    target: 1,
    symbolSize: [5, 20],
    lineStyle: {  // 自定义关系图该边的宽度和曲度
      width: 5,
      curveness: 0.2
    }
  },
  {
    source: 'Node 1',
    target: 'Node 3'
  },
  {
    source: 'Node 2',
    target: 'Node 3'
  },
  {
    source: 'Node 2',
    target: 'Node 4'
  },
  {
    source: 'Node 1',
    target: 'Node 4'
  },
  {
    source: 'Node 3',
    target: 'Node 4'
  },
]

// 关系图数据 
seriesData = [
  {
    type: 'graph',
    layout: 'none',  // 自定义布局
    symbolSize: 60,
    roam: false,
    zlevel: 1,
    label: {
      show: true,
      position: 'left',
    },
    edgeSymbol: ['circle', 'arrow'],  // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。这里设置为箭头
    edgeSymbolSize: [4, 10],
    edgeLabel: {
      fontSize: 20
    },
    data: data,  // 节点数据
    links: links,  // 边数据
    lineStyle: {  // 统一设置边的样式
      opacity: 0.9,  
      width: 2,  // 边的宽度
      curveness: 0.1  // 曲度
    }
  }
]


option = {
  title: {
    text: 'Graph + Pie'
  },
  tooltip: {},
  series: seriesData
};

// 根据关系图的各节点信息得到饼图数据
function getPieSeries(graphData, chart) {
  return graphData.map(function (item, index) {
    // convertToPixel()方法的两个参数：第一个参数用来指定坐标系，第二个参数用来指定某个点
    var center = chart.convertToPixel({seriesIndex: 0}, [item.x, item.y]);
    return {
      // 以下内容均可以根据自己的需求进行改变
      name: item.name,
      id: index + 'pie',
      zlevel: 2,
      type: 'pie',
      center: center,
      label: {
        formatter: '{c}',
        position: 'inside'
      },
      radius: 30,
      data: [
        { name: '工作', value: Math.round(Math.random() * 24) },
        { name: '娱乐', value: Math.round(Math.random() * 24) },
        { name: '睡觉', value: Math.round(Math.random() * 24) }
      ]
    };
  });
}

setTimeout(function () {
  myChart.setOption({
    series: getPieSeries(data, myChart)
  });
}, 0);
复制代码