Echarts饼图将数据显示在 legend 旁边


不多废话,笔记如下

var myEcharts = echarts.init(document.getElementById('doughnut'));

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['未處理', '處理中', '已處理'],
        // formatter方法会传入一个name,值是当前的data元素(也就是data[i])
        formatter: function (name) {
            var index = 0;
            var clientlabels = data;
            // 要显示在 legend 旁边的值
            var clientcounts = [2, 3, 12];
            // forEach() value为每个值,i为索引值
            clientlabels.forEach(function (value, i) {
                if (value == name) {
                    index = i;
                }
            });
            return name + ":" + clientcounts[index];
        }
    },
    series: [
        {
            name: '員工軌跡異常',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 2, name: '未處理' },
                { value: 3, name: '處理中' },
                { value: 12, name: '已處理' },
            ]
        }
    ]
};

myEcharts.setOption(option);


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM