echarts餅圖lengend標籤顯示數據

有時候會要求我們標籤要有數據展示我們只需要在lengend裡寫一個formatter就可以了

legend: {
                            orient: 'vertical',
                            icon: "circle",
                            itemGap: 0, 
                            right: '0%',
                            top: 0,
                            formatter: function (name) {
                                var percent, value;
                                var all = 0;
                                for (var i = 0; i < result.length; i++) {
                                    all = all + result[i].value;
                                }
                                for (let a = 0; a < option1.series[0].data.length; a++) {
                                    if (option1.series[0].data[a].name === name) {
                                        value = option1.series[0].data[a].value;
                                        percent = (value * 100 / all).toFixed(2);
                                    }
                                }
                                return [name + ": " + value + "(" + percent + "%" + ")"].join("");
                            },

icon:形狀

right:與右邊的距離

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 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: '{a} <br/>{b}: {c} ({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); // 模拟动态增加标签数据 setInterval(function() { // 随机生成一个标签名称和数据 var labelName = '标签' + Math.floor(Math.random() * 100); var data = Math.floor(Math.random() * 1000); // 获取当前的饼图数据 var oldData = myChart.getOption().series[0].data; // 新增一个数据项,并添加到饼图数据中 oldData.push({value: data, name: labelName}); // 更新饼图数据 myChart.setOption({ series: [{ data: oldData }] }); }, 2000); </script> </body> </html> ``` 上述代码中,我们通过 `setInterval()` 函数模拟了动态增加饼图标签数据的效果。每隔2秒钟,代码会随机生成一个标签名称和对应的数据,并将新数据项添加到饼图数据中,从而实现了动态增加标签数据的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值