如何通过 Echart 创建垂直连接的树状图?

huangapple go评论113阅读模式
英文:

How to create vertically connected tree map via Echart

问题

以下是使用Echart绘制树图的示例代码。我期望的效果是将每个系列按垂直顺序连接起来,并根据数据进行大小调整。

在这个示例中,每个系列将按其大小随机排列。

https://echarts.apache.org/examples/en/editor.html?c=treemap-disk

  1. myChart.showLoading();
  2. $.get(ROOT_PATH + '/data/asset/data/disk.tree.json', function (diskData) {
  3. myChart.hideLoading();
  4. const formatUtil = echarts.format;
  5. function getLevelOption() {
  6. return [
  7. {
  8. itemStyle: {
  9. borderWidth: 0,
  10. gapWidth: 5
  11. }
  12. },
  13. {
  14. itemStyle: {
  15. gapWidth: 1
  16. }
  17. },
  18. {
  19. colorSaturation: [0.35, 0.5],
  20. itemStyle: {
  21. gapWidth: 1,
  22. borderColorSaturation: 0.6
  23. }
  24. }
  25. ];
  26. }
  27. myChart.setOption(
  28. (option = {
  29. title: {
  30. text: 'Disk Usage',
  31. left: 'center'
  32. },
  33. tooltip: {
  34. formatter: function (info) {
  35. var value = info.value;
  36. var treePathInfo = info.treePathInfo;
  37. var treePath = [];
  38. for (var i = 1; i < treePathInfo.length; i++) {
  39. treePath.push(treePathInfo[i].name);
  40. }
  41. return [
  42. '<div class="tooltip-title">' +
  43. formatUtil.encodeHTML(treePath.join('/')) +
  44. '</div>',
  45. 'Disk Usage: ' + formatUtil.addCommas(value) + ' KB'
  46. ].join('');
  47. }
  48. },
  49. series: [
  50. {
  51. name: 'Disk Usage',
  52. type: 'treemap',
  53. visibleMin: 300,
  54. label: {
  55. show: true,
  56. formatter: '{b}'
  57. },
  58. itemStyle: {
  59. borderColor: '#fff'
  60. },
  61. levels: getLevelOption(),
  62. data: diskData
  63. }
  64. ]
  65. })
  66. );
  67. });

这是我期望的效果。
enter image description here

英文:

This code below is the example of treemap using Echart, what i expect is to order each series vertically and then connected to each series, then sizing by the data.

In this example, each series will randomly arrange by its size

