ECharts implements the combination of diagram + pie chart

idea

In addition to using the calendar coordinate system, can pie charts be combined with other charts (line charts, diagrams, etc.)? If you can combine them, how do you do it?

The pie chart and line chart combination of ECharts implementation has been completed in a previous post. The following is a combination of pie charts and relationship charts that can express more information than a single chart. For example, pie charts can be used to analyze the distribution of a variable over a period of time, while diagrams can be used to analyze certain relationships among variables, such as causality. Therefore, it is good to use this combination diagram to analyze various tasks.

implementation

Different scenarios have different analysis task requirements, this article just gives a kind of the most basic and simple implementation code. If you have a more complex but similar requirement, you just need to modify the corresponding data based on the code below. The ECharts implementation code and renderings of the relationship diagram and pie diagram are directly posted below. If you have any questions or ideas, please feel free to comment.

code

// Initial node data
data = [
  {
    name: 'Node 1'.x: 500.// Customize the coordinates where the diagram nodes appear to achieve a custom layout of the diagram
    y: 100
  },
  {
    name: 'Node 2'.x: 200.y: 300
  },
  {
    name: 'Node 3'.x: 400.y: 350
  },
  {
    name: 'Node 4'.x: 500.y: 500}]// Initial edge data
links = [
  {
    source: 0.// Can be an index or a node name
    target: 1.symbolSize: [5.20].lineStyle: {  // Customize the width and curvature of the graph edge
      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'},]// Graph data
seriesData = [
  {
    type: 'graph'.layout: 'none'.// Custom layout
    symbolSize: 60.roam: false.zlevel: 1.label: {
      show: true.position: 'left',},edgeSymbol: ['circle'.'arrow'].// The type of tag on both sides of an edge. It can be an array specifying both sides, or a single unified specifying. This is the arrow
    edgeSymbolSize: [4.10].edgeLabel: {
      fontSize: 20
    },
    data: data,  // Node data
    links: links,  / / data
    lineStyle: {  // Set the edge style uniformly
      opacity: 0.9.width: 2.// The width of the edge
      curveness: 0.1  / / curvature
    }
  }
]


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

// Get the pie chart data according to the information of each node in the graph
function getPieSeries(graphData, chart) {
  return graphData.map(function (item, index) {
    // convertToPixel() takes two parameters: the first parameter specifies the coordinate system, and the second parameter specifies a point
    var center = chart.convertToPixel({seriesIndex: 0}, [item.x, item.y]);
    return {
      // The following can be changed to suit your needs
      name: item.name,
      id: index + 'pie'.zlevel: 2.type: 'pie'.center: center,
      label: {
        formatter: '{c}'.position: 'inside'
      },
      radius: 30.data: [{name: 'work'.value: Math.round(Math.random() * 24)}, {name: 'entertainment'.value: Math.round(Math.random() * 24)}, {name: 'sleep'.value: Math.round(Math.random() * 24)}}]; }); }setTimeout(function () {
  myChart.setOption({
    series: getPieSeries(data, myChart)
  });
}, 0);
Copy the code

rendering

If it helps you, click 👍!!