echarts环形饼图中间显示总数 | 张先生的网络日志

实现方法很简单，将总数计算出来显示到title，title显示位置调整到饼图中间，设置zlevel属性置于底层；鼠标悬停时显示的label也显示在饼图中间，调整背景色及边距，设置zlevel属性置于title上方，鼠标悬停时显示label就会遮挡住title。

预览地址： http://jsrun.net/pMXKp

<div id="echart" ></div>
<script>
function setEchartsPie(id, data) {
    let $el = document.getElementById(id);
    let myChart = this.echarts.init($el, '', {
        width: 450,
        height: 300,
    });
    let dataName = [];
    let total = 0;
    data.forEach((res) => {
        dataName.push(res.name);
        total += parseFloat(res.value) * 10000;
    });
    total = total / 10000;
    let option = {
        title: {
            zlevel: 0,
            text: [
                '{value|￥' + total + '}',
                '{name|总金额}',
            ].join('\n'),
            rich: {
                value: {
                    color: '#303133',
                    fontSize: 40,
                    fontWeight: 'bold',
                    lineHeight: 40,
                },
                name: {
                    color: '#909399',
                    lineHeight: 20
                },
            },
            top: 'center',
            left: '145',
            textAlign: 'center',
            textStyle: {
                rich: {
                    value: {
                        color: '#303133',
                        fontSize: 40,
                        fontWeight: 'bold',
                        lineHeight: 40,
                    },
                    name: {
                        color: '#909399',
                        lineHeight: 20
                    },
                },
            },
        },
        tooltip: { // 悬停指示
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            data: dataName,
            itemGap: 30,
            top: 'middle',
            align: 'left',
            icon: 'circle',
            formatter: function (name) {
                return name;
            }
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['80%', '84%'],
                center: [150, '50%'],
                stillShowZeroSum: false,
                avoidLabelOverlap: false,
                zlevel: 1,
                label: {
                    normal: {
                        padding: [30, 30, 30, 30],
                        backgroundColor: '#fff',
                        show: false,
                        position: 'center',
                        formatter: [
                            '{value|￥{c}}',
                            '{name|{b}}'
                        ].join('\n'),
                        rich: {
                            value: {
                                color: '#303133',
                                fontSize: 40,
                                fontWeight: 'bold',
                                lineHeight: 40,
                            },
                            name: {
                                color: '#909399',
                                lineHeight: 20
                            },
                        },
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: data
            }
        ],
        color: ['#410ADF','#F42850','#F6A93B','#7ED321','#282828']
    };
    myChart.setOption(option);
}

setEchartsPie('echart', [
    { value: 300, name: '课程报名' },
    { value: 350, name: '服装收费' },
    { value: 250, name: '物料收费' },
    { value: 100, name: '其它收费' },
]);
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

function setEchartsPie(id, data) {

let $el = document.getElementById(id);

let myChart = this.echarts.init($el, '', {

width: 450,

height: 300,

});

let dataName = [];

let total = 0;

data.forEach((res) => {

dataName.push(res.name);

total += parseFloat(res.value) * 10000;

});

total = total / 10000;

let option = {

title: {

zlevel: 0,

text: [

'{value|￥' + total + '}',

'{name|总金额}',

].join('\n'),

rich: {

value: {

color: '#303133',

fontSize: 40,

fontWeight: 'bold',

lineHeight: 40,

color: '#909399',

lineHeight: 20

top: 'center',

left: '145',

textAlign: 'center',

textStyle: {

rich: {

value: {

color: '#303133',

fontSize: 40,

fontWeight: 'bold',

lineHeight: 40,

color: '#909399',

lineHeight: 20

tooltip: { // 悬停指示

trigger: 'item',

formatter: "{b}: {c} ({d}%)"

legend: {

orient: 'vertical',

x: 'right',

data: dataName,

itemGap: 30,

top: 'middle',

align: 'left',

icon: 'circle',

formatter: function (name) {

return name;

}

series: [

{

type: 'pie',

radius: ['80%', '84%'],

center: [150, '50%'],

stillShowZeroSum: false,

avoidLabelOverlap: false,

zlevel: 1,

label: {

normal: {

padding: [30, 30, 30, 30],

backgroundColor: '#fff',

show: false,

position: 'center',

formatter: [

'{value|￥{c}}',

'{name|{b}}'

].join('\n'),

rich: {

value: {

color: '#303133',

fontSize: 40,

fontWeight: 'bold',

lineHeight: 40,

color: '#909399',

lineHeight: 20

emphasis: {

show: true,

textStyle: {

fontSize: '16',

fontWeight: 'bold'

}

data: data

}

color: ['#410ADF','#F42850','#F6A93B','#7ED321','#282828']

};

myChart.setOption(option);

}

setEchartsPie('echart', [

{ value: 300, name: '课程报名' },

{ value: 350, name: '服装收费' },

{ value: 250, name: '物料收费' },

{ value: 100, name: '其它收费' },

]);

</script>

统计	今日	昨日	本月	上月
暴力破解	4	8	199	79
扫描器	5	59	1167	1434
合计	9	67	1366	1513

javascript 2019.5.10 作者：张先生 39.1k 0 91

相关文章

热门文章

文章评论暂无评论

发表评论
取消

javascript 2019.5.10 作者：张先生 39.1k 0 91

相关文章

热门文章

文章评论 暂无评论

发表评论 取消

文章评论暂无评论

发表评论
取消