echarts饼图中插入图片

效果图:
在这里插入图片描述
实现代码:

function getPieOption (data) {
    var imageArr = [
        './img/officeSupplies_04.gif',
        './img/officeSupplies_06.gif'
    ];
    if (!data[0]) imageArr[0] = '';
    if (!data[1]) imageArr[1] = '';
    var seriesData = [
        {
            value: data[0],
            name: '办公固定资产',
            label: {
                formatter: [
                    '  {image|}'
                ].join('\n'),
                position: 'inner',
                rich: {
                    image: {
                        height: 25,
                        backgroundColor: {
                            image: imageArr[0]
                        }
                    }
                }
            }
        },
        {
            value: data[1],
            name: '重点低质易耗品',
            label: {
                formatter: [
                    '  {image|}'
                ].join('\n'),
                position: 'inner',
                rich: {
                    image: {
                        height: 20,
                        backgroundColor: {
                            image: imageArr[1]
                        }
                    }
                }
            }
        }
    ];
    return option = {
        tooltip: {
            trigger: 'item',
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            left: 'center',
            top: 'bottom',
            data: ['办公固定资产', '重点低质易耗品']
        },
        grid: {
            top: '3%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
        },
        color: ['#87bdfb', '#a49ef8'],
        series: [
            {
                name: '办公物资存量',
                type: 'pie',
                radius: '70%',
                center: ['50%', '40%'],
                data: seriesData,
                emphasis: {
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 2,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle:{
                    borderWidth:2,
                    borderColor:'#fff',
                }
            }
        ]
    };    
}
调用:
var assetsLChart = echarts.init(document.getElementById('assetsLChart'));
assetsLChart.setOption(getPieOption([335, 250]));
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值