1. 显示效果

实现步骤:

1-引入e-char,jquery资源,

2-发起jsonp跨域请求,

3-服务器端返回return new JSONPObject(callback, value);数据

4-注意事项,如果data.data是带转义符的字符串即"/{ /"name/" /:***/}的时候要转var _data = JSON.parse(data.data);

如过data.data是jQuery11240587231540187183_1590913029838({"status":200,"msg":"业务调用正常","data":[30,40,50,60,70,80]})则是正规的json格式,则_data=data.data已经是js对象了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Echarts</title>

    <script src="js/echarts.js"></script>

    <script src="js/jquery.js"></script>

</head>

<body>

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

<div id="app">

    内容不能为空

</div>

<script>

    var datazyt= null;

    $.ajax({

        url : "http://sso.jt.com/user/ajaxtest" ,

        dataType : "jsonp",

        type : "GET",

        success : function(data){

            console.log(data)

            if(data.status == 200){

                //把json串转化为js对象

                 datazyt = data.data;

                console.log(datazyt);

                var myChart = echarts.init(document.getElementById('main'));

                var options={

                    title: {

                        text: 'ECharts 入门示例'

                    },

                    tooltip: {},

                    legend: {

                        data:['销量']

                    },

                    xAxis: {

                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                    },

                    yAxis: {},

                    series: [{

                        name: '销量',

                        type: 'bar',

                        data: datazyt

                    }]

                };

                myChart.setOption(options);

            }

        }

    });

</script>

</body>
    
服务器端
/**

     *

     * @param http://sso.jt.com/user/ajaxtest"

     * @param callback

     * @return

     */

    @RequestMapping("/ajaxtest")

    public  JSONPObject ajaxtest(String callback) {

        int[] jsonstr = {30,40,50,60,70,80};

        SysResult value =SysResult.success(jsonstr);

        return new JSONPObject(callback, value);

    }

atzhang

Echarts +ajax+JSONPObject 实现后台数据图表化的更多相关文章

  1. Echarts动态加载后台数据

    注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...

  2. Java语言实现通过Ajax抓取后台数据及图片

    1.Java语言实现通过Ajax抓取后台数据及图片信息 1.1数据库设计: create table picture( pic_id number not null, pic_name )not nu ...

  3. jQuery实现的分页功能，包括ajax请求，后台数据，有完整demo

    一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...

  4. C#曲线分析平台的制作（四，highcharts+ajax加载后台数据）

    在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ...

  5. 关于上传文件 非ajax提交 得到后台数据问题

    <form name="configForm" id="configForm" method="post" action=" ...

  6. 【Ajax】接收后台数据在html页面显示

    Java代码 PrintWriter out=response.getWriter(); //向客户端发送字符数据 response.setContentType("text/text&qu ...

  7. Spring Boot 2.x基础教程：使用 ECharts 绘制各种华丽的数据图表

    上一节我们介绍了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础.接下来,我们介绍一下后端开发经常会遇到的一个场景:可视化图表. 通常,这类需求在客户端应用中不太会用到 ...

  8. Vue中使用echarts，ajax请求的远程数据赋值给图表不刷新的问题和解决办法

    问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...

  9. echarts ajax数据加载方法

    一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...

随机推荐

  1. 打开黑盒：从 MySQL架构设计出发，看它是如何执行一条 SQL语句的

    1.把MySQL当个黑盒子一样执行SQL语句 我们的系统采用数据库连接池的方式去并发访问数据库,然后数据库自己其实也会维护一个连接池,其中管理了各种系统跟这台数据库服务器建立的所有连接 当我们的系统只 ...

  2. Springboot WebFlux集成Spring Security实现JWT认证

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 简介 在之前的文章<Springboot集成Spring Security实现JWT认证>讲解了如何在传统 ...

  3. Golang编写动态库实现回调函数

    Golang编写动态库实现回调函数 我们现在要做一个动态库,但是C++实在是比较难,于是就想能不能用更简单的golang来实现,golang也就是最近的版本才支持编译成动态库,在网上也没找到可用的案例 ...

  4. 《手把手教你》系列基础篇之（四）-java+ selenium自动化测试- 启动三大浏览器（下）基于Maven（详细教程）

    1.简介 上一篇文章,宏哥已经在搭建的java项目环境中实践了,今天就在基于maven项目的环境中给小伙伴们 或者童鞋们演示一下. 2.eclipse中新建maven项目 1.依次点击eclipse的 ...

  5. XAML代码格式化神器扩展：XAML Styler，从安装到放弃

    背景 平时,我们写XAML的时候,写着写着就多了,乱了,听说这个神器扩展可以一键格式化. XAML Styler -- VS格式化扩展 XAML Styler From MarketPlace 安装 ...

  6. Netty 框架学习 —— 添加 WebSocket 支持

    WebSocket 简介 WebSocket 协议是完全重新设计的协议,旨在为 Web 上的双向数据传输问题提供一个切实可行的解决方案,使得客户端和服务器之间可以在任意时刻传输消息 Netty 对于 ...

  7. Software Architecture软件架构（方法、模式与框架）纵横谈

    Software Architecture软件架构是啥 随着软件行业的发展,软件的规模越来越大,"Software Architecture软件架构"这个名词开始频繁出现.&quo ...

  8. Java：Java的^运算符详解

    按位异或运算符(^)是二元运算符,要化为二进制才能进行计算,在两个操作数中,如果两个相应的位相同,则运算结果为0,否则1:例如:int a=15:int b=a^8;运算结果为:a=15:b=7:a( ...

  9. Bootstrap-table 显示行号

    趁热打铁,使用bootstrap-table时,想要显示每行的行号,再网上查了查,网上给的显示行号的大部分方法,只要一翻页,行号就会又从1开始计算, 也许没有碰到想要的,自己试着解决了这个问题,本人初 ...

  10. hfctfwp(re)

    1.easy python revering 看字节码操作,昂哥直接看直接写exp太强了,我就直接手动写了个源码出来(昂哥永远滴神) arr0=[249,91,149,113,16,91,53,41, ...