[echarts] rich属性的使用和调整label显示位置

series: [    {    type: 'pie',radius: ['40%', '60%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 4,borderColor: '#fff',borderWidth: 2},label: {show: true,position: 'outside',lineHeight: 18,// 行高formater: (params) => {                      // a,b是rich属性中定义的样式名，clasconstttt相当于css中的clasconstt arr = [`{a|${params.name}}`,`{b|${that.change(params.value)}万}`，`{b|${params.percent}%}`]    return arr.join('\n') // 将数组转换成字符串并换行}，rich: {a: {color: '#333',fontWeight: 'bold',fontSize: 14,fontFamily: 'Microsoft YaHei'    },b: {color: '#666',fontSize: 13,align: 'left'    }    }    },labelLine: {show: true},data: data}]

tormattip中没有rich属性，因此不能使用rich来改变样式。在formatter属性中，我们可以直接重写样式：

tooltip: {trigger: 'item',formatter: (params) => {// const定义样式 tooltip_title = `font-size: 13px;color: \#333;font-weight:bold`const tooltip_text = `font-size: 13px;color: \#666;margin-left:12px;`                // change是自己定义的处理函数const str = `${params.marker} <span style="${tooltip_title}">${params.name}</span>            <br/> <span style="${tooltip_text}">${that.change(params.value)}万                          </span>            <br/> <span style="${tooltip_text}">${params.percent}%</span>`return str}},

rich属性在Echarts中的使用和调整label显示位置