vue使用v-charts树型结构

v-charts官网，以及官网配置文档

vue版本 v-charts官网
官网 树型的配置文档

v-charts

不做过多的介绍，简单说就说一个图表框架，还是挺好用的，里面涵盖了很多图表，并且还有结合百度地图跟高德地图的一些图表。以及电视剧里军旅片里面的一些科幻类的界面，都有！

图表树型

这个框架里面的一些简单的图表官网写的很明了，基本上没有什么难度。但在我做动态权限用树型展现时，感觉现在没有介绍树型的，或者是根据官网文档进行改编的。很少用vue进行开发。

整体样式![树型]

这就是树型的样式（当然里面的数据是我自己定义的，在使用的时候是结合axios动态设置的）

如果是在v-charts网站里面弄得代码，最主要的问题就是没有告诉我们如何设置样式，以及如何设置数据。

下面我就分两块（样式设置，数据设置）进行说明

样式设置

首先，无论是在echarts官网还是v-charts里面都没有明确的指出在vue里面如何设置样式。基本上都是在html里面直接内嵌调用的。

在vue里面设置样式或者是属性，v-charts是将其封装了一下，并不像HTML里面还要自己定义。

直接上代码，由于没有写注释所以在代码下方我会进行解释

<ve-tree :data="chartData"  :extend="chartExtend"></ve-tree>

很简单的一段代码，主要的不是在这段代码上，最主要的是它的配置

:data 这个意思是指定数据源（数据）

:extend 由于V-Charts是二次封装echarts，所以可以通过extend复合组件的形式进行属性配置

这两个是最主要的两个属性（在这个项目现在说的这个话题里面）至于其他的属性请大家移步至官网进行了解。

重要声明一点,在使用属性的时候可能会出现设定后效果并没有实现的情况。
这种可能是你的格式不正确的原因。
这个格式正确是 属性名 : 属性值
比如show : true

 this.chartExtend= {
      seriesMap: {
        tree1: {
          orient: 'vertical',
          label: {
            normal: {
              show: true,
              position: 'top',
              fontWeight: 'bolder',
              fontSize: 20
            }
          }
        }
      }
    }

这段代码就是说明在vue下，v-charts 树型图表的属性如何进行设置。

在echarts的属性目录中指明series 是一个数组
tree1 指明要设置的树，在这个里面进行设置树的属性即可。

orient: 设置树的纵向还是横向

label：设置标题的样式。

数据设置

数据的形式是总体是一个集合，然后里面，name 是标题的意思 就是显示时的字 value 是判断这个数所在的结点 。树的子树 是用一个数组包着的集合。基本上每一层的每一个结点是一个结合，而这一层用一个数组包裹着。

const Data = {name: '管理员', value: 0, children: [{name: '政教处', value: '11'}]}

      chartData: {
        columns: ['name', 'value'],
        rows: [
          {
            name: 'tree1',
            value: [this.Data ]
          }
        ]
      }

这是数据的形式，当然在一般的操作中，都是将数据进行动态获取。

this.data.name = '管理员'
          this.data.value = 0
          // eslint-disable-next-line no-unused-vars
          var table = res.data
          // eslint-disable-next-line no-unused-vars
          var i
          for (i in table) {
            if (table[i].auth <= 10) {
              this.children.push({'name': table[i].username, 'value': table[i].auth, 'children': []})
            }
          }
          // eslint-disable-next-line no-redeclare
          var j
          for (j in table) {
            if (table[j].auth <= 100 && table[j].auth >= 10) {
              // eslint-disable-next-line no-unused-vars
              var a = table[j].auth % 10
              // eslint-disable-next-line no-unused-vars
              var b
              for (b in this.children) {
                // eslint-disable-next-line eqeqeq
                if (parseInt(this.children[b].value) == a) {
                  this.children[b].children.push({'name': table[j].username, 'value': table[j].auth, 'children': []})
                }
              }
            }
          }
          // eslint-disable-next-line no-unused-vars
          this.data.children = this.children
          this.chartData = {
            columns: ['name', 'value'],
            rows: [
              {
                name: 'tree1',
                value: [this.data]
              }
            ]
          }
        }
        )

这是我的代码获取的数据。当然（因为经验问题，第一次弄这个，所以弄得太烂了）

在这里面data1是最后的数据形态。

这里注意一点，有可能在你弄完之后，数据并没有显示，可能是因为它先加载了this.chartData 在调用这个获取数据的时候，data1还没有处理完数据，所以，没有数据没显示！ 所以解决方法是将 this.chartData，在处理完data1完后，再进行装载一遍，这样成功了！

如果有什么疑问的地方，可以联系我，咱们一起交流