vue前端使用echart径向树形图修改样式

echart 径向树形图官网示例：
https://echarts.apache.org/examples/zh/editor.html?c=tree-radial

官网示例：

修改个性化示例：

1、可缩放、可拖动

在 series里面添加：

roam:true,//是否可拖动、缩放
1

2、控制节点大小

symbolSize：7  // 根据数值大小控制节点大小
1

3、正向、径向控制

layout: 'radial',//orthogonal为正向，radial为径向
1

正向径向区别：
正向：

径向：

4、控制节点颜色
在返回的data节点对应对象添加

"itemStyle":{"color":"blue"}   //颜色可修改
1

示例返回节点的data：
{“name”:“xxx”,“itemStyle”:{“color”:“blue”}}

5、控制树形图显示的层数

initialTreeDepth：4  //4为层数
1

6、修改连接线的样式（颜色、曲度）
在series里面添加：

// 线条
                      lineStyle: {
                        //color: '#fff',  //线条颜色
                        width: 1,
                        curveness: 0, // 修改树的曲度
                        type: 'solid' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                      }
1
2
3
4
5
6
7

curveness: 0 样式示例：

7、修改鼠标悬停在节点上时显示的内容，自定义鼠标悬停显示内容

在option里添加

     enterable:true,//鼠标是否可进入提示框浮层中
     formatter:formatterHover//修改鼠标悬停显示的内容
1
2

示例：

然后再编写formatter函数，根据自己的需求编写

简单的代码示例如下：
params.data.name为返回data的json对象的节点name，可根据自己的节点修改
params.data.type则是必须在后端返回的data的json的对象节点添加 “type”, “a”
返回data示例：
{“children”:[],“name”:“xx”,“type”:“a”}

/**
         * 鼠标悬停时显示详情
         */
      function formatterHover(params){
        var cType = params.data.type;
        if (cType === 'a'){
          return '地址：123';
        } if (cType === 'b'){
          return '机构：'+ params.data.name;
        } if (cType === 'c'){
          return '系统：'+ params.data.name;
        } if (cType === 'd'){
          return '分类：'+ params.data.name;
        } else {
          return '名称：'+ params.data.name;
        }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

8、控制每个节点的大小，可控制每层节点大小
首先修改

symbolSize:  x => 0.01*x, //箭头函数参数,根据date的节点value值控制节点大小  
1

然后再在后端返回的data的json对象里面添加value值
返回示例
返回data示例：
{“children”:[],“name”:“xx”,“value”:9800}
通过控制value值来控制节点大小