echarts 树图 展开收缩设置不同图标

echarts 树图 展开收缩设置不同图标

      import plus from '@/assets/img/plus.svg';
      import minus from '@/assets/img/plus.svg';
      init(){
      	const chart = echarts.init(document.getElementById('main'));
      	const option = {
      		      series: [
              {
                type: "tree",
                data: [
                  {
                    name: "root",
                    status: "fail",
                    children: [
                      {
                        name: "Child A",
                        children: [
                          {
                            name: "Leaf C",
                          },
                          {
                            name: "Leaf D",
                          },
                          {
                            name: "Leaf E",
                          },
                          {
                            name: "Leaf F",
                          },
                        ],
                      },
                      {
                        name: "Child B",
                        status: "success",
                        children: [
                          {
                            name: "Leaf G",
                          },
                          {
                            name: "Leaf H",
                          },
                        ],
                      },
                      {
                        name: "Child C",
                        status: "wait",
                      },
                      {
                        name: "Child F",
                        children: [
                          {
                            name: "Leaf J",
                          },
                          {
                            name: "Leaf K",
                          },
                        ],
                      },
                    ],
                  },
                ],
                label: {
                  position: "right",
                  //设置不同label样式
                  formatter: function (params) {
                    let str = `{a${params.data.status}|${params.data.name}}`;
                    return str;
                  },
                  rich: this.getRich(),
                },
                //不同状态设置不同图标
                symbol: function (value, params) {
                  if (!params.data.children) {
                    return "none";
                  } else if (params.collapsed) {
                    return "image://" + plus;
                  } else {
                    return "image://" + minus;
                  }
                },
                //不同图标设置不同大小
                symbolSize: function (value, params) {
                  if (params.collapsed) {
                    return 16;
                  } else {
                    return [10, 9];
                  }
                },
              },
            ];
      	}
      	option && chart.setOption(option)
      },
      getRich(){
      	let result = {}
      	let colorList =[
      		{
      			name:'fail',
      			color:'red'
      		},
      		{
      			name:'success'
      			color:'green'
      		},
      		{
      			name:'wait',
      			color:'yellow'
      		}
      	]
      	colorList.forEach(item=>{
      		result[`a${item.name}`]={
      			color:item.color,
      			fontSize:14,
      		}
      	})
      	return result;
      }