Antd篇-antd中如何使用echarts，以画树图为例

1- vue template中代码

<template>
  <page-header-wrapper>
	<a-card>
      <div ref="echart" style="width: 100%; height: 800px" />
    </a-card>
  </page-header-wrapper>
</template>

2- vue scripts中代码

import echarts from 'echarts'
data () {
    return {
      archData: {}
	}
}
created () {
    const { query } = this.$route
    this.instanceId = query.id. 	// 这是上一页传过来的参数，不需要的话可以不要
    this.drawTreePic(this.instanceId)
},
methods: {
async drawTreePic (paramId) {
      // arrToTree方法用于获取tree的数组，此处不列出代码了，因为不同数据结构处理方法不同。思想都是一样的：把从后端拿到的数据扁平话存入到数组1中，然后再把数组1中的数据拿出来重新拼成tree结构的数据即可！
      const archData = await this.arrToTree(paramId)
      this.archData = archData
      var option
      const echart = echarts.init(this.$refs.echart)
      echart.setOption(option = {
        // backgroundColor: '#06182F',
        title: {
          text: '树图标题',
          textStyle: {
              fontSize: 16
              // color: '#FF8A19'
          },
          left: '2px',
          top: '1px'
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            formatter: function (params, ticket, callback) {
              var tip = ''
              if (params.data.hasOwnProperty('children')) {
              // 如果节点有孩子，则提示信息如下
                var Tip1 = '<span><p>有孩子的节点的提示信息1：</p></span>'
                var Tip2 = '<span><p><br/></p><p>有孩子的节点的提示信息2：</p></span>'
                tip = Tip1 + Tip2
              } else {
              // 如果是叶子结点，则提示信息如下。在leaves下面写tooltip不知道为什么没有生效。所以才用了这种方法。
                var leafTip = '<span><p>叶子节点提示信息：</p></span>'
                var leafInfo = '<p>信息1：' + params.data.info1 + '</p>'
                leafInfo += '<p>信息2：' + params.data.info2 + '</p>'
                leafInfo += '<p>信息3：' + params.data.info3 + '</p>'
                tip = leafTip + leafInfo
              }
              return tip
            },
            textStyle: {
              fontSize: 8
              // color: '#FF8A19'
            },
            backgroundColor: '#6666FF'
        },
        itemStyle: {
          borderColor: '#00FF00'
        },
        lineStyle: {
          color: '#00FF00'
        },
        series: [
            {
                type: 'tree',
                data: [this.archData],

                top: '1%',
                left: '10%',
                bottom: '1%',
                right: '30%',

                symbol: 'emptyCircle',
                symbolSize: 12,
                // roam: true,
                initialTreeDepth: 3,
                itemStyle: {
                  borderColor: '#2D7CFF',
                  borderType: 'solid'
                },
                lineStyle: {
                  color: '#2D7CFF',
                  width: 0.5
                },
                label: {
                    position: 'top',
                    verticalAlign: 'middle',
                    align: 'middle',
                    fontSize: 12,
                    distance: 10,
                    formatter: function (params, ticket, callback) {
                      lab = '节点的标签名'
                      return lab
                    }
                },
                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left',
                        // color: '#FF6633',
                        fontWeight: 'bolder',
                        formatter: function (params, ticket, callback) {
                          // 根据条件设置叶子结点标题的颜色，即不同条件不同颜色
                          var info = params.data.info
                          var lab = params.data.name
                          if (params.data.info) {
                            if (info.indexOf('a') >= 0) {
                              lab = '{a|' + params.data.name + '}'
                            } else if (info.indexOf('b') >= 0) {
                              lab = '{b|' + params.data.name + '}'
                            } else if (info.indexOf('c') >= 0) {
                              lab = '{c|' + params.data.name + '}'
                            } else if (info.indexOf('d') >= 0) {
                              lab = '{d|' + params.data.name + '}'
                            } else if (info.indexOf('e') >= 0) {
                              lab = '{e|' + params.data.name + '}'
                            } else {
                              lab = '{o|' + params.data.name + '}'
                            }
                            return lab
                          } else {
                            return lab
                          }
                        },
                        rich: {
                          a: {
                              color: '#009900'
                          },
                          b: {
                              color: '#3300FF'
                          },
                          c: {
                              color: '#CC0000'
                          },
                          d: {
                              color: '#CC00FF'
                          },
                          e: {
                              color: '#FF9900'
                          },
                          o: {
                              color: '#79B9B1'
                          }
                        }
                    },
                    itemStyle: {
                      borderColor: '#294541',
                      borderType: 'solid'
                    },
                    lineStyle: {
                      color: '#294541'
                    }
                },
                emphasis: {
                    focus: 'descendant'
                },
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
      })
      option && echart.setOption(option)
      // 根据窗口大小自适应
      window.addEventListener('resize', function () {
        echart.resize()
      })
    }
}