echarts环形图-前端ABC

封装一个echarts环形图的函数，两个参数，数据data和id，可改为类名复用。看代码，外部引用echarts.js文件

配置项：
控制圆的大小宽度：series.radius，例如[‘80%’, ‘90%’]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qdabc.cn</title>
</head>
<body>
<div id="demo" style="width: 400px;height: 400px;border: 1px solid antiquewhite;margin:0 auto;background-color:#f5f5f5;"></div>
</body>
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
<script>

    pieShow(75,'demo');

    function pieShow(data, id) {
        var pieId = echarts.init(document.getElementById(id));
// 指定图表的配置项和数据
        var pieId_option = {
             tooltip: {
                 trigger: 'item',
                 formatter: "{a} <br/>{b}: {c} ({d}%)"
             },
            color: ["#ff7f50", "#243c77"],
            series: [
                {
                    name: '收入完成率',
                    type: 'pie',
                    radius: ['60%', '80%'],
                    label: {
                        normal: {
                            show: true,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    itemStyle: {
                        //柱形图圆角，鼠标移上去效果
                        emphasis: {
                            barBorderRadius: [900],
                            pieBorderRadius: [900]
                        },
                        normal: {
                            //柱形图圆角，初始化效果
                            barBorderRadius: [900],
                            pieBorderRadius: [900]
                        }
                    },
                    data: [
                        {value: parseInt(data)},
                        {value: 100 - data}
                    ]
                }
            ]
        };
// 使用刚指定的配置项和数据显示图表。
        pieId.setOption(pieId_option);
    }
</script>
</html>

欢迎分享本文，转载请保留出处：前端ABC » echarts环形图

echarts环形图

相关推荐

发表评论 0