echarts在miniUI和ajax下动态渲染数据
<script src="echarts.js"></script>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body> <div id="traceProvinceOrder" style="width: 100%;height:400px;"></div> <script>
function loadOneColumn() { var myChart = echarts.init(document.getElementById('traceProvinceOrder'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '月销售分析'
},
tooltip: {},
legend: {
data: ['销售分析']
},
xAxis: {
data: []
},
yAxis: {
splitLine: { show: false },//去除网格线
name: ''
},
series: [{
barWidth: "30px",
name: '销售分析',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#333'
}
}
}
},
//data: []
}]
}); myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 var names = []; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值） $.ajax({
type: 'get',
url: '${base}/scripts/json.txt',//请求数据的地址
//url: '${base}/bd/bd_branch_info!getAllBranch.action',//请求数据的地址
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
$.each(result.list, function (index, item) {
names.push(item.department); //挨个取出类别并填入类别数组
nums.push(item.num); //挨个取出销量并填入销量数组
}); myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '发布排行', //显示在上部的标题
data: nums
}]
});
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
};
loadOneColumn(); </script>
以上是用ajax请求数据进行动态渲染，数据返回格式为json：
{
"list":[
{
"department":"和平区",
"num":480
},
{
"department":"河西区",
"num":380
},
{
"department":"河东区",
"num":366
},
{
"department":"河北区",
"num":320
},
{
"department":"南开区",
"num":300
}
]
}
——————————————————分割线—————————————————分割线——————————————————————————————-————
miniUI下的echarts
因为这个项目里，所有引入文件都被写在header文件里了，在ftl文件引入无效，所有要找到控制header的文件，在里面改动，然后引入
html.append("\n<script type=\"text/javascript\" src=\"").append(base).append("/scripts/echarts.js\"></script>");
function search(){
var data;
var year = date.getText()
if (year==""){
mini.alert("请选择时间")
return
}
grid.load({ //这里用miniUI提供的查询方法直接就可以查到值， 可以省去发送ajax的步骤，所以直接从官网搜来echarts的基本使用样例
year:year,
branch:mini.get("branchNo").getValue(),
branchArea:mini.get("branchArea").getValue()
},function(){ //要取到后台返回来的值 只能用这个写法， 且上一歌{}内是发送过去的，这里的是返回来的
data = grid.getData(); //取到data
console.log(data[0].sumSaleAmt9);
//引入echarts
var myChart = echarts.init(document.getElementById('traceProvinceOrder'));
//console.log(myChart)
var option = {
title: {
text: '月销售报表'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: { //这里是写死了x轴的数量
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
},
yAxis: {},
series: [{ //从返回来的数据中取到sumSaleAmt这个值，代表了从1-12个月的销售额
name: '销量',
type: 'bar',
data: [data[0].sumSaleAmt1,data[0].sumSaleAmt2,data[0].sumSaleAmt3,data[0].sumSaleAmt4,data[0].sumSaleAmt5,data[0].sumSaleAmt6,data[0].sumSaleAmt7,data[0].sumSaleAmt8,data[0].sumSaleAmt9,data[0].sumSaleAmt10,data[0].sumSaleAmt11,data[0].sumSaleAmt12]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
}
echarts在miniUI和ajax下动态渲染数据的更多相关文章
- ajax获取动态列表数据后的分页问题
ajax获取动态列表数据后的分页问题 这是我在写前台网站时遇到的一个分页问题,由于数据是通过ajax的方式来请求得到的,如果引入相应的js文件来做分页,假如只是静态的填放数据到列表各项内容中(列表条数 ...
- vue 动态渲染数据很慢或不渲染
vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...
- ListView实现下拉动态渲染数据
欢迎讨论欢迎一起学习:微信jkxx123321 这是一篇关于LIstView实现动态数据渲染的文章![RN] 首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案前提比如我们数据是100条+ ...
- Vue电商后台管理系统项目第2天-首页添加表格动态渲染数据&分页
0x01.使用Github学习的姿势 基于昨天的内容,今天的内容需要添加几个单文件组件,路由文件也需要做相应的增加,今天重点记录使用Element-UI中的表格组件实现数据动态渲染的实现流程和分页功能 ...
- Echarts Binning on map 根据真实经纬度渲染数据
要渲染的数据:[经度,维度,值] 例如: var data = [[116.420691626, 39.4574061868, 63],[116.423620497, 39.4574061868, 2 ...
- ASP.NET&AJAX&JSON - 动态读取数据
因为之前帮WM组做了一个delivery的dashboard,大概用了3周的时间,.net也忘了差不多了,ajax和highchart表也是现学的,蛮费劲!总算也搞出来了.发帖纪录一下. 1. 前台A ...
- 基于JS正则实现模板数据动态渲染
最近业务上需要动态渲染模板数据: 一.业务需求: 1.前端后端定义好模板以及变量名,根据打印机类型转换成对应sdk需要的标签模板,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板 ...
- echarts通过ajax动态获取数据的方法
echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...
- 使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
随机推荐
- GIt-远程仓库（特性）
本人拜读了廖雪峰老师关于Git的讲述后整理所得 上一节讲的Git在一个仓库中对于文件进行基本管理和这种和SVN的功能类似, 如果只是在一个仓库里管理文件历史,Git和SVN真没啥区别,并没有体现出Gi ...
- SPOJ - COT Count on a tree
地址:http://www.spoj.com/problems/COT/en/ 题目: COT - Count on a tree #tree You are given a tree with N ...
- The 15th UESTC Programming Contest Preliminary H - Hesty Str1ng cdoj1551
地址:http://acm.uestc.edu.cn/#/problem/show/1551 题目: Hesty Str1ng Time Limit: 3000/1000MS (Java/Others ...
- Bar Mitzvah Attack分析
结合RC4算法实现,简单分析一下Bar Mitzvah Attack攻击的原理,并以WEP破解过程来举例说明通用的破解方式.(个人觉得RC4早已经过时,要想避免该攻击,应该采用更好的加密算法,如:cc ...
- [Deep Learning]任意层cnn的matlab版本实现
之前实现了一层的卷积神经网络,又实现了两层的卷积神经网络,接下来把cnn扩展到任意层就不难了. 这难道就是传说中的“道生一,一生二,二生三,三生万物”么?＝.＝ 代码还是在github上. 比较有趣的 ...
- Java学习笔记之对象的复制和克隆
假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(boolean,char,byte,short, ...
- 前端学习之JavaScript中的 NaN 与 isNaN
NaN NaN 即 Not a Number ,不是一个数字. 在 JavaScript 中,整数和浮点数都统称为 Number 类型 .除此之外,Number 类型还有一个很特殊的值,即 NaN . ...
- MVC中 关于退出按钮的写法
public ActionResult Logoff() { Session.Abandon(); Session.Clear(); FormsAuthentication.SignOut(); re ...
- LCD1602
一.关于LCD1602: 在编写LCD1602程序前,我们必须了解其手册上一些非常重要的信息,如果这些信息不能理解透彻,编程可能会遇到或多或少的问题,在此先大致归纳几点. 1．管脚: 1602共16个 ...
- 翻翻git之---可用作课程表/排班表的自定义table库ScrollTableView
转载请注明出处:王亟亟的大牛之路 最近一直在写混合开发的东西,是时候温故下native的了. 一年多之前领导提了一个双性滚动+快点击的"TableView"那时候自己整了2 3天没 ...