微信小程序 ———— 使用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 ！