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. Idea 13 新建maven项目

    1.此时生成的maven项目没有web文件夹 file→New Project→Maven→Next→GID.AID (NewDemo)→Next→ProjectName(NewDemo)→Finis ...

  2. MySQL基础笔记（四） 索引

    一.什么是索引 索引(Index),可以看作一个指针,指向表里的数据.当数据库没有索引时,查找信息通常是全表扫描:使用了索引,它就会直接引导到数据在表里的准确物理位置. 优点:索引的主要目的是提高数据 ...

  3. poj1161Post Office【经典dp】

    题目:poj1161Post Officeid=1160" target="_blank">点击打开链接 题意:给出一条直线上的n个坐标表示村庄的位置,然后要在上面 ...

  4. Qt学习--初学注意事项

    过程.心得: 1)Qt Creator与相关的安装包的安装 我在选择去学习Qt之后,第一件事就是Qt SDK下载安装与配置.最初,在网上发现Qt使用的IDE环境        在Windows上可以选 ...

  5. Activity动态添加Fragment时遇到的问题

    1.Activity动态调用代码 TitleFragement a = new TitleFragement();        getFragmentManager().beginTransacti ...

  6. （19）javaWeb项目名称修改

    1,选中项目,[右键]-[Refactor]-[Rename] 在弹出面板中,填写New Name 点击[OK] 2,改变运行时目录名称 选中项目[右键]-[Properties] 在弹框中选择选择[ ...

  7. get the default proxy by Powershell

    https://stackoverflow.com/questions/571429/powershell-web-requests-and-proxies $proxyAddr = (get-ite ...

  8. 我的第一篇博文，Python+scrapy框架安装。

    自己用Python脚本写爬虫有一段时日了,也抓了不少网页,有的网页信息两多,一个脚本用exe跑了两个多月,数据还在进行中.但是总觉得这样抓效率有点低,问题也是多多的,很早就知道了这个框架好用,今天终于 ...

  9. ThreadLocal工具类 隔离思想

    ThreadLocal不是用来解决共享对象的多线程访问问题的, 通过ThreadLocal的set()方法设置到线程的ThreadLocal.ThreadLocalMap里的是是线程自己要存储的对象, ...

  10. 【BZOJ 1233】 干草堆

    [题目链接] 点击打开链接 [算法] 这题有一个性质 : 位于顶层的干草堆可以满足宽度最小且高度最高 根据这个性质,用单调队列优化DP,即可 [代码] #include<bits/stdc++. ...