echarts-圆环图

最新推荐文章于 2025-07-24 09:55:45 发布

梦想能成真吗

最新推荐文章于 2025-07-24 09:55:45 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43678480/article/details/86774959

本文介绍如何使用ECharts库创建动态更新的圆环图，包括生成随机数据、图表配置和样式设置，适用于展示实时数据变化。

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

1、问题背景

利用echarts制作一个圆环图，图的容器动态生成，图的数据源利用随机数动态变化，模拟后台获取数据

2、实现源码

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>echarts-圆环图</title>  <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">  <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>  <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>  <style>   body,html{    width: 99%;    height: 99%;    font-family: "微软雅黑";    font-size: 12px;   }   #pie{    width: 100%;    height: 80%;   }  </style>  <script>   $(document).ready(function(){    randomData();   });      //产生随机数   function randomData()   {    var first = (Math.random()*1000+1000).toFixed(2);    var second = (Math.random()*1000+1000).toFixed(2);    var third = (Math.random()*1000+1000).toFixed(2);    var fourth = (Math.random()*1000+1000).toFixed(2);    var chartId = Math.floor(Math.random()*1000+10000);    var pieName = ['第一季度','第二季度','第三季度','第四季度'];    var pieValue = new Array();    pieValue.push(first);    pieValue.push(second);    pieValue.push(third);    pieValue.push(fourth);    $("#bodyDiv").empty().append("<div id='pie"+chartId+"' style='width:100%;height:100%;'></div>");        buildChart(pieName,pieValue,chartId);   }      //生成圆环图   function buildChart(pieName,pieValue,chartId)   {    var pieData = new Array();    for(var i=0;i<pieName.length;i++)       {        pieData.push(eval('(' + ("{'value':"+pieValue[i]+",'name':'"+pieName[i]+"'}") + ')'));       }    var pieChart = document.getElementById("pie"+chartId);    var echart = echarts.init(pieChart);    var option =  {        title : {            text: '一年四季收入比例',            x:"center"        },        tooltip : {            trigger: 'item',            formatter: "{a} <br/>{b} : {c} ({d}%)"        },        legend: {            orient: 'horizontal',            x:"center",            y:"bottom",            data: pieName        },        series : [            {                name: '季度',                type: 'pie',                radius : ['50%','70%'],                center: ['50%', '50%'],                data:pieData,                itemStyle: {                    emphasis: {                        shadowBlur: 10,                        shadowOffsetX: 0,                        shadowColor: 'rgba(0, 0, 0, 0.5)'                    }                }            }        ]    };        echart.setOption(option);   }      //window.setInterval(randomData(),1000);  </script> </head> <body id="bodyDiv">   </body></html>