ECharts饼图实现⾃定义标签包含图标icon（圆形图标，矩形
图标）
1 原始效果图
2 实现代码
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('main'));
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie',    // 设置图表类型为饼图
radius: '55%',  // 饼图的半径，外半径为可视区尺⼨（容器⾼宽中较⼩⼀项）的 55% 长度。                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
{value:235, name:'视频⼴告'},
{value:274, name:'联盟⼴告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
labelLine:{show:false},
label:{
formatter: params => {//●
return (
'{icon|▅}{name|' +params.name+ '}{value|' +
params.value  + '}'
icon图标库
)
;
},
rich: {
icon: {
fontSize: 16
},
name: {
fontSize: 16,
padding: [0, 10, 0, 4],
},
value: {
fontSize: 16,
}
},
}
}
]
})
</script>
</body>
3 最终效果图
3.1 最终效果图（⾃定义标签包含圆形图标）
3.2 最终效果图（⾃定义标签包含矩形图标）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。