echarts-实现标题中显示百分比

该文章介绍了如何在Echarts图表库中使用normal-label节点来配置饼图,包括数据类型、半径、中心位置等属性设置,以及高亮效果和标签显示的格式化方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用方式:normal-label节点

   series : [{
                name: '类型',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:valuearray,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{ 
                        label:{ 
                            show: true, 
                            formatter: '{b} : {c} ({d}%)' 
                        }, 
                        labelLine :{show:true} 
                    } 
                }
            }
        ]

ECharts是一个强大的JavaScript图表库,可以很容易地创建出各种类型的图表,包括饼图。下面是一个简单的步骤来创建一个饼图,并显示每个部分的百分比: 1. 首先,在HTML文件中引入ECharts的CDN链接: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script> ``` 2. 定义一个包含数据和配置选项的JavaScript对象: ```javascript var option = { // 图表标题 title: { text: '饼状图示例' }, // 设置视口区域 visualMap: { type: 'piecewise', // 类型为分段渐进映射 pieces: [{ gt: 0, lable: '大于0', color: ['#3398DB'] // 颜色对应百分比大于0的部分 }, { lable: '小于等于0', color: ['#F44336'] // 颜色对应百分比小于等于0的部分 }], }, // 饼图的基本配置 series: [{ name: '饼图', type: 'pie', radius: ['45%', '75%'], // 内外圆半径设置 data: [ { value: 335, name: '部分A' }, { value: 310, name: '部分B' }, { value: 234, name: '部分C' }, { value: 135, name: '部分D' } ], label: { show: true, // 显示标签 formatter: function (params) { return params.name + '<br/>' + '%p'; // 显示百分比 } }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; ``` 3. 将`option`传递给ECharts实例化: ```javascript var chart = echarts.init(document.getElementById('main')); // 获取到容器ID chart.setOption(option); ``` 在这个例子中,`name`属性对应饼图的数据标签,`formatter`函数用于自定义百分比显示格式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值