vue3使用echarts的tree，自己寫事件進行分頁

vue3使用echarts的tree，自己寫事件進行分頁 

 

先到npmjs 官網查看當前使用最多的版本

https://www.npmjs.com/package/echarts

 

看了下5.5.0用的最多

npm i echarts@5.5.0

 

以下的demo(“@/flare”是後面的flare.json數據 )

<template>
<div id="chart-container">
</div>
</template>

<script>
    import { defineComponent,setup,reactive,onMounted } from 'vue'
    import * as echarts from 'echarts'
    import * as flarejson from '@/flare'
export default defineComponent({
    setup(props,ctx){
        let myChart;
        let echartsoption=reactive([])

        const getChartData = ()=>{
            let dom = document.getElementById('chart-container');
             myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
            });
        }
        myChart.showLoading();
        //隱藏單數的節點
        flarejson.children.forEach(function (datum, index) {
            index % 2 === 0 && (datum.collapsed = true);
          });
        //調用
        echartsoption={
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove'
            },
            series: [
              {
                type: 'tree',
                data: [flarejson],
                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '10%',
                symbolSize: 20,  //圓的大小
                label: {  //主節點默認默認配置，也可以在data裏面自定義賦值
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                  fontSize: 16
                },
                leaves: {  //子節點相關默認配置
                  label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                  }
                },
                emphasis: {
                  focus: 'descendant'
                },
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750,
                tooltip:{
                    formatter:function(params,ticket,callback){
                        // $.get('detail?name=' + params.name, function (content) {
                        //     callback(ticket, toHTML(content));
                        // });
                        // setTimeout(() => {
                        //     callback(ticket, 'test setTimeout formatter');
                        // }, 2000);
                        return 'Loading formatter';  //優先加載
                    },
                    valueFormatter:function(params,dataIndex){  //數值顯示部分的格式化回調函數
                        // $.get('detail?name=' + params.name, function (content) {
                        //     callback(ticket, toHTML(content));
                        // });
                        // setTimeout(() => {
                        //     callback(ticket, 'test setTimeout formatter');
                        // }, 2000);
                        return '$' + value;  //優先加載
                    },
                },
              }
            ]
          }
            if (echartsoption && typeof echartsoption === 'object') {
              myChart.setOption(echartsoption);
            }
            window.addEventListener('resize', myChart.resize);
            myChart.on("click", handleNodeClick);//點擊事件
    }

    const handleNodeClick = (node)=>{
        console.warn({ node });
       if(node.data.valuetype){
            //下一頁
         if(node.data.valuetype  =='nextpage'){
           let parentNode=  node.treeAncestors(node.treeAncestors.length-2) //treeAncestors 存儲的當前點擊的鏈路節點，我們用來獲取父節點
            const curData = myChart.getOption().series[0].data;
              //模擬已經取到下一頁的數據
             let childrenData=[
                 {"name": "上一頁","valuetype": "lastpage", "value": "lastpage"},
                {"name": "11", "value": 11},
             ]
             matchNodeData(curData[0],parentNode,childrenData)
             echartsoption.series[0].data = curData;
             renderEcharts()
         }else if(node.data.valuetype  =='lastpage'){   //上一頁
            //模擬已經取到下一頁的數據
             let childrenData=[
                {"name": "1", "value": 1},
                 {"name": "2", "value": 2},
                 {"name": "3", "value": 3},
                 {"name": "4", "value": 4},
                 {"name": "5", "value": 5},
                 {"name": "下一頁","valuetype": "nextpage", "value": "nextpage"},
             ]
             matchNodeData(curData[0],parentNode,childrenData)
             echartsoption.series[0].data = curData;
             renderEcharts()
         }
       }
      else if (node.data.children && node.data.children.length) {
        // 已有下級
         //node.collapsed = node.collapsed;
      } else {
        myChart.showLoading();
        setTimeout(() => {
          myChart.hideLoading();
          //下面數據爲自己想要加入的數據
           const newNode = [{
               name: "哪吒三太子1",
               value: node.dataIndex+1,
             },{
               name: "哪吒三太子2",
               value: node.dataIndex+2,
             }]
          
          if (!node.data.children) {
            node.data.children =newNode;
          } else if (!node.data.children.length) {
            node.data.children.push(...newNode);
          }
          node.data.collapsed=false //展開
          //節點的數據賦值給echartsoption
          const curData = myChart.getOption().series[0].data;
          echartsoption.series[0].data = curData;
          renderEcharts();
        }, 300);
    }
  }
    //刷新節點
  const renderEcharts =()= {
      myChart.setOption(echartsoption);
      myChart.resize();
    }
    
     const matchNodeData =(node,parentNode,childrenData)= {
        //只能取到name,value這些自帶的字段,所以如果有分頁，那這個的父節點一定要設置value
      if(node.value==parentNode.value){
        node.children=childrenData
        return true
      }
      if (node.data.children && node.data.children.length){
         for(let count=0;count<node.children.length;count++){
            if(matchNodeData(node.children[count],parentNode,childrenData)){  //遞推繼續找子節點
                return true
            }
         }
      }
    }

    onMounted(()=>{
        getChartData()
    })

    return {
        myChart,
        echartsoption,
        getChartData,
        handleNodeClick,
        renderEcharts,
        matchNodeData,
    }
});
</script>

 

測試的flare.json 數據

{
 "name": "flare",
 "value": 1,
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "value": 3938},
      {"name": "CommunityStructure", "value": 3812},
      {"name": "HierarchicalCluster", "value": 6714},
      {"name": "MergeEdge", "value": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "value": 3534},
      {"name": "LinkDistance", "value": 5731},
      {"name": "MaxFlowMinCut", "value": 7840},
      {"name": "ShortestPaths", "value": 5914},
      {"name": "SpanningTree", "value": 3416}
     ]
    },
    {
     "name": "optimization",
     "children": [
      {"name": "AspectRatioBanker", "value": 7074}
     ]
    }
   ]
  },
  {
   "name": "data",
   "value": "11224",
   "children": [
    {
     "name": "converters",
     "children": [
      {"name": "Converters", "value": 721},
      {"name": "DelimitedTextConverter", "value": 4294},
      {"name": "GraphMLConverter", "value": 9800},
      {"name": "IDataConverter", "value": 1314},
      {"name": "JSONConverter", "value": 2220}
     ]
    },
    {"name": "DataField", "value": 1759},
    {"name": "DataSchema", "value": 2165},
    {"name": "DataSet", "value": 586},
    {"name": "DataSource", "value": 3331},
    {"name": "DataTable", "value": 772},
    {"name": "DataUtil", "value": 3322}
   ]
  },
  {
    "name": "下一頁","valuetype": "nextpage", "value": "nextpage"
 }
  
 ]
}