Echarts饼状legend如何自动显示值和百分比-Toy模板网

这篇具有很好参考价值的文章主要介绍了Echarts饼状legend如何自动显示值和百分比。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图如下， 重点在legend里如何设置显示值和百分比

Echarts饼状legend如何自动显示值和百分比

                <div class="div_block">
                    <strong class="block_box_title">硬盘使用情况（总容量：{{total}}）</strong>
                    <div id="pie1"></div>
                </div>

<style scoped lang="less">
     #line1, #line2, #pie1{
        height: 100%;
    }

重点在legend里如何设置显示值和百分比

        getpiedata3(){
            this.$ajax.get('/systems/whitelist/info/',{
                params: {}
            })
            .then((data) => {
                var dt = data.data;  
                if(dt.success){
                    this.total = dt.data.total
                    this.getpie_database('pie1', dt.data);
                }else{
                    this.$message({
                        message:dt.error,
                        type: 'error'
                    });
                }  
            })
            .catch((error) => {
                console.log(error);
            })
        },

 //饼图 获取接口
         getpie_database(id, data){ 
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id)); 
            // 绘制图表
            let myData = [
                        {value: data.free, name: '可用空间'},
                        {value: data.used, name: '已用空间'}
                    ]
            myChart.setOption({ 
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    // left: 'right',
                    x:'50%',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                    y: 'center',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    icon: "circle",   //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
                    itemWidth: 10,  // 设置宽度
                    itemHeight: 10, // 设置高度
                    itemGap: 35 ,// 设置间距，
                    formatter: function (name) {
                        // console.log(data, 'data')
                        let total = 0
                        let tarValue
                        for (let i = 0; i < myData.length; i++) {
                            total += myData[i].value
                            if (myData[i].name == name) {
                            tarValue = myData[i].value
                            }
                        }
                        let v = tarValue + 'G'
                        //计算出百分比
                        let p = Math.round((tarValue / total) * 100) + '%'  
                        return `${name}  ${p}   ${v}`
                        //name是名称，v是数值
                    }
                    // textStyle: {  // 图例文字的样式
                    //     color: '#fff',
                    //     fontSize: 16,
                    // }
                },
                color:this.color,
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '70%',
                    center:['20%','50%'],
                    label: {//去除饼图的指示折线label
                        normal: {
                        show: false,
                        position: 'inside',
                        formatter:"{b}:{d}%"
                        },
                    },
                    data: myData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            });
        },

文章来源地址https://www.toymoban.com/news/detail-510726.html

到了这里，关于Echarts饼状legend如何自动显示值和百分比的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！