ECharts饼图Legend使用Formatter解析数据示例

以下是一个使用ECharts绘制饼图，并使用formatter解析legend的示例代码：

HTML代码:

<div id='myChart' style='width: 600px;height:400px;'></div>

JavaScript代码:

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));

// 指定图表的配置项和数据
var option = {
    title : {
        text: '饼图示例',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: ['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
        formatter: function (name) {
            var data = option.series[0].data;
            var total = 0;
            for (var i = 0; i < data.length; i++) {
                total += data[i].value;
            }
            for (var i = 0; i < data.length; i++) {
                if (name === data[i].name) {
                    return name + '   ' + ((data[i].value / total) * 100).toFixed(2) + '%';
                }
            }
        },
        textStyle: {
            fontSize: 12
        }
    },
    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:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这个示例代码中，我们定义了一个formatter函数，该函数用于解析legend中的数据并将其格式化为'名称 百分比'的形式。通过在legend的配置项中设置formatter属性，我们可以指定要使用的formatter函数。

在这个例子中，我们使用了饼图，数据中包含了5个值，每个值都有一个名称和一个数值。我们使用饼图来展示这些数据，并使用legend来显示每个值的名称。formatter函数会根据数据中的数值计算出每个值所占的百分比，并将其添加到legend中的每个名称后面。

最后，我们使用setOption方法来将配置项应用于图表，并在HTML页面中显示图表。