JAVA开发人员画图表总结（ECHARTS）

时间：2022-09-25 15:14:12

随着大数据的到来，越来越多的数据需求需要开发，而这些需求不可避免需要使用JS画出图表，而大多后端JAVA开发人员对JS不太熟悉，导致身心倍受折磨，今天记录以下最近我使用echarts的步骤，供参考：

一、环境说明

前端框架：echarts、Jquery

后端框架：SPRINGMVC

二、开发过程

前端代码：

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height: 400px"></div>

    <script type="text/javascript">

        $(function() {

            $.ajax({

                url : "http://www.qunar.com/getJson",  //获取JSON地址

                dataType : "text",

                success : function(data) {

                    var result = eval(data);

                    // 路径配置

                    require.config({

                        paths : {

                            'echarts' : 'http://echarts.baidu.com/build/echarts',

                            'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'

                        }

                    });

                    var myChart;

                    // 使用

                    require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

                    ], function(ec) {

                        // 基于准备好的dom，初始化echarts图表

                        myChart = ec.init(document.getElementById('main'));

                        // 为echarts对象加载数据

                        myChart.setOption(result[0]);

                    });                    

                }

            });

        });

    </script>

</body>

</html>

对于我来说，编写这些JS最困难了。

1、首先需要AJAX获取数据

2、需要与echarts相互结合

3、option这个对象是核心，后端需要生成的也是这个对象。

获取的后端数据：

[{"calculable":true,"graphType":null,"legend":{"data":["报表"]},"series":[{"data":[1,2,3],"name":"报表","type":"bar"}],"title":{"color":"red","fontSize":24,"link":"http://www.qunar.com","subText":"报表","text":"去哪儿-报表"},"tootip":{"show":true},"xAxis":{"data":[1,2,3],"type":"category"},"yAxis":{"data":[],"type":"value"}}]

后端如何生成这些JSON数据就不在这里说了，任何提供REST服务或者SpringMVC都能实现。这里需要注意的是，如果想要长期使用echarts，建议还是好好阅读文档，因为任何的小错误，都可能导致效果相差很大。

JAVA开发人员画图表总结（ECHARTS）的更多相关文章

  1. 高级Java开发人员最常访问的几个网站

    这是高级Java开发人员最常访问的几个网站. 这些网站提供新闻,一般问题或面试问题的答案,精彩的讲座等.质量是优秀网站的关键因素,这此网站都有较高的质量内容.下面逐一介绍: 1. Stackoverf ...

  2. Java开发人员最常犯的10个错误

    这个列表总结了10个Java开发人员最常犯的错误. Array转ArrayList 当需要把Array转成ArrayList的时候,开发人员经常这样做: List<String> list ...

  3. 面向 Java 开发人员的 Ajax&colon; 构建动态的 Java 应用程序

    面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...

  4. Java开发人员必须掌握的Linux命令-学以致用（5）

    ================================================= 人工智能教程.零基础!通俗易懂!风趣幽默!大家可以看看是否对自己有帮助! 点击查看高清无码教程 == ...

  5. Java开发人员必须掌握的两个Linux魔法工具（四）

    子曰:"工欲善其事,必先利其器." 做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 学习应该是快乐的,在这个乐园中我努力让自己能用简洁易懂(搞笑有趣) ...

  6. Java开发人员必须掌握的Linux命令（三）

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 学习应该是快乐的,在这个乐园中我努力让自己能用简洁易懂(搞笑有趣)的表达来讲解知识或者技术,让学习之旅充满乐趣,这就是写博 ...

  7. Java开发人员必须掌握的Linux命令（二）

    子曰:"工欲善其事,必先利其器." 学习应该是快乐的,在这个乐园中我努力让自己能用简洁易懂(搞笑有趣)的表达来讲解让知识或者技术,让学习之旅充满乐趣,这就是写博文的初心. 本篇的旅 ...

  8. Spring Boot 针对 Java 开发人员的安装指南

    Spring Boot 可以使用经典的开发工具或者使用安装的命令行工具.不管使用何种方式,你都需要确定你的 Java 版本为 Java SDK v1.8 或者更高的版本.在你开始安装之前,你需要确定你 ...

  9. 【运维】Java开发人员掌握的Linux命令

    作为Java开发人员,要掌握常用的Linux命令. 为什么要写此文,笔者的Linux很厉害?NoNoNo,正因为笔者不熟悉Linux才写此文,以作整理. 最主要的命令 查询命令的简要用法,help 当 ...

随机推荐

  1. Spring注解&commat;Value的用法

    有时候我们在配置文件中使用配置的信息不仅需要在xml文件中使用,还可能在类中使用,这个时候,我们可使用@Value注解了: @Value("${rest.service.url}" ...

  2. C&sol;C&plus;&plus;修改常量的值

    C/C++中常量修饰const可以用来保证一些确定的量不会被一不小心改变,比如PI,一直是3.14159...... 但是不排除有时候也会需要修改常量的值,通过直接修改是不能达到目的. 比如: #in ...

  3. 推广技巧：新站要如何推广引流做到日IP10000？

    一.回复高人气帖子插楼推广 1.找高人气的帖子在二楼或者二楼楼层中直接插入链接推广.虽然这种方法存活率比较低,但也算是贴吧里面最直接的有效的方法.一般我们分为三种: 1.1图中链接是一个短网址,这个是 ...

  4. Pyinstaller（python打包为exe文件）

      需求分析: python脚本如果在没有安装python的机器上不能运行,所以将脚本打包成exe文件,降低脚本对环境的依赖性,同时运行更加迅速. 当然打包的脚本似乎不是在所有的win平台下都能使用, ...

  5. 如何使用 Docker 来限制 CPU、内存和 IO等资源？

    如何使用 Docker 来限制 CPU.内存和 IO等资源?http://www.sohu.com/a/165506573_609513

  6. PCL&lowbar;common模块api代码解析

    pcl_common库包含大多数PCL库使用的公共数据结构和方法.核心数据结构包括PointCloud类和许多用于表示点.表面法线.RGB颜色值.特征描述符等的点类型.它还包含许多用于计算距离/范数. ...

  7. Python&plus;OpenCV图像处理（八）—— 图像直方图

    直方图简介:图像的直方图是用来表现图像中亮度分布的直方图,给出的是图像中某个亮度或者某个范围亮度下共有几个像素.还不明白?就是统计一幅图某个亮度像素数量.比如对于灰度值12,一幅图里面有2000 个像 ...

  8. linux系统安装java环境

    参考资料:实测可用 https://www.cnblogs.com/xuliangxing/p/7066913.html

  9. python3 获取int最大值

    python2 中获取int最大值 import sys i = sys.maxint print i 但是在python3中,报错: AttributeError: module 'sys' has ...

  10. Failed to add VMware DC to zone due to &colon; This DC is being managed by other CloudStack deployment&period;

    1.下载VMware-PowerCLI 2.安装VMware-PowerCLI 安装过程中会重复重启,请确认重启,不要设置稍后手动重启. 3.在开始,菜单中选择 vmware ->VMware ...

相关文章