Apache ECharts Basic Example

echarts-basic-example-template

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Apache ECharts Basic Example</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="chart-container">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js">
    </script>
  </body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

JavaScript

const chart = echarts.init(document.getElementById("chart-container"));

option = {
  series: [{
    type: "tree",
    data: [{
      name: "root",
      children: [{
        name: "Child A",
        children: [{
          name: "Leaf C"
        }, {
          name: "Leaf D"
        }, {
          name: "Leaf E"
        }, {
          name: "Leaf F"
        }]
      }, {
        name: "Child B",
        children: [{
          name: "Leaf G"
        }, {
          name: "Leaf H"
        }]
      }, {
        name: "Child D"
      }, {
        name: "Child F",
        children: [{
          name: "Leaf J"
        }, {
          name: "Leaf K"
        }]
      }]
    }],
      label: {
            position: "inside",
            show: true,
            borderWidth: 0,
            overflow: "truncate",
            offset: [0, 13],
            formatter: 'b \n d'
            
          },
    symbolSize: [60, 20],
    symbol: "rect", 
    selectedMode: "single",
         select: {
            itemStyle: {
              color: "rgba(236, 114, 17, 1)"
              // backgroundColor: "rgba(236, 114, 17, 1)";
            },
            lineStyle:
            {
              color: "rgba(236, 114, 17, 1)"
            }
            
          },
    itemStyle: {
            color: "rgba(255, 153, 0, 0.1)",
          },
      lineStyle:
            {
              width: 5
            }
  }]
}

chart.setOption(option);

window.addEventListner('resize', chart.resize);