Echarts图表开发之饼图

最新推荐文章于 2024-08-02 16:35:26 发布

samile6899

最新推荐文章于 2024-08-02 16:35:26 发布

阅读量3.7k

点赞数

分类专栏： Echarts

本文链接：https://blog.csdn.net/samile6899/article/details/78589373

版权

本文介绍了使用Echarts在Java后台开发图表模块的经验，重点讲述了如何将官方Demo应用到项目中，并动态从后台加载数据。内容涵盖Echarts饼图的实现，包括引入JS文件、设置Options参数及与后台数据的交互。同时提到了在同一JSP页面中同时绘制饼图和折线图的场景。

摘要由CSDN通过智能技术生成

在相关的后台系统开发中，有一个必不可少的模块就是图表主题分析。通过图表分析，可以更加直观的展示业务的发展状态及各个业务占比情况，更加有利于公司领导做出相应的决策。在开发的最近一个项目中，有用到了Java 的 Echarts 开发其相应的后台图表主题分析模块功能。既然用到了，就概要的说下，希望以后在需要使用或者有其他人需要使用的话，只需要看下教程就可以立即上手操作使用，而不需要重新去看文档花掉很多时间。

序：在刚开始使用这个图表插件的时候，我一般是首先新建一个页面，然后的话把相应的官网Demo例子全文复制到该新建的页面中，然后运行该页面，观察其是否能够正常运行。如果不能运行的话，找出其相应的原因，总之最后把这个Demo例子先成功运行起来是开始学习的首要且重要的一件事。当你把下载下来的例子成功在你新建的页面中运行起来的时候，然后开始动态赋值，从后台动态加载数据，开始轻微的修改代码，与后台进行交互。做到这一点之后，前后台的数据填充和交互差不多就OK了，然后的话图表主题分析肯定是要有其相应的搜索条件，根据选择的搜索条件去动态的加载图表并重绘。这样的话一步步就差不太多了。（注：因为在项目中，我的饼图和折线图是在一个JSP页面中绘制的，所以的话下面的讲解都是基于一个JSP两个图表的分析）

***********************************************************************************

饼图和折线图：

1，引入JQuery minui 和 Echarts 相关的 js 文件并绘制相应的JSP图表界面；( JQuery mini 项目中有用到，没有用到可以不用引入 )

<head>
    <title></title>
    <script src="resource/js/boot.js" type="text/javascript"></script>
  </head>

<fieldset id="query_fieldset" style="">
	   <legend>查询结果</legend>
	   
	  <div style="width:99%;">
        <div class="ct" id="chart1" style="height:100%;width:96%;margin:0 auto;">></div>      
      </div> 
      <div style="width:99%;">
      <div id="chartContainer" style="height:100%;width:96%;">></div>
      </div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
	</fieldset>

2，引入 Echarts 饼图和折线图的 Options 参数并初始化图表；

  <script type="text/javascript">
    mini.parse();
    var chartPie = echarts.init(document.getElementById('chart1'));
    var chartCross = echarts.init(document.getElementById('chartContainer'));
	var form = new mini.Form("#queryForm");

	//=======初始加载 "饼图" 和 "折线图"数据=======
	var data = search();
	//====================================
	
    var option = {
    	title: {
            text: '业务饼图分析',
            subtext: '各类业务申请次数(人次)',
            textStyle: {
        		fontSize: '24