ECharts数据可视化（绘制环形图）

最新推荐文章于 2024-09-25 11:23:55 发布

殊迟

最新推荐文章于 2024-09-25 11:23:55 发布

阅读量1.8k

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_56814370/article/details/123944634

版权

大数据 echarts vscode

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px;background-color: aquamarine;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
        var option = {
            title: {
                text: '影响健康、寿命的各类因素',
                subtext: 'WHO统计调查报告',
                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:22,
                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:['45%','75%'],
                center:['58%','55%'],
                data: [
                    {value:60,name:'生活方式'},
                    {value:15,name:'遗传因素'},
                    {value:10,name:'社会因素'},
                    {value:8,name:'医疗条件'},
                    {value:7,name:'气候环境'},
                ]
            }
        ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px;background-color: aquamarine;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
        var option = {
            series: [
                {
                name: '专业名称',
                type: 'pie',
                radius:['10%','30%'],
                selectedMode:'single',
                label:{
                    posttion:'inner'
                },
                labelLine:{
                    show:false
                },
                data: [
                    {value:1200,name:'计算机学院'},
                    {value:900,name:'大数据学院'},
                    {value:600,name:'财经学院',selected:true}, 
                ]
            },
            {
                name: '专业名称',
                type: 'pie',
                radius:['40%','55%'],
                selectedMode:'single',
                data: [
                    {value:800,name:'生活方式'},
                    {value:400,name:'遗传因素'},
                    {value:500,name:'社会因素'},
                    {value:200,name:'医疗条件'},
                    {value:200,name:'气候环境'},
                    {value:400,name:'气候环境'},
                    {value:200,name:'气候环境'},
                ]
            }
        ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>