精华内容
下载资源
问答
  • 另存完之后关闭word文档,使用文本编辑器编写表达式替换显示的图片或表格数据,将演示文档.xml的后缀修改为.ftl,然后使用文本编辑器打开demo.ftl文件 3、修改.ftl文件并生成最终的模板文件 ① 修改图片的数据...

    一、制作.ftl后缀的word模板文件

    1、新建一个word文档模板

    2、将word文档另存为xml并改名为.ftl后缀的文件

     

    另存完之后关闭word文档,使用文本编辑器编写表达式替换显示的图片或表格数据,将演示文档.xml的后缀修改为.ftl,然后使用文本编辑器打开demo.ftl文件

    3、修改.ftl文件并生成最终的模板文件

    ① 修改图片的数据内容使用表达式代替

    替换之后如下:

    ② 在数据表格中添加循环标签

    二、通过模板文件生成word文档

    1.在echarts.jsp添加一个Echarts图形报表

    var myChart,option;
         //获取图表位置
         myChart = echarts.init(document.getElementById("main"),'infographic');
         myChart.showLoading({  
             text : "图表数据正在努力加载..."  
         }); 
         option = {
                 animation:false,
                 title : {
                     text: '项目阶段分布情况分析',
                     //subtext: '饼状图',
                     x:'center'
                 },
                 tooltip : {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 //color:['red', 'green','yellow','blueviolet'],
                 legend: {
                     //orient: 'vertical',竖向
                     //left: 'left',左边
                     bottom: 10,
                     left: 'center',
                     data: ['在谈','签约','开工','投产']
                 },
                 toolbox: {
                     feature: {
                             mark : {show: true},
                             //magicType : {show: true, type: ['line', 'bar','stack','tiled']},
                             //dataView : {show: true, readOnly: false},
                            /*  magicType : {
                               show: true, 
                               type: ['pie', 'funnel'],
                               option: {
                                   funnel: {
                                       x: '25%',
                                       width: '50%',
                                       funnelAlign: 'left',
                                       max: 1700
                                   }
                               }
                             }, */
                             restore : {show: true},
                             saveAsImage : {show: true}
                     }
                 },
                 series : [
                     {
                         name: '项目数',
                         type: 'pie',
                         radius : '55%',
                         center: ['50%', '50%'],
                         data:[
                             {value:335, name:'在谈'},
                             {value:310, name:'签约 '},
                             {value:234, name:'开工'},
                             {value:135, name:'投产'},
                         ],
                         itemStyle: {
                             emphasis: {
                                 shadowBlur: 10,
                                 shadowOffsetX: 0,
                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
                             },
                             normal:{ 
                                 label:{ 
                                   show: true, 
                                   formatter: '{b} : {c}\n ({d}%)' ,
                                   length:5
                                 }, 
                                 labelLine :{show:true} 
                               } 
                         }
                     }
                 ]
                // color: ['rgb(254,67,101)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)']
             };

           setTimeout(function(){
           //  lineCharts.hideLoading();//取消loading
            // lineCharts.setOption({});//载入设置
             myChart.hideLoading();  
             myChart.setOption(option);//将图表内容格式内容放入到myChart位置
           //获取Echart图形报表生成的Base64编码格式的数据
             var imgData = myChart.getConnectedDataURL();
             $.post('xiangMuTongJiAction!generateWord',{'imgData':imgData},function (data) {
                 alert(data);
             },'json');
             },3000);

    2、后台处理请求并设置模板数据

     /**
         * 将echarts图表导入word
         * @param imgData
         * @return
         */
        public String generateWord(){
            String imgData = request.getParameter("imgData");
            //传递过程“+”变为了“”,所以需要替换
            String newImageInfo = imgData.replaceAll(" ", "+");
            // 数据中:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ...
            // 在"base64,"之后的才是图片信息
            String[] arr = newImageInfo.split("base64,");
            
            //添加模板数据
            Map<String,Object> dataMap = new HashMap<String,Object>();
            dataMap.put("userName", "张三");
            dataMap.put("imgData", arr[1]);
            
            FdipJiLian fdipJiLian1 = new FdipJiLian();
            fdipJiLian1.setId("1");
            fdipJiLian1.setName("name1");
            FdipJiLian fdipJiLian2 = new FdipJiLian();
            fdipJiLian2.setId("2");
            fdipJiLian2.setName("name2");
            FdipJiLian fdipJiLian3 = new FdipJiLian();
            fdipJiLian3.setId("3");
            fdipJiLian3.setName("name3");
            List<FdipJiLian> fdipJiLianList = new ArrayList<FdipJiLian>();
            fdipJiLianList.add(fdipJiLian1);
            fdipJiLianList.add(fdipJiLian2);
            fdipJiLianList.add(fdipJiLian3);
            dataMap.put("fdipJiLianList",fdipJiLianList); 
            //文件生成路径
            String wordFilePath = "D:\\ftl";
            //文件生成名称(因为是2003版本的xml模板,这里使用.doc后缀,如果使用.docx后缀生成的文件有问题)
            String wordFileName = "演示文档.doc";
            //模板路径
            String templatePath = "D:\\ftl";
            //模板文件名称
            String templateFileName = "demo.ftl";
            
            //生成word文档
            WordUtil.writeWordReport(wordFilePath, wordFileName, templatePath, templateFileName, dataMap,response);
            return null;
        }

    4、生成word文档的工具类方法

     /**
         * 根据freemarker生成word文档并存到指定目录
         * @param wordFilePath word文件生成的目录
         * @param wordFileName word文件名
         * @param templatePath 模板文件所在的目录
         * @param templateFileName 模板文件名
         * @param beanParams 生成word文件所需要的模板数据
         * @return
         */
        public static String writeWordReport(String wordFilePath,String wordFileName,
            String templatePath,String templateFileName, Map<String, Object> beanParams,HttpServletResponse response) {
            Configuration config = new Configuration(Configuration.getVersion());
    //        Writer out = null;
            try {
                config.setDirectoryForTemplateLoading(new File(templatePath));
                Template template = config.getTemplate(templateFileName, "UTF-8");
     
                //获取文件目录,如果不存在则创建
                String filePath = "";
                int index = wordFilePath.lastIndexOf(File.separator);
                if(index != wordFilePath.length()-1){
                    filePath = wordFilePath+ File.separator;
                }else {
                    filePath = wordFilePath;
                }
                File file1 = new File(filePath);
                if(!file1.exists()){
                    file1.mkdirs();
                }
     
                //方式一:输出文件将文件保存在本地磁盘
                /*File file = new File(filePath+wordFileName);
                FileOutputStream fos = new FileOutputStream(file);
                out = new OutputStreamWriter(fos, "UTF-8");
                template.process(beanParams, out);*/
                
                //方式二:实现文件web端下载
                //文件名
                String fileName =wordFileName;
                // 前端响应(HttpServletResponse)
                response.setCharacterEncoding("UTF-8");
                response.setContentType("application/vnd.ms-word");
                response.setHeader("Content-disposition", "attachment;filename="+new String(fileName.getBytes("gb2312"), "ISO8859-1" ));
    //            response.setContentType("application/octet-stream; charset=UTF-8");  
    //            response.setHeader("content-disposition", "attachment;filename=" + new SimpleDateFormat("yyyyMMddHH:mm:ss").format(new Date()) + ".doc");
                Writer out = new BufferedWriter(new OutputStreamWriter(response.getOutputStream(),"utf-8"));//重点:一定要注意编码格式,漏写编码格式将导致word无法打开(xml非法字符)       
                // 写入数据
                template.process(beanParams, out);
                out.flush();
                out.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
            return null;
        }

    终于完成,参考资料链接如下:

    https://blog.csdn.net/zianY/article/details/84982607

    https://blog.csdn.net/shen525758203/article/details/48653715

    展开全文
  • Django + echarts 实现报表可视化

    千次阅读 2019-06-27 22:08:02
    1、 百度开源的报表可视化组件echarts是主流的开源前端工具,功能强大,配置简单,报表由数据驱动,只要按照指定格式给出数据,就能形成报表。 2、 Django是当前主流的pythonWEB框架,配置简单,适合微型web服务的.....

    一、背景:数据可视化的好处无须多说。启动这个项目的初衷是系统运营报表需要运维手动执行sql,写入excel表格,制作过程繁琐、耗时,且手动操作数据库风险较高。
    二、思路:
    1、 百度开源的报表可视化组件echarts是主流的开源前端工具,功能强大,配置简单,报表由数据驱动,只要按照指定格式给出数据,就能形成报表。
    2、 Django是当前主流的pythonWEB框架,配置简单,适合微型web服务的构建。
    三、开发环境搭建:
    1、 下载echarts组件: https://echarts.baidu.com/download.html
    可以选择在线定制,选择需要的图表类型即可,完整版会比较大。
    2、 Django环境搭建:pycharm+python3.7
    A、 在pycharm里面新建一个django项目ops;
    B、 安装依赖包cx-Oracle(根据不同数据库安装不同的依赖包,这里以oracle为例);
    C、 在新建的ops项目根目录下建一个app,python manage.py startapp report;
    D、 在ops项目根目录下新建static目录,将下载的echarts.min.js复制过去;
    E、 配置主应用ops下的 settings,主要配置一下几项:
    a) INSTALLED_APPS项,加入新建的report应用;
    b) DATABASES配置数据库信息;
    c) 配置静态文件路径,增加如下配置:

    	STATIC_URL = '/static/'
    	
    	STATICFILES_DIRS = [
    	    os.path.join(BASE_DIR,'static')
    	]
    

    到这里开发环境就搭建完成了。
    四、前端页面
    echarts官网提供了详细的配置和API文档,以及丰富的模板。本人学习echarts的方式是,根据需求选择适合的模板,再根据具体的自定义需求修改模板,修改过程查找参考官方文档。且官网支持在线修改,非常方便查看效果。
    1、 在templates下新建一个html文件如下:
    写一个div来初始化echarts
    在这里插入图片描述
    2、 选择模板:
    这里我选择了一个比较契合需求的模板:https://echarts.baidu.com/examples/editor.html?c=dataset-link
    观察左边的js代码,分为3部分:
    option对象:报表实例配置项,定义了报表的类型,源数据等,可以多次定义。
    重要参数说明:
    tooltip:触发事件,可以配置鼠标悬浮或点击选择坐标轴或点触发;
    dataset:数据源,可以多个图表共用;
    xAxis、yAxis:坐标轴,可以设置多个坐标系;
    grid:图表位置;
    series:图表
    myChart.on:报表实例的坐标轴触发事件,可以添加自定义动作。
    myChart.setOption:根据option渲染表格。
    3、 static/report下新建dayReport.js文件
    初始化一个echarts对象
    myChart = echarts.init(document.getElementById(‘main’));
    将上一步页面中的4到63行复制到js文件中。

    五、后台代码
    1、配置url:
    配置ops主应用下的urls,导入django.conf.urls下的url和include,将url分发到子应用。增加配置如下:

    	url(r'^report/',include('report.urls'))
    

    然后在report的urlpatterns配置:

    	path('dayReport/',views.getDayReport)
    

    2、 在report的views.py新建getDayReport方法,返回dayReport.html.

    def dayReport(request):
    		return render(request,"dayReport.html")
    

    3、 启动项目,访问http://127.0.0.1:8000/report/getDayReport
    可以看到官网的页面已经可以呈现了。

    六、动态数据
    以上操作只是把echarts静态页面通过django发布到页面,显然不符合使用场景,我们需要对前后端代码进行改造。
    1、dayReport.js:对于option里面的dataset数据,需要通过ajax请求来获取后再赋值。去掉option定义里面的dataset:

    	$.get('getData').done(function (data){
        var dataSour = $.parseJSON(data);
        myChart.setOption({
            dataset: [
                {source: dataSour.source},
            ], 
        });
    

    获取到数据后,调用报表的setOption方法来更新数据。
    2、report的urls.py加上请求分发。
    3、report的views.py增加getData方法,改方法主要是去数据库查询数据,组装成一个二维数组,返回json格式数据到前端。
    Django支持ORM映射,数据库和model对应,可以很方便的查询。但是很多情况下报表数据是根据不同的表查询计算得到的结果。
    数据转换成二维数组的时候会有点绕,需要调试的时候一步步查看详细数据结构。
    详细代码涉及到公司的隐私信息,这里只贴一下关键逻辑。具体的代码还要根据具体需求和数据库sql结果来。
    在这里插入图片描述

    最后贴一张日报的效果图:
    打开时会查询今天到7天前的数据,需要的话可以通过页面传入查询时间段。
    鼠标移动到具体某一天,饼图会展示这一天各渠道的比例。
    最下方是销量总计。
    在这里插入图片描述
    七、总结
    1、项目的难点在于图表类型确定,要用尽可能少的图表,清晰表达出需要的内容;
    2、echarts的熟悉需要一定的时间,遇到问题多看官方文档;
    3、数据的查询转换代码和逻辑都还比较繁琐,还有进一步优化的空间;
    5、本文只提供了一些简单的思路,欢迎大佬指点。

    展开全文
  • <artifactId>freemarkerartifactId> <version>2.3.23version> dependency> 2、index.jsp中添加一个Echarts图形报表 var option = { angleAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五',...

    转载:https://blog.csdn.net/Alexshi5/article/details/84437300

    一、制作.ftl后缀的word模板文件

    1、新建一个word文档模板

            

    使用其他文本编辑器编写表达式,如:Editplus

     

     2、将word文档另存为xml并改名为.ftl后缀的文件

    另存完之后关闭word文档,将demo.xml的后缀修改为.ftl,然后使用文本编辑器打开demo.ftl文件

    3、修改.ftl文件并生成最终的模板文件

    ① 修改图片的数据内容使用表达式代替

    替换之后如下:

    ② 在数据表格中添加循环标签

     二、通过模板文件生成word文档

    1、添加pom.xml的依赖

    1. <dependency>
    2. <groupId>org.freemarker</groupId>
    3. <artifactId>freemarker</artifactId>
    4. <version>2.3.23</version>
    5. </dependency>

    2、index.jsp中添加一个Echarts图形报表

    1. var option = {
    2. angleAxis: {
    3. type: 'category',
    4. data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    5. z: 10
    6. },
    7. radiusAxis: {
    8. },
    9. polar: {
    10. },
    11. series: [{
    12. type: 'bar',
    13. data: [1, 2, 3, 4, 3, 5, 1],
    14. coordinateSystem: 'polar',
    15. name: 'A',
    16. stack: 'a'
    17. }, {
    18. type: 'bar',
    19. data: [2, 4, 6, 1, 3, 2, 1],
    20. coordinateSystem: 'polar',
    21. name: 'B',
    22. stack: 'a'
    23. }, {
    24. type: 'bar',
    25. data: [1, 2, 3, 4, 1, 2, 5],
    26. coordinateSystem: 'polar',
    27. name: 'C',
    28. stack: 'a'
    29. }],
    30. legend: {
    31. show: true,
    32. data: ['A', 'B', 'C']
    33. }
    34. };
    35. var myChart = echarts.init(document.getElementById("content"));
    36. myChart.setOption(option);
    37. //获取Echart图形报表生成的Base64编码格式的数据
    38. var imgData = myChart.getConnectedDataURL();
    39. $.post('/demo/word',{'imgData':imgData},function (data) {
    40. alert(data);
    41. },'json');

    3、后台处理请求并设置模板数据

    1. @Controller
    2. @RequestMapping("/demo")
    3. public class DemoController {
    4. @RequestMapping("/word")
    5. @ResponseBody
    6. public String generateWord(String imgData){
    7. // 传递过程中 "+" 变为了 " " ,所以需要替换
    8. String newImageInfo = imgData.replaceAll(" ", "+");
    9. // 数据中:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ...
    10. // 在"base64,"之后的才是图片信息
    11. String[] arr = newImageInfo.split("base64,");
    12. //添加模板数据
    13. Map<String,Object> dataMap = new HashMap<>();
    14. dataMap.put("userName","张三");
    15. dataMap.put("imgData",arr[1]);
    16. Person person1 = new Person("李四", "男", 36, "18811240001");
    17. Person person2 = new Person("王五", "女", 22, "18811240002");
    18. Person person3 = new Person("赵六", "男", 46, "18811240003");
    19. List<Person> personList = new ArrayList<>();
    20. personList.add(person1);
    21. personList.add(person2);
    22. personList.add(person3);
    23. dataMap.put("personList",personList);
    24. //文件生成路径
    25. String wordFilePath = "E:\\ftl";
    26. //文件生成名称(因为是2003版本的xml模板,这里使用.doc后缀,如果使用.docx后缀生成的文件有问题)
    27. String wordFileName = "演示文档.doc";
    28. //模板路径
    29. String templatePath = "E:\\ftl";
    30. //模板文件名称
    31. String templateFileName = "demo.ftl";
    32. //生成word文档
    33. Boolean result = WordUtil.writeWordReport(wordFilePath, wordFileName, templatePath, templateFileName, dataMap);
    34. if(result){
    35. return "success";
    36. }else {
    37. return "error";
    38. }
    39. }
    40. }

    4、生成word文档的工具类方法

    1. /**
    2. * 根据freemarker生成word文档并存到指定目录
    3. * @param wordFilePath word文件生成的目录
    4. * @param wordFileName word文件名
    5. * @param templatePath 模板文件所在的目录
    6. * @param templateFileName 模板文件名
    7. * @param beanParams 生成word文件所需要的模板数据
    8. * @return
    9. */
    10. public static Boolean writeWordReport(String wordFilePath,String wordFileName,
    11. String templatePath,String templateFileName, Map<String, Object> beanParams) {
    12. Configuration config = new Configuration(Configuration.getVersion());
    13. Writer out = null;
    14. try {
    15. config.setDirectoryForTemplateLoading(new File(templatePath));
    16. Template template = config.getTemplate(templateFileName, "UTF-8");
    17. //获取文件目录,如果不存在则创建
    18. String filePath = "";
    19. int index = wordFilePath.lastIndexOf(File.separator);
    20. if(index != wordFilePath.length()-1){
    21. filePath = wordFilePath+ File.separator;
    22. }else {
    23. filePath = wordFilePath;
    24. }
    25. File file1 = new File(filePath);
    26. if(!file1.exists()){
    27. file1.mkdirs();
    28. }
    29. //输出文件
    30. File file = new File(filePath+wordFileName);
    31. FileOutputStream fos = new FileOutputStream(file);
    32. out = new OutputStreamWriter(fos, "UTF-8");
    33. template.process(beanParams, out);
    34. return true;
    35. } catch (Exception e) {
    36. e.printStackTrace();
    37. return false;
    38. }finally{
    39. try {
    40. if(out != null) {
    41. out.close();
    42. }
    43. } catch (IOException e) {
    44. e.printStackTrace();
    45. }
    46. }
    47. }

    5、最终生成的word文档如下:

     

    6、补充一:解决传空值导致程序报空指针异常的问题

            如果生成文档时报如下错误:

            Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??

            这有可能是你在传值过程中传了空值,导致模板引擎无法获取参数值,这时可以将表达式更改为${person.name?default('')}这种形式,这个表达式的意思是如果为空值就替换成'', 这样即便不小心传了空值也不会导致程序出错。

    7、补充二:解决导出图片缺失或图片不完整问题

            实际开发中会遇到有一些图形报表导出图片时不完整,比如:折线图导出时只有点却没有线条,这是由于折线图有动画,而生成的图片是在动画还未结束时就生成的。解决方法就是在配置项中关闭动画效果。

    8、补充三 :解决循环添加多张图片重复问题

            按照上面的思路,既然可以循环添加数据,那肯定也可以循环添加图片,但是当我们使用循环标签添加图片时,却发现生成的多张图片都是一样的,这是由于我们没有修改模板文件中的图片标签的属性导致的。需要修改的地方有两个一个是:<w:binData></w:binData>标签的w:name属性,一个是:<v:imagedata></v:imagedata>标签的src属性。示例如下:

             上面这个属性的含义指的是当前文档的第几张图片,如果我们的图片集合数据从下标0开始则这里的后缀要修改成"下标+1"的形式。伪代码示例如下:

    1. <#list dataList as obj> <!--循环开始,obj_index代表当前循环对象的索引,从下标0开始-->
    2. <!--伪代码-->
    3. <w:binData w:name="${"wordml://0300000"+ obj_index+1 +".png"}" xml:space="preserve">${obj.imgUrl?default('')}</w:binData>
    4. <v:imagedata src="${"wordml://0300000"+ obj_index+1 +".png"}" o:title=""/>
    5. <#/list> <!--循环结束-->

             如果文档前面已经有一张图片了,然后才开始循环图片呢?那循环开始的图片就是当前文档的第二张图片,那后缀就要改成“下标+2”的形式,以此类推。示例如下:

    参考:

    1、制作freemarker模板文件生成word文档

    2、前端EChart图表转换为图片保存到服务器路径

    3、使用JFreeChart做成柱状图写入word的总结

    4、freemarker教程之list循环

    5、FreeMarker 对null值的处理技巧

    6、freemarker 图片输出、多张图片输出(图片重复原因及解决)

    展开全文
  • 这几天在做统计方面 需要用到一些报表 用的也是ECharts,多个图表在一起显示,相当于多个option在一起显示, 一般见得多的是一个series对应一个legend或者是多个series对应一个legend, 但是现在有个需求就是多个...

    这几天在做统计方面 需要用到一些报表 用的也是ECharts,多个图表在一起显示,相当于多个option在一起显示, 

    一般见得多的是一个series对应一个legend或者是多个series对应一个legend,

    但是现在有个需求就是多个series对应多个legend,经过尝试提供一种option写法:

    先上个效果图:

    直接复制到ECharts官网调试即可

    option = {
        title: [
            {
              left: 'left',
            y: '20%',
            text: '南丁格尔玫瑰图',
            subtext: '纯属虚构',
        },
        {
            text: '南丁格尔玫瑰图1',
            subtext: '纯属虚构',
            x: '60%',
            y: '2%'
        },{
            text: '南丁格尔玫瑰图2',
            subtext: '纯属虚构',
            x: '60%',
            y: '50%'
        }
        ],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: [
            {
                orient: 'vertical',
                left: 'left',
                y: '40%',
                data: ['rose1', 'rose2', 'rose3', 'rose4']
            }, {
                 orient: 'vertical',
                right: 'left',
                y: '10%',
                data: ['rose1', 'rose2', 'rose3', 'rose4']
            },
            {
                orient: 'vertical',
                right: 'left',
                y: '60%',
                data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5']
            } 
        ],
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series: [
            {
                name: '面积模式',
                type: 'pie',
                radius: [30, 110],
                center: ['25%', '50%'],
                roseType: 'area',
                data: [
                    {value: 10, name: 'rose1'},
                    {value: 5, name: 'rose2'},
                    {value: 15, name: 'rose3'},
                    {value: 25, name: 'rose4'}
                ]
            },
            {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '25%'],
            data: [
                    {value: 10, name: 'rose1'},
                    {value: 5, name: 'rose2'},
                    {value: 15, name: 'rose3'},
                    {value: 25, name: 'rose4'}
                ]
            }, 
            {
                type: 'pie',
                radius: [0, '30%'],
                center: ['75%', '75%'],
                
                data: [
                    {value: 10, name: 'rose1'},
                    {value: 5, name: 'rose2'},
                    {value: 15, name: 'rose3'},
                    {value: 25, name: 'rose4'},
                    {value: 25, name: 'rose5'}
                ]
            }
        ]
    };
    

    如果有更好的写法可以留言分享噢!!!  如果有错误请大家指出, 我会及时更新!!!!!

    展开全文
  • Echarts可视化工具很方便的解决了统计图表的问题,但是微信小程序是不支持DOM操作,后来在Echarts官网找到了微信小程序的版本。开始上代码了,首先要在index.wxml中定义,我要在一个页面中使用两个图表!--index.wxml...
  • 这篇文章主要介绍了PHP 使用Echarts生成数据统计报表的实现代码,需要的朋友可以参考下echarts统计,简单示例先看下效果图看下代码HTML页面 为ECharts准备一个Dom,宽高自定义js文件可以参考官网,或者在这里下载,...
  • 这篇文章主要介绍了PHP 使用Echarts生成数据统计报表的实现代码,需要的朋友可以参考下echarts统计,简单示例先看下效果图看下代码HTML页面 为ECharts准备一个Dom,宽高自定义js文件可以参考官网,或者在这里下载,...
  • echarts统计,简单示例先看下效果图 看下代码HTML页面 为ECharts准备一个Dom,宽高自定义js文件可以...$(document).ready(function () {// 绘制反馈量图形var init_echarts = function () {var refreshChart = fun...
  • 在JAVA程序中,用ECharts做的报表用什么方法导出成excel文档表格???急急急急
  • 引言:在实际项目统计报表模块中,报表的内容不单单只有数据,用户为了更能直观的观察数据,往往还提出将...本篇文章主要说明如何使用Apache POI导出echarts图表到Excel表格,详细导出数据步骤在我的另一篇博文中...
  • 报表在实际项目中,应该属于必不可少的部分,针对如何显示更直观,有的是用表格,有的使用绘图的形式,给客户提供出平台的一些收益情况。对于绘图这类的插件,今天我们是使用的是echarts插件,进行讲解。可以通过...
  • 本套教程采用vs2012+sql2012开发,以销售明细表为例,讲解了常见报表的开发过程,既包含了传统的表格形式的报表、又包含了柱状图(条形图)、饼状图、环形图、南丁格尔图、曲线图、折线图、面积图等,前端使用ajax...
  • 背景 有次聊天,突然遇到Echarts跟JasperReport是不是一样... ...报表=表格+图表 图表=图表 由此公式,很直观的确定,图表工具只是报表引擎的一部分内容。 2、数据加工能力的区别 报表,可以对原数据进行深度加...
  • 最近接触前端,要写个报表,但是由于公司用的是echarts-plain.js,导致我在网上找到的许多属性设置的东西由于就是不同而失去作用. 使用echarts-plain.js时,dataView不会显示表格,只会显示文字.如果想要显示表格的话,...
  • 最近工作中使用Echarts开发报表的时候遇到了这样的一个问题,需求是一个div中左边是一个环形图表,右边是一个表格,表格中展示图表中每个类别占用的百分比。 存在的问题: 1.当存在四舍五入的时候,Echarts的百分比算法和...
  • java ssm整合echarts

    千次阅读 2017-09-26 15:00:39
    以前数据成表格显示,现在为了更直观,简洁,方便,采用报表的形式 第一步:去官网:http://echarts.baidu.com/看看dome,下载资源 第二步:在页面加一个div并布局好样式 第三步:引入js文件echarts.js ...
  • Echarts 由百度研发的开源软件,是一个纯 JS 的图表库。Echarts 是 web 端的技术,前端展现,其在 J2EE 项目中经常被集成使用,图形类型多且直观、生动、可交互...比如我们把 Echarts报表结合,报表中既有表格内容,
  • 在JAVA程序中,用ECharts做的报表用什么方法导出成excel文档表格???急急急急
  • 本套教程采用vs2012+sql2012开发,以销售明细表为例,讲解了常见报表的开发过程,既包含了传统的表格形式的报表、又包含了柱状图(条形图)、饼状图、环形图、南丁格尔图、曲线图、折线图、面积图等,前端使用ajax...
  • 技术交流QQ:1416759661 微信号:yyjcw10000 本套教程采用vs2012+sql2012开发,以销售明细表为例,讲解了常见报表的开发过程,既包含了传统的表格形式的报表、又包含了柱状图(条形图)、饼状图、环形图、南丁格尔图...

空空如也

空空如也

1 2 3 4
收藏数 74
精华内容 29
关键字:

echarts表格报表