微信小程序 ———— 使用ECharts實現樹狀關係圖

在開發中，有時候會遇到展示一些人物關係，上下級關係等相關需求，使用樹狀圖可以清晰的表達出來

首先看下目錄結構

- component
    - echarts
        - ec-canvas.js
        - ec-canvas.json
        - ec-canvas.wxml
        - ec-canvas.wxss
        - echarts.min.js
        - wx-canvas.js
- pages
    - treeView
        - treeView.js
        - treeView.json
        - treeView.wxml
        - treeView.wxss
- app.js
- app.json
 ………………

首先，將echarts 以組件的形式放到項目裏來，大家可以去ECharts 的微信小程序版本去下載資源，然後放到項目中來

下面看下頁面

treeView.wxml

<view class="box" style="height: 1000rpx;">
    <echart id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></echart>
</view>

treeView.js

import * as echarts from '../../component/graph/echarts.min.js';
let chart = null;
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    data: {
      id: 1,
      name: 'A',
      intro: '這是A',
      children: [
        {
          id: 2,
          name: 'B',
          intro: '這是B',
        },
        {
          id: 3,
          name: 'C',
          intro: '這是C',
          children: [
            {
              id: 5,
              name: 'E',
              intro: '這是E',
            },
            {
              id: 6,
              name: 'F',
              intro: '這是F',
              children: [
                {
                  id: 7,
                  name: 'G',
                  intro: '這是G',
                },
                {
                  id: 8,
                  name: 'H',
                  intro: '這是H',
                }
              ]
            }
          ]
        },
        {
          id: 4,
          name: 'D',
          intro: '這是D',
          children: [
            {
              id: 9,
              name: 'K',
              intro: '這是K',
            },
            {
              id: 10,
              name: 'L',
              intro: '這是L',
              children: [
                {
                  id: 11,
                  name: 'm',
                  intro: '這是m',
                },
                {
                  id: 12,
                  name: 'n',
                  intro: '這是n',
                }
              ]
            }
          ]
        }
      ]
    }
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.initChart()
  },
  initChart() {
    this.ecComponent = this.selectComponent('#mychart-dom-bar')
    this.ecComponent.init((canvas, width, height) => {
      let data = this.data.data;
      let id = data.id
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);
      let option = {
        tooltip: {
          show: true,
          trigger: 'item',
          triggerOn: 'click',
          formatter: function (params) {
            // console.log(params)
            return params.data.intro
          },
          position: function (pos, params, dom, rect, size) {
            // console.log(pos)
            // 鼠標在左側時 tooltip 顯示到右側，鼠標在右側時 tooltip 顯示到左側。
            var obj = { top: pos[1] + 3, right: size.viewSize[0] - pos[0] + 8 };
            if (params.data.id == id) {
              obj = { top: pos[1] + 3, left: pos[0] + 8 };
            }
            return obj;
          }
        },
        series: [
          {
            type: 'tree',

            data: [data],

            top: '5%',
            left: '5%',
            bottom: '5%',
            right: '5%',

            symbolSize: 12,

            // edgeShape: 'polyline', // 直線
            // orient: 'vertical', //豎着

            label: {
              position: 'right',
              verticalAlign: 'bottom',
              align: 'left',
              fontSize: 12
            },

            leaves: {
              label: {
                position: 'left',
                verticalAlign: 'bottom',
                align: 'right',
                fontSize: 12
              }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };
      chart.setOption(option);
      chart.on('click', function (params) {
        // console.log(params)
      });
      return chart;
    })
  },
})

treeView.json

{
  "usingComponents": {
    "echart": "../../component/graph/ec-canvas"
  },
  "navigationBarTitleText": "treeView"
}

最終實現效果：

 

END ！