web数据可视化(Echarts版)2-14标准饼图(代码仅供参考)

白日梦想家☜

已于 2023-05-20 12:43:41 修改

阅读量435

点赞数 1

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-17 23:01:29 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63471474/article/details/130736881

版权

HTML 专栏收录该内容

40 篇文章

订阅专栏

该文章展示了如何在HTML页面中集成ECharts.js库，创建一个饼图来展示影响健康和寿命的因素分布，包括生活方式、遗传因素、社会因素、医疗条件和气候环境。通过ECharts提供的配置项和数据，实现了图例、提示框、工具箱等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts.js文件下载地址:Apache ECharts

<!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="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
    //基于准备好的DOM，初始化ECharts图表
    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: 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: '66%',  //设置半径
                center: ['58%','55%'],  //设置圆心
                clookWise: true,
                data: [  //设置数据的具体值
                    { value: 60, name: '生活方式'},
                    { value: 15, name: '遗传因素'},
                    { value: 10, name: '社会因素'},
                    { value: 8, name: '医疗条件'},
                    { value: 7, name: '气候环境'}
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>