echarts（十）高级篇（富文本标签）

高级篇

同志们，装逼时刻到！！！

富文本标签

• 效果：
  

实现步骤

• 用formatter 写文本片段
  • formatter:
    • ‘{a|文字内容}\n'+
    • '{b|文字内容}\n'+
    • '默认样式{x|样式 x}’
• 用rich 设置文本样式

const myChart = echarts.init(document.getElementById('main'));
// 数据
const data=[
    {name:'杨戬',value:80,img:'./images/yj.jpg'},
    {name:'鲁班大师',value:60,img:'./images/lb.jpg'},
    {name:'沈梦溪',value:40,img:'./images/smx.jpg'},
    {name:'诸葛亮',value:30,img:'./images/zgl.jpg'}
];
data.forEach(item=>{
    /*自定义标签 label
*   formatter 文本片段
*       '{样式名|文字内容}\n 换行'
*   文本块的样式
*       textBorderColor 文本描边颜色
*       textBorderWidth 文本描边宽度
*       ...
*   rich 富文本，在其中写入样式
*       width 宽
*       height 高
*       backgroundColor 背景色
*           image 背景图
*       fontSize 文字大小
*       lineHeight 行高
*       fontWeight 文本加粗
*       ...
* */
    item.label={
        formatter:'{img|}\n{name|'+item.name+'}',
        textBorderColor:'yellow',
        textBorderWidth:3,
        rich:{
            img:{
                width:60,
                height:60,
                backgroundColor:{
                    image:item.img
                }
            },
            name:{
                lineHeight:30,
                fontSize:18
            }
        }
    }
})

/*配置项*/
const option = {
    title:{text:'英雄战力'},
    series: {
        type: 'pie',
        data,
        radius:'70%',
    }
};
myChart.setOption(option);