<!--
	THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=tree-vertical
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <textarea id="rule" rows="5" cols="3" style="width: 1500px; font-size: 10px;" readonly></textarea>
    <div id="container" style="height: 100%"></div>

    <script
      type="text/javascript"
      src="https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://fastly.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"
    ></script>

    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var app = {};
      var ROOT_PATH = "https://echarts.apache.org/examples";
      var option;

      myChart.showLoading();
      const data = {{data}};

      initDraw(data);

      function initDraw(data) {
        myChart.hideLoading();
        var rule = document.getElementById("rule")
        rule.value = data.value;
        myChart.setOption(
          (option = {
            tooltip: {
              trigger: "item",
              triggerOn: "mousemove",
              formatter: function (params) {
                var text = params.data.value;
                return text;
              },
            },
            series: [
              {
                type: "tree",
                data: [data],
                left: "2%",
                right: "2%",
                top: "8%",
                bottom: "20%",
                symbol: "emptyCircle",
                orient: "vertical",
                expandAndCollapse: true,
                label: {
                  position: "top",
                  rotate: 0,
                  verticalAlign: "middle",
                  align: "right",
                  fontSize: 14,
                  formatter: function (params) {
                      var text = params.data.name;
                      if(text==="TernaryOperator") return "三元表达式";
                      if(text==="Anonymous") return "二元表达式";
                      if(text.includes("$")) return "CDASH变量";
                      return text;
                  },
                },
                leaves: {
                  label: {
                    position: "bottom",
                    rotate: 0,
                    verticalAlign: "middle",
                    align: "left",
                    formatter: function (params) {
                      var text = params.data.name;
                      if(text==="TernaryOperator") return "三元表达式";
                      if(text==="Anonymous") return "二元表达式";
                      if(text.includes("$")) return "CDASH变量";
                      return text;
                  },
                  },
                },
                animationDurationUpdate: 750,
              },
            ],
          })
        );
      }

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    </script>
  </body>
</html>
