1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>ECharts </title>
  5. </head>
  6. <body>
  7. <!-- 选择商品 -->
  8. <Form action="" method="post" name="myform">
  9. <select name="sel" id="se" >
  10. <option value="1" selected>编号为1的商品</option>
  11. <option value="2" >编号为2的商品</option>
  12. <option value="3">编号为3的商品</option>
  13. </select>
  14. <input type="button" name="btnOK" value="确认" onClick="look()">
  15. </center>
  16. </Form>
  17. <div id="main" style="height:400px">
  18. </div>
  19. <!-- ECharts单文件引入 -->
  20. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  21. <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  22. <script type="text/javascript">
  23. //全局变量,list是表格数据，myChart是全局表格
  24. var myChart;
  25. var list=[];
  26. //选择下拉框选择不同编号的商品
  27. function look(){
  28. var se =document.getElementById("se");
  29. var option=se.getElementsByTagName("option");
  30. var str = "" ;
  31. for(var i=0;i<option.length;++i)
  32. {
  33. if(option[i].selected)
  34. {
  35. var temp  = option[i].value
  36. }
  37. }
  38. getAjaxData(temp);
  39. }
  40. // 路径配置
  41. require.config({
  42. paths: {
  43. echarts: 'http://echarts.baidu.com/build/dist'
  44. }
  45. });
  46. // 使用
  47. require(
  48. [
  49. 'echarts',
  50. 'echarts/chart/line' // 使用柱状图就加载bar模块，饼图加载line模块,按需求加载
  51. ],
  52. function (ec) {
  53. // 基于准备好的dom，初始化echarts图表
  54. myChart = ec.init(document.getElementById('main'));
  55. list=[];
  56. var option = {
  57. title : {
  58. text: '该商品每月销量',
  59. subtext: '纯属虚构'
  60. },
  61. tooltip : {
  62. trigger: 'axis'
  63. },
  64. legend: {
  65. data:['平均销量']
  66. },
  67. toolbox: {
  68. show : true,
  69. feature : {
  70. mark : {show: true},
  71. dataView : {show: true, readOnly: false},
  72. magicType : {show: true, type: ['line', 'bar']},
  73. restore : {show: true},
  74. saveAsImage : {show: true}
  75. }
  76. },
  77. calculable : true,
  78. xAxis : [
  79. {
  80. type : 'category',
  81. boundaryGap : false,
  82. data : ['一月份','二月份','三月份','四月份','五月份','六月份','七月份','八月份','九月份','十月份','十月份','十一月份','十二月份']
  83. }
  84. ],
  85. yAxis : [
  86. {
  87. type : 'value',
  88. axisLabel : {
  89. formatter: '{value} 件'
  90. }
  91. }
  92. ],
  93. series : [
  94. {
  95. name:'每月销量',
  96. type:'line',
  97. data:[],
  98. markPoint : {
  99. data : [
  100. {type : 'max', name: '销量的峰值'},
  101. {type : 'min', name: '销量的低谷'}
  102. ]
  103. },
  104. markLine : {
  105. data : [
  106. {type : 'average', name: '平均值'}
  107. ]
  108. }
  109. },
  110. ]
  111. };
  112. // 为echarts对象加载数据
  113. myChart.setOption(option); //先把可选项注入myChart中
  114. myChart.hideLoading();
  115. getAjaxData(1);   //一开始加载默认显示一号商品
  116. }
  117. );
  118. </script>
  119. <script type="text/javascript">
  120. function getAjaxData(pid){
  121. var options = myChart.getOption();
  122. $.getJSON("http://localhost:8000/app/v1/historys/?format=json&pid="+pid, function(data){
  123. for(var i=0;i<5;i++){
  124. list[i]=data.objects[i].data.number;
  125. }
  126. options.series[0].data=list;
  127. myChart.setOption(options);
  128. });
  129. }
  130. </script>
  131. </body>

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

  1. [转]WPF and Silverlight 学习笔记（二十五）：使用CollectionView实现对绑定数据的排序、筛选、分组

    在第二十三节,我们使用CollectionView实现了对于绑定数据的导航,除导航功能外,还可以通过CollectionView对数据进行类似于DataView的排序.筛选等功能. 一.数据的排序: ...

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

    注:在从表的aspxgridview中的(OnDataBinding()事件中绑定数据)-----代码如下 //绑定属性值表protected void grid2_sonTable_DataBind ...

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

    SQL Server 2005后之后,引入了row_number()函数,row_number()函数的分组排序功能使这种操作变得非常简单 分组取TOP数据是T-SQL中的常用查询, 如学生信息管理系 ...

  4. Android之ListView性能优化——一行代码绑定数据——万能适配器

    如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...

  5. angularJS绑定数据时自动转义html标签

    angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...

  6. 【WPF】绑定数据

    WPF绑定数据 模型类(继承 INotifyPropertyChanged,实现属性的变更通知)

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

    关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...

  8. row_number和partition by分组取top数据

    分组取TOP数据是T-SQL中的常用查询, 如学生信息管理系统中取出每个学科前3名的学生.这种查询在SQL Server 2005之前,写起来很繁琐,需要用到临时表关联查询才能取到.SQL Serve ...

  9. knockoutjs中使用mapping插件绑定数据列表

    使用KO绑定数据列表示例:   1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping    2.先使用ko.mapping.fromJS()将原来的 ...

随机推荐

  1. udhcp源码详解（三）上 之配置信息的读取

    上节介绍了存储管理配置信息的结构体struct server_config_t,该结构体贯穿整个server端程序的运行. 在dhcpd.c里的用该结构体定义个一个全局的变量: struct serv ...

  2. 那条linq语句为啥这么慢

    目前所在的项目大量使用了linq,结果有个地方出现了严重的性能问题.一个统计需要3.40秒.头头焦头烂额之际,也让我看看. 我向来喜欢性能调优,自诩编码极为注重性能.曾几何时,也动不动就把性能挂在嘴边 ...

  3. 2016/3/1 淘宝 腾讯 网易 css初始化代码 以及最基础的初始化

    淘宝官网(http://www.taobao.com/)样式初始化 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, o ...

  4. C# 敏感词过滤

    public class BadWordFilter { #region 变量 private HashSet<string> hash = new HashSet<string&g ...

  5. 设备没有可用空间 /var/spool/clientmqueue sendmail

    [root@hadoop3 /]# crontab -e/tmp/crontab.TB7A7w: 设备上没有空间[root@hadoop3 /]# df -Bg文件系统 1G-块 已用 可用 已用% ...

  6. jvm部分知识总结

    1.jvm有三种执行模式,分别是解释执行,混合执行和编译执行,默认情况是混合执行模式. java version " Java(TM) SE Runtime Environment (bui ...

  7. activity.runOnUiThread（）内的run（）方法没有被执行

    activity.runOnUiThread(new Runnable() { public void run() { Toast.makeText(context, toast, Toast.LEN ...

  8. eclipse svn修改用户名密码

    1,svn客户端删除 2,eclipse 补充,上图为网友资料,但实际操作过程中,发现eclipse中svn为svnkit,但相应目录下无.keyring文件,最后按步骤2删除auth下所有文件,再次 ...

  9. 【Android进度条】三种方式实现自定义圆形进度条ProgressBar

    一.通过动画实现 定义res/anim/loading.xml如下: <?xml version="1.0" encoding="UTF-8"?> ...

  10. oracle 建表 主键自增序列/////

    oracle 建表 主键自增序列 (2011-10-12 11:59:22) 转载▼ 标签: 杂谈 分类: oracle SQL> create table sms_activity(  2   ...