Organization tree chart

[verilog15]

I was wondering if its possible to create an organization chart with this project?
Something similar to the following chart:

If the answer is yes, where can I see an example or a demo?
Thank you

[cuijian-dexter]

I think you can achieve it by customizing label and rich.
http://echarts.baidu.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE

[gurelsoycaner]

Hi,

can you possibly do a little demo on this subject?

thanks in advance

[deqingli]

Tree diagram straight-line layout.

[gurelsoycaner]

hi,
still can get it, how the above Organization tree chart can ve achieved
please an example is needed.

thanks in advance

[vigneshbarani24]

+1

[sidyes]

+1

[thihy]

+1

[gurelsoycaner]

hi,
can you please share how the above Organization tree chart was done!.

thanks in advance

[ardaorkin]

Asuming you have a JSON fie like this:

{
  name: "Stefan Zweig",
  value: "CEO",
  children: [
    {
      name: "Leo Tolstoy",
      value: "CFO",
      children: [
        {
          name: "Fyodor Dostoyevski",
          value: "Manager",
        },
        {
          name: "Edward III",
          value: "Manager",
        },
        {
          name: "Anna Karanina",
          value: "Manager",
        },
      ],
    },
    {
      name: "Barrack Obama",
      value: "CMO",
      children: [
        {
          name: "Henry Kissinger",
          value: "Social Media",
        },
        {
          name: "Abraham Lincoln",
          value: "Research",
        },
      ],
    },
  ],
};

You can set as value this JSON to series[0].label in the chart configuration options:

{
  width: 200,
  height: 100,
  backgroundColor: "white",
  borderWidth: 80,
  borderRadius: 3,
  shadowColor: "#595953",
  shadowBlur: 10,
  shadowOffsetX: 5,
  shadowOffsetY: 5,
  formatter: [
    ["{headLine|}"],
    ["{avatar|}", "{username|{b}}"].join(""),
    ["{userTitle|{c}}"],
  ].join("\n"),
  rich: {
    headLine: {
      width: 200,
      height: 5,
      backgroundColor: "#" + Math.floor(Math.random() * 16777215).toString(16),
      position: "absolute",
      align: "top",
    },
    avatar: {
      fontSize: 20,
      padding: [20, 0, 0, 20],
      width: 25,
      height: 25,
      borderRadius: 100,
      borderWidth: 2,
      backgroundColor: {
        image:
          "https://www.flaticon.com/svg/vstatic/svg/747/747376.svg?token=exp=1611934475~hmac=58da34008484e2f05092d1c336503f0a",
      },
    },
    username: {
      align: "left",
      padding: [0, 0, 0, 15],
      verticalAlign: "top",
      fontSize: 18,
      width: 50,
      height: 50,
    },
    userTitle: {
      align: "left",
      padding: [-30, 0, 0, 75],
      verticalAlign: "top",
      color: "#808080",
      fonntWeight: 10,
      fontSize: 15,
      width: 50,
      height: 50,
    },
  },
};

Example:

options = {
  tooltip: {
    trigger: "item",
    triggerOn: "mousemove",
  },
  series: [
    {
      type: "tree",

      data: [data],

      label: {
        width: 200,
        height: 100,
        backgroundColor: "white",
        borderWidth: 80,
        borderRadius: 3,
        shadowColor: "#595953",
        shadowBlur: 10,
        shadowOffsetX: 5,
        shadowOffsetY: 5,
        formatter: [
          ["{headLine|}"],
          ["{avatar|}", "{username|{b}}"].join(""),
          ["{userTitle|{c}}"],
        ].join("\n"),
        rich: {
          headLine: {
            width: 200,
            height: 5,
            backgroundColor:
              "#" + Math.floor(Math.random() * 16777215).toString(16),
            position: "absolute",
            align: "top",
          },
          avatar: {
            fontSize: 20,
            padding: [20, 0, 0, 20],
            width: 25,
            height: 25,
            borderRadius: 100,
            borderWidth: 2,
            backgroundColor: {
              image:
                "https://www.flaticon.com/svg/vstatic/svg/747/747376.svg?token=exp=1611934475~hmac=58da34008484e2f05092d1c336503f0a",
            },
          },
          username: {
            align: "left",
            padding: [0, 0, 0, 15],
            verticalAlign: "top",
            fontSize: 18,
            width: 50,
            height: 50,
          },
          userTitle: {
            align: "left",
            padding: [-30, 0, 0, 75],
            verticalAlign: "top",
            color: "#808080",
            fonntWeight: 10,
            fontSize: 15,
            width: 50,
            height: 50,
          },
        },
      },
    },
  ],
};

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!