echarts-南丁格尔图

最新推荐文章于 2023-05-16 09:59:12 发布

妮酱也爱敲代码

最新推荐文章于 2023-05-16 09:59:12 发布

阅读量365

点赞数

文章标签： echarts html

本文链接：https://blog.csdn.net/lildn/article/details/113359988

版权

这篇博客展示了如何利用Echarts库创建一个南丁格尔玫瑰图，用于展示访问数据来源的分布情况。通过设置图表类型为pie，启用roseType参数为'angle'，并定义数据项和样式，实现了具有中心阴影效果的南丁格尔图。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>南丁格尔图</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:400px; height:400px; border: red 2px solid"></div>
<script type="text/javascript">
    //初始化
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(
        {   title:{text:'访问数据来源',left:'center'},//标题 center:居中
            series: [
                {
                    name: '访问来源',roseType:'angle',//改为南丁格尔图
                    center:['40%','60%'],//中心距离横向，纵向
                    type: 'pie', // 设置图表类型为饼图
                    radius: '55%', // 饼图的半径，
                    data: [ // 数据数组，name 为数据项名称，value 为数据项值
                        {value: 235, name: '视频⼴告'},
                        {value: 274, name: '联盟⼴告'},
                        {value: 310, name: '邮件营销'},
                        {value: 335, name: '直接访问'},
                        {value: 400, name: '搜索引擎'}],
                    itemStyle: {//底板阴影效果
                            normal: {
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'}}

                }
            ]
        }
    )

</script>
</body>
</html>