echarts饼图只显示数据为前五的标签提示

效果图:在这里插入图片描述

function hotLineCompaintEchartF(data, count) {
var option5 = {
color: [’#FABC09’, ‘#04C2D0’, ‘#E2354A’, ‘#2F79F4’, ‘#AAEF88’, ‘#3036EB’, ‘#E86474’, ‘#AACBE8’, ‘#CF4576’, ‘#88D960’, ‘#65A6DF’, ‘#EA9427’, ‘#9D70E7’],
tooltip: {
trigger: ‘item’,
formatter: "{b}: {c}起 {d}% "
},
legend: {
top: ‘20’,
left: ‘80%’,
bottom: ‘180’,
orient: ‘vertical’,
type: ‘scroll’
},
graphic: [{
type: ‘text’,
left: ‘center’,
top: ‘57%’,
z: 16,
style: { //中间位置显示的内容
fill: ‘red’,
text: “共” + count + “起”,
font: ‘16px Microsoft YaHei’
}
}],
series: [{
name: ‘访问来源’,
type: ‘pie’,
center: [‘50%’, ‘60%’],
radius: [‘45%’, ‘60%’],
avoidLabelOverlap: false,
data: genData(data) //处理数据只显示前五的标签
}]
};
return option5;
}
function genData(arr) {
var newArr = arr.sort(compare(“value”));
newArr.forEach(function (item, index) {
if (index < 5) {
item.label = {
show: true,
position: ‘outside’,
formatter: "{b}: {c}起 {d}% "
};
item.labelLine = {
show: true
};
} else {
item.label = {
show: false,
position: ‘center’
};
item.labelLine = {
show: false
};
}
});
return newArr;
}

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是一个使用 ECharts 生成饼图并添加标签提示的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 饼图标签提示</title> <!-- 引入 ECharts 核心库 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="myChart" style="width: 600px;height:400px;"></div> <script> // 基于准备好的DOM,初始化ECharts实例 var myChart = echarts.init(document.getElementById('myChart')); // 配置项和数据 var option = { title: { text: '饼图示例', subtext: '标签提示' }, tooltip: { trigger: 'item', formatter: '{b} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: true, position: 'outside', formatter: '{b} {d}%' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold' } }, labelLine: { show: true }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] } ] }; // 使用指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 上述代码中,我们通过 `tooltip` 配置项来设置饼图标签提示。具体来说,我们将 `tooltip.trigger` 属性设置为 `'item'`,这表示当用户鼠标移动到饼图上时将触发提示;将 `tooltip.formatter` 属性设置为 `' {b} ({d}%)'`,这表示提示的内容将显示标签名称和占比百分比。通过这些设置,我们就可以为饼图添加标签提示了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值