zoukankan      html  css  js  c++  java
  • ECHARTS图中实现LEGEND图例文字后面显示百分比%

    主要代码是一个回调函数,放代码

     // 回调函数
                    formatter: function(name) {
                        var data = option.series[0].data;//获取series中的data
                        var total = 0;
                        var tarValue;
                        for (var i = 0, l = data.length; i < l; i++) {
                            total += data[i].value;
                            if (data[i].name == name) {
                                tarValue = data[i].value;
                            }
                        }
                        var p = ((tarValue / total) * 100);
                        return name + " " + " " + p.toFixed(2) + "%";
                    },
    

    全部代码

    option = {
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        // 回调函数
                    formatter: function(name) {
                        var data = option.series[0].data;//获取series中的data
                        var total = 0;
                        var tarValue;
                        for (var i = 0, l = data.length; i < l; i++) {
                            total += data[i].value;
                            if (data[i].name == name) {
                                tarValue = data[i].value;
                            }
                        }
                        var p = ((tarValue / total) * 100);
                        return name + " " + " " + p.toFixed(2) + "%";
                    },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    

      

  • 相关阅读:
    Eclipse 添加行号
    http中 get方法 传送中文参数乱码解决办法
    第一章 java 语言概述
    Python学习
    Python学习
    Python学习
    Python学习
    Python学习
    Python学习
    Python学习
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/15528649.html
Copyright © 2011-2022 走看看