echarts如何获取后端的值_Echarts 获取后台数据 使用后台数据展示 柱形图
后台数据要以json格式返回
页面:引用echarts.js , 然后data以ajax的数据请求并返回
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
ECharts
$(document).ready(function(){
});
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
title: {
text: ''
},
legend: {
data:["姓名"]
},
xAxis : [
{
type : "category",
data : (function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "getUserJson",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i
console.log(result[i].userName);
arr.push(result[i].userName);
}
console.log("arr=>"+arr);
}
},
error : function(errorMsg) {
alert("获取图表请求数据失败!");
myChart.hideLoading();
}
})
return arr;
})()
}
],
yAxis : [
{
type : "value"
}
],
series : [
{
"name":"年龄",
"type":"bar",
"data":(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "getUserJson",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i
console.log(result[i].age);
arr.push(result[i].age);
}
}
},
error : function(errorMsg) {
alert("获取图表请求数据失败!");
myChart.hideLoading();
}
})
return arr;
})()
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
============================================================
echarts如何获取后端的值_Echarts 获取后台数据 使用后台数据展示 柱形图相关推荐
- 微信小程序获取text的值与获取input的输入的值
有时候我们请求后台的时候需要使用到的 1 获取text 的值 首先需要把text 渲染 把值写在js里面 不如 wxml 写一个text <view class="container ...
- Redis中哈希hash数据类型(增加修改(设置单一属性、设置多个属性)、获取(获取键所有属性、获取单一属性值、获取多个属性值)、删除、使用hash可能出现的问题)
hash⽤于存储对象,对象的结构为属性.值 值的类型为string [应用:如购物车内某个宝贝的所有属性] [help hset] 1. 增加.修改 1.1 设置单个属性 hset key fiel ...
- Redis中字符串string数据类型(保存(设置键值、过期时间、设置多个键值、追加值)、获取(获取单一键值、获取多个键值))
字符串类型是 Redis 中最为基础的数据存储类型,它在 Redis 中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中字符串类型的V ...
- php如何获取下拉列表的值,php 获取select下拉列表框的值
php 获取select下拉列表框的值 发布于 2014-11-04 16:55:38 | 267 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...
- java如何获取单框的值_javaWeb获取文本框的值
javaWeb获取文本框的值 [2021-02-01 21:11:36] 简介: php if不等于空的判断方法:首先通过"$_POST['content'];"获取文本框的内容 ...
- echarts如何获取后端的值_散户必读:当你中线看好一只股票后,该如何操作才能获取最大利润...
一.[上升回档含义]: 上升回档是指某支股票股价中线看涨,短线上有所回调:回调的目的是主力为了洗盘.震仓后能有更大幅度的拉升:而散户的机会是在回调结束"瞬间"买入而去获利.此操作模 ...
- spring freemarker 获取后端的值
@RequestMapping(value="/index")public String index(ModelMap map){map.put("a",&qu ...
- jquery获取元素的值,获取当前对象的父对象等等
jsp代码: <span><input type="hidden" value="1" id="newInfo">& ...
- extjs 获取id的值_extjs 获取Dom对象
对象指页面上的某一部分,如:Input等.我觉得在EXT JS中会有三类基本对象,htmlelement , EXT.Element和CompositeElement .分别解释一下: htmlele ...
最新文章
- RocketMQ-手把手教你搭建集群
- 盘点:最值得托付终身的星座
- CTF dotNet逆向分析
- java6虚拟机_Java 虚拟机之六:javap工具
- PHP批量插入多条数据到Mysql报错:Mysql Prepared statement contains too many placeholders
- MVPArms实现本现数据缓存
- 造成错误“ORA-12547: TNS:lost contact”的常见原因有哪些?
- 新浪财经独家对话达利欧:桥水员工离职率曾高达30%
- 安科瑞DDS/DTS/DTZ系列计量表,具有体积小巧、精度高、可靠性好、安装方便等优点
- Linux的主机名基础
- 【突发】Telsa致命车祸细节报告:人为设定超速15%(下载)
- JAVA毕业设计花卉网站计算机源码+lw文档+系统+调试部署+数据库
- 篮球英文术语翻译与解释 (以A至E为限)
- 计算机word知识试题及答案,全国计算机等级考试Word试题及答案(2)
- 数据库之MySQL自定义函数
- 基于Android的本地电子书阅读器的设计与实现Ebook(3)
- 会议服务与管理【2】
- 【“BattenSnakexjp4.1”数据结构课程设计报告】
- hadoop常用命令和端口说明
- 2000-2013年工企专利匹配数据库
热门文章
- 扒取的国外的后台管理系统的界面
- Tensorflow 改进的MNIST手写体数字识别
- ThinkPHP 学习笔记 ( 一 ) 项目部署:应用部署方式与模块分组部署方式
- 介绍ASP.NET控件ID
- mate40pro什么时候用鸿蒙,mate40Pro什么时候可以用鸿蒙
- 把一个人的特点写具体作文_五年级下册第五单元习作把一个人的特点写具体写作指导+范文赏析+图文解读...
- springboot中使用poi导出excel文件(亲测实现了第一个功能)
- ELK的What files do you want me to watch? Exiting: no modules or inputs enabled and configuration
- PHP之composer遇见Your requirements could not be resolved to an installable set of packages
- PHP数组对象Json的互相转换