JavaScript实现环形图echarts

最新推荐文章于 2023-05-30 17:54:23 发布

EBYB

最新推荐文章于 2023-05-30 17:54:23 发布

阅读量1.4k

点赞数 2

分类专栏： JavaScript 文章标签： echarts javascript vscode

本文链接：https://blog.csdn.net/qq_53326467/article/details/123698803

版权

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

echarts.js下载链接提取码：qj3ghttps://pan.baidu.com/s/1hEr_0IU1aom1Ag3hhpArTw

根据以下数据实现环形图

环形图数据
入会方式	数量
自愿	5
微信推广	2
团购促销	3
节日活动	4

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '会员入会渠道分布情况',
                textStyle:{color:"#008000",},
                backgroundColor:'#FFFF00',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical', 
                left: 62,
                top: 22,
                data: ['自愿', '微信推广', '团购促销', '节日活动']
            },
            toolbox: {
                show: true,
                left: 444,
                top: 28,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            series: [
                {
                    name: '入会渠道',
                    type: 'pie',
                    radius :[ '30%','60%'], //设置半径
                    center: ['58%', '55%'],  //设置圆心
                    clockWise: true,
                    data: [
                        { value: 5, name: '自愿' },
                        { value: 2, name: '微信推广' },
                        { value: 3, name: '团购促销' },
                        { value: 4, name: '节日活动' },
                    ]
                }
            ]
        };
        myChart.setOption(option); 
    </script>
</body>

</html>

效果图

EBYB

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript实现环形图echarts

echarts.js下载链接提取码：qj3ghttps://pan.baidu.com/s/1hEr_0IU1aom1Ag3hhpArTw根据以下数据实现环形图环形图数据入会方式数量自愿 5 微信推广 2 团购促销 3 节日活动 4 代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src=
复制链接

扫一扫