Echarts 矩形树图tooltip自定义内容以及样式

矩形树图 自定义背景颜色和字体样式

一般的字体样式都是白色 要想自定义自己想要的颜色 就要处理option里面data的数据以及样式

如何处理option里面data的数据以及样式

data(){
	return{
		optionColor:[bgColor:"#000",fontColor:'#fff']
	}
}

handleOption (data) {
      let NewOption = []
      function sortByOrder(data) {
        return function(one,two) {
          return one[data] - two[data];
        }
      }
      //XX 这个数据根据自己数据进行排序
      let listData = data.sort(sortByOrder("XX")); //降序排序
      let newData = []
      listData.map((item,index)=> {
        newData.push({//把自己想要的数据放进来 
          'name':item.XX || item.name,
          'value':item.XX|| item.value,
          'id':item.XX,
          'itemStyle':{
            'color':this.optionColor[index%7].bgColor,
          },
          'label': {
            'color':this.optionColor[index%7].fontColor
          }
        })
      })
      NewOption.series[0].data = newData
      this.option = NewOption
      this.chart.setOption(this.option, true);//最后把数据重新放入
    },

柱状图 tooltip 自定义内容

可以根据上面的代码 相结合 处理option 的tooltip的数据

如何处理option 的tooltip的数据

大家都知道echarts有formatter方法可以处理

tooltip: {
   formatter(params) {
   //params 主要在上面的代码中push进去 自己所需的数据 params的data就能拿到
     return params[0].data.XX+ ":" + "服务调用了" + params[0].data.XX;
   },
 },