ECharts圆环图和饼图使用

最新推荐文章于 2025-03-07 20:03:41 发布

Amazing_deron

最新推荐文章于 2025-03-07 20:03:41 发布

阅读量1.9k

点赞数

分类专栏： Java 文章标签： ECharts

本文链接：https://blog.youkuaiyun.com/Deronn/article/details/88942420

版权

ECharts是一个适用于PC和移动设备的JavaScript可视化库，支持各种浏览器。它由百度开发，提供了丰富的数据图表。创建ECharts图表只需要引入js文件、设置div容器和编写数据。本文通过示例展示了如何创建圆环图，以及在Java后台如何处理不确定数量字段的饼状图。数据类EChartsData用于封装后台查询到的多列数据，供前端渲染使用。

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

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts

是百度的产品。。

ECharts使用十分简单，只要在页面引用js文件即可，然后在写一个给定长度和宽度的div装载图表，在使用js函数写入数据

即可。

圆环图实例(页面部分代码)：

<script type="text/javascript" src="<%=basePath%>/dorm/js/echarts.min.js"></script>
<div id="echartWrap" style="width: 50%;height:30%;float:left;">
</div>
<script type="text/javascript">
        $(function(){
               initEcharts();
        });

        /*初始化图表*/
        function initEcharts(){
              var myChart = echarts.init(document.getElementById('echartWrap'));
              var option =  {
				        title : {
					        text: '男女比例分析',

最低0.47元/天解锁文章