web数据可视化(Echarts版)5-11异步加载绘制饼图数据(代码仅供参考)

白日梦想家☜

已于 2023-06-06 23:28:57 修改

阅读量865

点赞数

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

于 2023-06-06 23:28:26 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/131078010

版权

HTML 专栏收录该内容

40 篇文章 11 订阅

订阅专栏

jquery-3.3.1.j文件下载地址:(17条消息) jquery-3.3.1.js的压缩包_L_fredoom的博客-CSDN博客

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="echarts.js"></script>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 700px; height: 500px"></div>
    <script type="text/javascript">
    //基于准备好的DOM，初始化ECharts图表
    var myChart = echarts.init(document.getElementById("main"));
    //指定图表的配置项和数据
    myChart.showLoading();     // 加载状态-开始
    var option = {
        color: ['red', 'blue', 'LimeGreen', 'Teal', 'Purple', 'Olive'],
        backgroundColor: 'rgba(128, 128, 128, 0.1)',   //rgba设置透明度为0.1
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        title: {   //配置标题组件
            text: '特色高水平专业群',   //设置主标题
            subtext: '各专业学生人数统计',   //设置次标题
            left: 'center',
            top: 8    //设置主、次标题都左右居中
        },
        series: [   //配置数据系列
            {
                name: '特高专业群之专业:',
                type: 'pie',     //设置图表类型为饼图
                radius: ['45%', '75%'],   //设置饼图内、外圆的半径
                center: ['50%', '58%'],    //设置圆心的位置
                data: [
                    {
                        "value": 490,
                        "name": "软件技术"
                    },
                    {
                        "value": 410,
                        "name": "计算机网络技术"
                    },
                    {
                        "value": 399,
                        "name": "大数据技术"
                    },
                    {
                        "value": 214,
                        "name": "人工智能技术"
                    },
                    {
                        "value": 196,
                        "name": "云计算技术"
                    },
                    {
                        "value": 123,
                        "name": "移动应用技术"
                    }
                ]
            }
        ]
    };
    // 加载状态2秒结束
    setTimeout(function(){
        myChart.setOption(option);
        myChart.hideLoading();
    },2000);
</script>
</body>
</html>