echart分组柱形图绑定数据

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts </title>
</head>
<body>
<Form action="" method="post" name="myform">
<select name="sel" id="se" >
<option value="1" selected>编号为1的商品</option>
<option value="2" >编号为2的商品</option>
<option value="3">编号为3的商品</option>
</select>
<input type="button" name="btnOK" value="确认" onClick="look()">
</center>
</Form>
<div id="main" style="height:400px">
</div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
//全局变量,list是表格数据，myChart是全局表格
var myChart;
var list=[];
//选择下拉框选择不同编号的商品
function look(){
var se =document.getElementById("se");
var option=se.getElementsByTagName("option");
var str = "" ;
for(var i=0;i<option.length;++i)
{
if(option[i].selected)
{
var temp = option[i].value
}
}
getAjaxData(temp);
}
// 路径配置
require.config({
paths: {
echarts: ‘http://echarts.baidu.com/build/dist‘
}
});
// 使用
require(
[
‘echarts‘,
‘echarts/chart/line‘ // 使用柱状图就加载bar模块，饼图加载line模块,按需求加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById(‘main‘));
list=[];
var option = {
title : {
text: ‘该商品每月销量‘,
subtext: ‘纯属虚构‘
},
tooltip : {
trigger: ‘axis‘
},
legend: {
data:[‘平均销量‘]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: [‘line‘, ‘bar‘]},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : ‘category‘,
boundaryGap : false,
data : [‘一月份‘,‘二月份‘,‘三月份‘,‘四月份‘,‘五月份‘,‘六月份‘,‘七月份‘,‘八月份‘,‘九月份‘,‘十月份‘,‘十月份‘,‘十一月份‘,‘十二月份‘]
}
],
yAxis : [
{
type : ‘value‘,
axisLabel : {
formatter: ‘{value} 件‘
}
}
],
series : [
{
name:‘每月销量‘,
type:‘line‘,
data:[],
markPoint : {
data : [
{type : ‘max‘, name: ‘销量的峰值‘},
{type : ‘min‘, name: ‘销量的低谷‘}
]
},
markLine : {
data : [
{type : ‘average‘, name: ‘平均值‘}
]
}
},
]
};
// 为echarts对象加载数据
myChart.setOption(option); //先把可选项注入myChart中
myChart.hideLoading();
getAjaxData(1); //一开始加载默认显示一号商品
}
);
</script>
<script type="text/javascript">
function getAjaxData(pid){
var options = myChart.getOption();
$.getJSON("http://localhost:8000/app/v1/historys/?format=json&pid="+pid, function(data){
for(var i=0;i<5;i++){
list[i]=data.objects[i].data.number;
}
options.series[0].data=list;
myChart.setOption(options);
});
}
</script>
</body>

时间： 2024-10-04 07:13:20

echart分组柱形图绑定数据的相关文章

ASPxGridView中如何对主从表绑定数据

注:在从表的aspxgridview中的(OnDataBinding()事件中绑定数据)-----代码如下 //绑定属性值表protected void grid2_sonTable_DataBinding(object sender, EventArgs e){ASPxGridView songrid = (ASPxGridView)sender; //实例化从表表object _faterid = songrid.GetMasterRowKeyValue(); //获取主表行id(模板gri

GridView等表格模板列绑定数据的方法

//绑定GridView每一行中的CheckBoxList protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { CheckBoxList cbl = (CheckBoxList)e.Row.FindControl("ckbCheckBox"); if (cbl != null) {

sql 分组取最新的数据sqlserver巧用row_number和partition by分组取top数据

SQL Server 2005后之后,引入了row_number()函数,row_number()函数的分组排序功能使这种操作变得非常简单分组取TOP数据是T-SQL中的常用查询, 如学生信息管理系统中取出每个学科前3名的学生.这种查询在SQL Server 2005之前,写起来很繁琐,需要用到临时表关联查询才能取到.SQL Server 2005后之后,引入了row_number()函数,row_number()函数的分组排序功能使这种操作变得非常简单.下面是一个简单示例: --1.创建测试

关于angularJS绑定数据时自动转义html标签

折磨了两天,最后发现答案竟如此简单,不过辛苦还是值得的,毕竟为了弄明白这一点又学习了更多代码. angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-saniti

【 D3.js 入门系列 — 2 】绑定数据和选择元素

1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定到一起. D3 中是通过 data() 和 datum() 函数来绑定数据的,最常用的是 data(). 现有如下 HTML 代码: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3

关于JQuery中$.data绑定数据原理或逻辑

问题: JQuery中,对于.data([key],[value])函数,当使用其进行数据绑定时,假设要绑定的数据是“引用数据类型”,也就是对象:那么.data函数绑定的是该对象的副本还是该对象的一个引用?下面通过以下小例子来测试下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test<

asp.net中Repeater中用ul li绑定数据

<ul class="tit1"> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <li> <p class="tit1-p-1"> <img style="border: 0px;" src="/image/biaozhi.jpg" /> &

【 D3.js 选择集与数据详解 — 3 】绑定数据的顺序

data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推.也可以不按照此顺序进行绑定,这就要用到data()的第二个参数.这个参数是一个函数,称为键函数(key function). 要注意,只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序.请看以下代码: <body> <!-- 三个空

【 D3.js 选择集与数据详解 — 2 】使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程假设body中有三个段落元素p