矩形树图 自定义背景颜色和字体样式
一般的字体样式都是白色 要想自定义自己想要的颜色 就要处理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;
},
},