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.接口返回的数据格式,这个 ...
随机推荐
- SQL Server 使用 Hierarchyid 操作层次结构数据
层次结构数据定义为一组通过层次结构关系互相关联的数据项. 在层次结构关系中,一个数据项是另一个项的父级或子级. sql server2008开始内置的 hierarchyid 数据类型使存储和查询层次 ...
- SQL Server窗口框架——ROWS、RANGE
说到窗口框架就不得不提起开窗函数. 开窗函数支持分区.排序和框架三种元素,其语法格式如下: OVER ( [ <PARTITION BY clause> ] [ <ORDER BY ...
- PL/SQL编程-块编程
(1). 简单分类 |————过程(存储过程) | ...
- python3_configparser模块详解
主要介绍python3中的ConfigParser模块的使用,该模块主要被用来读写配置文件. 安装模块:pip3 install configparser root@ranxf:/usr/lib/py ...
- 机器学习与R语言：kNN
#---------------------------------------- # 功能描述:演示kNN建模过程 # 数据集:威斯康星乳腺癌诊断 # #---------------------- ...
- java内存解析
ass BirthDate{ private int day; private int month; private int year; public BirthDate(int d;int m,in ...
- 20145303刘俊谦 《Java程序设计》实验四 实验报告
实验要求 完成实验.撰写实验报告,实验报告以博客方式发表在博客园,注意实验报告重点是运行结果,遇到的问题(工具查找,安装,使用,程序的编辑,调试,运行等).解决办法(空洞的方法如"查网络&q ...
- 20145312 《Java程序设计》第六周学习总结
20145312 <Java程序设计>第六周学习总结 学习笔记 Chapter10 输入 /输出 10.1InputStream 与 OutputStream 10.1.1 串流设计的概念 ...
- 20145328 《Java程序设计》实验四实验报告
20145328 <Java程序设计>实验四实验报告 实验名称 Andoid开发基础 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android ...
- ECU
ECU(Electronic Control Unit)电子控制单元,又称“行车电脑”.“车载电脑”等.从用途上讲则是汽车专用微机控制器,也叫汽车专用单片机.它和普通的单片机一样,由微处理器(CPU) ...