const data = { name: 'contentGraph' , children: [{'name': "energy", 'up': "enterprise", 'length': "36", 'current': "0", 'is_last': ""},{'name': "KEY CHAIN 26 ", 'up': "index", 'length': "36", 'current': "1", 'is_last': ""},{'name': "Search", 'up': "nsearch", 'length': "36", 'current': "2", 'is_last': ""},{'name': "Search", 'up': "old-products", 'length': "36", 'current': "3", 'is_last': ""},{'name': "object1", 'up': "old-products", 'length': "36", 'current': "4", 'is_last': ""},{'name': "test123", 'up': "old-products", 'length': "36", 'current': "5", 'is_last': ""},{'name': "css-floatingcart", 'up': "css-folder", 'length': "36", 'current': "6", 'is_last': ""},{'name': "css-contents", 'up': "css-folder", 'length': "36", 'current': "7", 'is_last': ""},{'name': "item", 'up': "css-folder", 'length': "36", 'current': "8", 'is_last': ""},{'name': "privacypolicy", 'up': "privacypolicy", 'length': "36", 'current': "9", 'is_last': ""},{'name': "lifetouch", 'up': "index", 'length': "36", 'current': "10", 'is_last': ""},{'name': "lifetouch-index", 'up': "lifetouch-index", 'length': "36", 'current': "11", 'is_last': ""},{'name': "catchmax-index", 'up': "catchmax-index", 'length': "36", 'current': "12", 'is_last': ""},{'name': "ads", 'up': "old-products", 'length': "36", 'current': "13", 'is_last': ""},{'name': "html123type", 'up': "html123type", 'length': "36", 'current': "14", 'is_last': ""},{'name': "add-my-child", 'up': "add-my-child", 'length': "36", 'current': "15", 'is_last': ""},{'name': "index", 'up': "index", 'length': "36", 'current': "16", 'is_last': ""},{'name': "info", 'up': "info", 'length': "36", 'current': "17", 'is_last': ""},{'name': "tos", 'up': "tos", 'length': "36", 'current': "18", 'is_last': ""},{'name': "login", 'up': "login", 'length': "36", 'current': "19", 'is_last': ""},{'name': "california-privacy-rights", 'up': "california-privacy-rights", 'length': "36", 'current': "20", 'is_last': ""},{'name': "ind", 'up': "ind", 'length': "36", 'current': "21", 'is_last': ""},{'name': "category", 'up': "category", 'length': "36", 'current': "22", 'is_last': ""},{'name': "catchmax-css", 'up': "catchmax-css", 'length': "36", 'current': "23", 'is_last': ""},{'name': "echarts-full-min", 'up': "echarts-full-min", 'length': "36", 'current': "24", 'is_last': ""},{'name': "timeline", 'up': "timeline", 'length': "36", 'current': "25", 'is_last': ""},{'name': "old-products", 'up': "old-products", 'length': "36", 'current': "26", 'is_last': ""},{'name': "css-folder", 'up': "css-folder", 'length': "36", 'current': "27", 'is_last': ""},{'name': "accessibility", 'up': "accessibility", 'length': "36", 'current': "28", 'is_last': ""},{'name': "html", 'up': "old-products", 'length': "36", 'current': "29", 'is_last': ""},{'name': "css", 'up': "css-folder", 'length': "36", 'current': "30", 'is_last': ""},{'name': "obnj", 'up': "old-products", 'length': "36", 'current': "31", 'is_last': ""},{'name': "css-element", 'up': "css-folder", 'length': "36", 'current': "32", 'is_last': ""},{'name': "css-edits", 'up': "css-folder", 'length': "36", 'current': "33", 'is_last': ""},{'name': "fancybox", 'up': "css-folder", 'length': "36", 'current': "34", 'is_last': ""},{'name': "css-base", 'up': "css-folder", 'length': "36", 'current': "35", 'is_last': "t"}]};console.log(data);var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};
var option;

function loadChart(json) {
    console.log(json);
    myChart.hideLoading();
    myChart.setOption(
      (option = {
        title: {
          text: 'NPM Dependencies'
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            // progressiveThreshold: 700,
            data: json.nodes.map(function (node) {
              return {
                x: node.x,
                y: node.y,
                id: node.id,
                name: node.label,
                symbolSize: node.size,
                itemStyle: {
                  color: node.color
                }
              };
            }),
            edges: json.edges.map(function (edge) {
              return {
                source: edge.sourceID,
                target: edge.targetID
              };
            }),
            emphasis: {
              focus: 'adjacency',
              label: {
                position: 'right',
                show: true
              }
            },
            roam: true,
            lineStyle: {
              width: 0.5,
              curveness: 0.3,
              opacity: 0.7
            }
          }
        ]
      }),
      true
    );
  }
);

loadChart(data);

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