https://echarts.apache.org/examples/en/editor.html?c=treemap-disk

  1. myChart.showLoading();
  2. $.get(ROOT_PATH + &#39;/data/asset/data/disk.tree.json&#39;, function (diskData) {
  3. myChart.hideLoading();
  4. const formatUtil = echarts.format;
  5. function getLevelOption() {
  6. return [
  7. {
  8. itemStyle: {
  9. borderWidth: 0,
  10. gapWidth: 5
  11. }
  12. },
  13. {
  14. itemStyle: {
  15. gapWidth: 1
  16. }
  17. },
  18. {
  19. colorSaturation: [0.35, 0.5],
  20. itemStyle: {
  21. gapWidth: 1,
  22. borderColorSaturation: 0.6
  23. }
  24. }
  25. ];
  26. }
  27. myChart.setOption(
  28. (option = {
  29. title: {
  30. text: &#39;Disk Usage&#39;,
  31. left: &#39;center&#39;
  32. },
  33. tooltip: {
  34. formatter: function (info) {
  35. var value = info.value;
  36. var treePathInfo = info.treePathInfo;
  37. var treePath = [];
  38. for (var i = 1; i &lt; treePathInfo.length; i++) {
  39. treePath.push(treePathInfo[i].name);
  40. }
  41. return [
  42. &#39;&lt;div class=&quot;tooltip-title&quot;&gt;&#39; +
  43. formatUtil.encodeHTML(treePath.join(&#39;/&#39;)) +
  44. &#39;&lt;/div&gt;&#39;,
  45. &#39;Disk Usage: &#39; + formatUtil.addCommas(value) + &#39; KB&#39;
  46. ].join(&#39;&#39;);
  47. }
  48. },
  49. series: [
  50. {
  51. name: &#39;Disk Usage&#39;,
  52. type: &#39;treemap&#39;,
  53. visibleMin: 300,
  54. label: {
  55. show: true,
  56. formatter: &#39;{b}&#39;
  57. },
  58. itemStyle: {
  59. borderColor: &#39;#fff&#39;
  60. },
  61. levels: getLevelOption(),
  62. data: diskData
  63. }
  64. ]
  65. })
  66. );
  67. });

This is what I expected.
enter image description here

答案1

得分: 0

据我所知,目前似乎不可能实现。您可以通过squareRatio属性来影响区域的形状,但我无法使其垂直对齐。

如果您不需要平移和缩放,您可以为每个类别放置一个矩形树图,并相应地调整position(例如left: '20%')和size(例如width: '25%')。

这里有一个示例:

  1. option = {
  2. series: [
  3. {
  4. type: 'treemap',
  5. name: 'CATEGORY A',
  6. width: '23%',
  7. left: '4%',
  8. nodeClick: false,
  9. roam: false,
  10. levels: [{color: ['lightblue'], itemStyle: {gapWidth: 4}}],
  11. data: [
  12. {name: 'A1', value: 40},
  13. {name: 'A2', value: 6},
  14. {name: 'A3', value: 24},
  15. {name: 'A4', value: 15},
  16. {name: 'A5', value: 12},
  17. {name: 'A6', value: 4},
  18. {name: 'A7', value: 18}
  19. ]
  20. },
  21. {
  22. type: 'treemap',
  23. name: 'CATEGORY B',
  24. width: '23%',
  25. left: '30%',
  26. nodeClick: false,
  27. roam: false,
  28. levels: [{color: ['lightgreen'], itemStyle: {gapWidth: 4}}],
  29. data: [
  30. {name: 'B1', value: 13},
  31. {name: 'B2', value: 17},
  32. {name: 'B3', value: 8},
  33. {name: 'B4', value: 24},
  34. {name: 'B5', value: 15},
  35. {name: 'B6', value: 10},
  36. {name: 'B7', value: 24}
  37. ]
  38. },
  39. {
  40. type: 'treemap',
  41. name: 'CATEGORY C',
  42. width: '23%',
  43. left: '56%',
  44. nodeClick: false,
  45. roam: false,
  46. levels: [{color: ['green'], itemStyle: {gapWidth: 4}}],
  47. data: [
  48. {name: 'C1', value: 4},
  49. {name: 'C2', value: 20},
  50. {name: 'C3', value: 6},
  51. {name: 'C4', value: 18},
  52. {name: 'C5', value: 22},
  53. {name: 'C6', value: 35},
  54. ]
  55. },
  56. {
  57. type: 'treemap',
  58. name: 'CATEGORY D',
  59. width: '16%',
  60. left: '82%',
  61. nodeClick: false,
  62. roam: false,
  63. levels: [{color: ['orange'], itemStyle: {gapWidth: 4}}],
  64. data: [
  65. {name: 'D1', value: 7},
  66. {name: 'D2', value: 19},
  67. {name: 'D3', value: 12},
  68. {name: 'D4', value: 11},
  69. {name: 'D5', value: 4},
  70. {name: 'D6', value: 9},
  71. ]
  72. }
  73. ]
  74. };
英文:

As far as I can tell it is currently not possible. You can impact the shape of the regions via the squareRatio property but I couldnt get it aligned vertically.

If you dont need to pan and zoom you could put one treemap for each categorie and adjust the position (eg. left: &#39;20%&#39;) and size (eg. width: &#39;25%&#39;) accordingly.

Here is an example:

  1. option = {
  2. series: [
  3. {
  4. type: &#39;treemap&#39;,
  5. name: &#39;CATEGORY A&#39;,
  6. width: &#39;23%&#39;,
  7. left: &#39;4%&#39;,
  8. nodeClick: false,
  9. roam: false,
  10. levels: [{color: [&#39;lightblue&#39;], itemStyle: {gapWidth: 4}}],
  11. data: [
  12. {name: &#39;A1&#39;, value: 40},
  13. {name: &#39;A2&#39;, value: 6},
  14. {name: &#39;A3&#39;, value: 24},
  15. {name: &#39;A4&#39;, value: 15},
  16. {name: &#39;A5&#39;, value: 12},
  17. {name: &#39;A6&#39;, value: 4},
  18. {name: &#39;A7&#39;, value: 18}
  19. ]
  20. },
  21. {
  22. type: &#39;treemap&#39;,
  23. name: &#39;CATEGORY B&#39;,
  24. width: &#39;23%&#39;,
  25. left: &#39;30%&#39;,
  26. nodeClick: false,
  27. roam: false,
  28. levels: [{color: [&#39;lightgreen&#39;], itemStyle: {gapWidth: 4}}],
  29. data: [
  30. {name: &#39;B1&#39;, value: 13},
  31. {name: &#39;B2&#39;, value: 17},
  32. {name: &#39;B3&#39;, value: 8},
  33. {name: &#39;B4&#39;, value: 24},
  34. {name: &#39;B5&#39;, value: 15},
  35. {name: &#39;B6&#39;, value: 10},
  36. {name: &#39;B7&#39;, value: 24}
  37. ]
  38. },
  39. {
  40. type: &#39;treemap&#39;,
  41. name: &#39;CATEGORY C&#39;,
  42. width: &#39;23%&#39;,
  43. left: &#39;56%&#39;,
  44. nodeClick: false,
  45. roam: false,
  46. levels: [{color: [&#39;green&#39;], itemStyle: {gapWidth: 4}}],
  47. data: [
  48. {name: &#39;C1&#39;, value: 4},
  49. {name: &#39;C2&#39;, value: 20},
  50. {name: &#39;C3&#39;, value: 6},
  51. {name: &#39;C4&#39;, value: 18},
  52. {name: &#39;C5&#39;, value: 22},
  53. {name: &#39;C6&#39;, value: 35},
  54. ]
  55. },
  56. {
  57. type: &#39;treemap&#39;,
  58. name: &#39;CATEGORY D&#39;,
  59. width: &#39;16%&#39;,
  60. left: &#39;82%&#39;,
  61. nodeClick: false,
  62. roam: false,
  63. levels: [{color: [&#39;orange&#39;], itemStyle: {gapWidth: 4}}],
  64. data: [
  65. {name: &#39;D1&#39;, value: 7},
  66. {name: &#39;D2&#39;, value: 19},
  67. {name: &#39;D3&#39;, value: 12},
  68. {name: &#39;D4&#39;, value: 11},
  69. {name: &#39;D5&#39;, value: 4},
  70. {name: &#39;D6&#39;, value: 9},
  71. ]
  72. }
  73. ]
  74. };

huangapple
  • 本文由 发表于 2023年8月9日 17:37:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76866431.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定