echarts tree 缩放

小鲤鱼听听
已于 2023-03-08 00:18:07 修改
阅读量705
点赞数 1
分类专栏： JavaScript 文章标签： echarts javascript
于 2023-03-08 00:17:13 首次发布
本文链接：https://blog.csdn.net/qq_36485978/article/details/129394687
版权
JavaScript 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echarts-5.2.2.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      /* background: pink; */
    }

    #main {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="main"></div>

  <script>

    // import * as echarts from 'echarts';
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    myChart.showLoading();
    let originalData = [{
      name: 'flare',
      children: [
        {
          name: 'data',
          children: [
            {
              name: 'converters',
              children: [
                { name: 'Converters', value: 721 },
                { name: 'DelimitedTextConverter', value: 4294 }
              ]
            },
            {
              name: 'DataUtil',
              value: 3322
            }
          ]
        },
        {
          name: 'query',
          children: [
            { name: 'AggregateExpression', value: 1616 },
            { name: 'And', value: 1027 },
            { name: 'Arithmetic', value: 3891 },
            { name: 'Average', value: 891 },
            { name: 'BinaryExpression', value: 2893 },
            { name: 'Comparison', value: 5103 },
            { name: 'CompositeExpression', value: 3677 },
            { name: 'Count', value: 781 },
            { name: 'DateUtil', value: 4141 },
            { name: 'Distinct', value: 933 },
            { name: 'Expression', value: 5130 },
            { name: 'ExpressionIterator', value: 3617 },
            { name: 'Fn', value: 3240 },
            { name: 'If', value: 2732 },
            { name: 'IsA', value: 2039 },
            { name: 'Literal', value: 1214 },
            { name: 'Match', value: 3748 },
            { name: 'Maximum', value: 843 },
            { name: 'add', value: 593 },
            { name: 'and', value: 330 },
            { name: 'average', value: 287 },
            { name: 'count', value: 277 },
            { name: 'distinct', value: 292 },
            { name: 'div', value: 595 },
            { name: 'eq', value: 594 },
            { name: 'fn', value: 460 },
            { name: 'gt', value: 603 },
            { name: 'gte', value: 625 },
            { name: 'iff', value: 748 },
            { name: 'isa', value: 461 },
            { name: 'lt', value: 597 },
            { name: 'lte', value: 619 },
            { name: 'max', value: 283 },
            { name: 'min', value: 283 },
            { name: 'mod', value: 591 },
            { name: 'mul', value: 603 },
            { name: 'neq', value: 599 },
            { name: 'not', value: 386 },
            { name: 'or', value: 323 },
            { name: 'orderby', value: 307 },
            { name: 'range', value: 772 },
            { name: 'select', value: 296 },
            { name: 'stddev', value: 363 },
            { name: 'sub', value: 600 },
            { name: 'sum', value: 280 },
            { name: 'update', value: 307 },
            { name: 'variance', value: 335 },
            { name: 'where', value: 299 },
            { name: 'xor', value: 354 },
            { name: 'Minimum', value: 843 },
            { name: 'Not', value: 1554 },
            { name: 'Or', value: 970 },
            { name: 'Query', value: 13896 },
            { name: 'Range', value: 1594 },
            { name: 'StringUtil', value: 4130 },
            { name: 'Sum', value: 791 },
            { name: 'Variable', value: 1124 },
            { name: 'Variance', value: 1876 },
            { name: 'Xor', value: 1101 },
            { name: 'IScaleMap', value: 2105 },
            { name: 'LinearScale', value: 1316 },
            { name: 'LogScale', value: 3151 },
            { name: 'OrdinalScale', value: 3770 },
            { name: 'QuantileScale', value: 2435 },
            { name: 'QuantitativeScale', value: 4839 },
            { name: 'RootScale', value: 1756 },
            { name: 'Scale', value: 4268 },
            { name: 'ScaleType', value: 1821 },
            { name: 'TimeScale', value: 5833 }
          ]
        }
      ]
    }];

    let seriesData = originalData

    let option = {
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
      },
      legend: {
        top: '2%',
        left: '3%',
        orient: 'vertical',
        data: [
          {
            name: 'tree1',
            icon: 'rectangle'
          }
        ],
        borderColor: '#c23531'
      },
      dataZoom: {
        type: 'inside'
      },
      series: [
        {
          type: 'tree',
          name: 'tree1',
          data: seriesData,
          top: '5%',
          left: '7%',
          bottom: '2%',
          right: '60%',
          symbolSize: 7,
          label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right'
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
              align: 'left'
            }
          },
          emphasis: {
            focus: 'descendant'
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750,
          roam: true  //  开启缩放和平移
        }
      ]
    }

    myChart.hideLoading();
    myChart.setOption(option);

    myChart.on('treeroam', (res) => { // 移动or缩放
      console.log(res.zoom)
      option.series[0].data = originalData.map(node1 => {
        return {
          ...node1,
          children: node1.children.map(node2 => {
            const leafNodeChildren = this.getLeftNodeChildren(res.zoom, node2.children)
            return {
              ...node2,
              children: node2.children
            }
          })
        }
      })
      console.log(option.series[0].data)
      myChart.setOption(option)
    });

    function getLeftNodeChildren(zoom, leafNodes) {
      let nodes = []
      if (zoom <= 1) {
        nodes.push(leafNodes[0], { name: '……', value: null }, leafNodes[leafNodes.length - 1])
      } else {
        nodes = leafNodes
      }
      console.log(nodes)
      return nodes
    }


  </script>
</body>

</html>