echarts圆环图中间添加背景图

最新推荐文章于 2024-10-10 09:31:33 发布

前端小咸鱼一条

最新推荐文章于 2024-10-10 09:31:33 发布

阅读量4.5k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/xiaoxiannvh/article/details/131152433

版权

 **1.  设置两个series,一个series正常显示圆环图，另外一个圆环图设置背景图，通过label的富文本自定义样式来设置背景图
            - 设置第二个圆环：
                 - 在data中设置value为100%，
                 - 设置label的自定义富文本，并设置文字居中显示，位置居中显示
                         - 关于背景图的宽高设置，通过echarts获取画布的大小，根据看图得知位置偏左，width/2 - (减去grid.left,自行调整)
                 - 并把当前(第二个)圆环图的层级设置低一点,例如：z:1，圆环图默认的层级是2，所以第二个层级设置成1
2.  想要缩放的时候依旧保持原来不变,  通过监听浏览器窗口大小变化事件，把option在设置一遍

原图：
在这里插入图片描述

demo图：
在这里插入图片描述

在这里插入图片描述

核心代码：


 {
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['60%', '60%'],
                    hoverAnimation:false,
                    silent:true
                    data: [{
                        value: 100,
                        z: 1,
                        label: {
                            show: true,
                            position: 'center',
                            formatter: () => {
                                return `{bg|}`
                            },
                            rich: {
                                bg: {
                                    left: 'center',
                                    width: (width / 2)-10,
                                    height: (width / 2)-10,
                                    backgroundColor: {
                                        image: './pie-center-bg.png'
                                    }
                                }
                            }
                        }

                    }],data: [{
                        value: 100,
                        z: 1,
                        label: {
                            show: true,
                            position: 'center',
                            formatter: () => {
                                return `{bg|}`
                            },
                            rich: {
                                bg: {
                                    left: 'center',
                                    width: (width / 2)-10,
                                    height: (width / 2)-10,
                                    backgroundColor: {
                                        image: './pie-center-bg.png'
                                    }
                                }
                            }
                        }

                    }],


}

完整代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.common.js"></script>
    <!-- <script src="./node_modules/requirejs/re"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
    <script type="text/javascript" src="https://requirejs.org/docs/release/2.3.6/r.js"></script>

</head>

<body>
    <div id="echarts01" style="width: 600px;height: 400px;background-color: #0e1842;"></div>
    <script>

        const echartDom = document.getElementById('echarts01')
        const mychart = echarts.init(echartDom)
        const data = [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ]

        const width = mychart.getWidth()
        option = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            grid: {
                bottom: '10px',
                left: '10px',
            },
            series: [
                {
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['50%', '60%'],
                    data: data,
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    z:10,
                    backgroundColor:'transparent',
                    label: {
                        show: false,
                        color: '#fff',
                        position: 'center',
                        formatter: (params) => {
                            return `{num|${params.percent}%}\n\n{name|${params.name}}`
                        },
                        rich: {
                            color: '#fff',
                            name: {
                                fontSize: 14,
                            },
                            num: {
                                fontSize: 18,
                                fontWeight: 'bolder',
                            }
                        }
                    }
                },
                {
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['60%', '60%'],
                    hoverAnimation:false,//鼠标经过的动画 
                    animation:false,
                    selectedMode:false,
                    silent:true, //不响应和触发鼠标事件
                    tooltip: {
                        show: false
                    },
                    itemStyle:{
                        normal:{
                            label:{show:false},
                            labelLine:{show:false},
                            color:'rgba(255,144,0,0.4)'
                        }
                    },
                    data: [{
                        value: 100,
                        z: 1,
                        label: {
                            show: true,
                            position: 'center',
                            formatter: () => {
                                return `{bg|}`
                            },
                            rich: {
                                bg: {
                                    left: 'center',
                                    width: (width / 2)-10,
                                    height: (width / 2)-10,
                                    backgroundColor: {
                                        image: './pie-center-bg.png'
                                    }
                                }
                            }
                        }

                    }],
                }

            ]
        };

        mychart.setOption(option)

        function resizeEcharts() {
            mychart.setOption(option)
        }
        window.addEventListener('resize', resizeEcharts)
    </script>
</body>

</html>