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. Linux下kill命令的学习，（主要根据man手册进行的翻译）

    名字      kill -终止一个进程 格式     kill  [-s signal | -p]  [--] pid ..                                      ...

  2. hdu2222--Keywords Search+AC自己主动机模板

    题目链接:pid=2222">点击进入 KMP对模式串进行处理.然后就能够方便的推断模式串是否在目标串中出现了:这显示适合一个模式串多个目标串的情况.可是假设模式串有多个,这时假设还用 ...

  3. 2 Angular 2 的核心概念

    一.组件(Components): 组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分.组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成 ...

  4. Python标准库：内置函数complex([real[, imag]])

    本函数能够使用參数real + imag*j方式创建一个复数.也能够转换一个字符串的数字为复数:或者转换一个数字为复数.假设第一个參数是字符串,第二个參数不用填写.会解释这个字符串且返回复数.只是,第 ...

  5. 开发指南专题二：JEECG微云高速开发平台JEECG框架初探

    开发指南专题二:JEECG微云高速开发平台JEECG框架初探 2.JEECG框架初探 2.1演示系统 打开浏览器输入JEECG演示环境界址:http://demo.jeecg.org:8090/能够看 ...

  6. 记一次UICollectionView中visibleCells的坑

    记一次UICollectionView中visibleCells的坑 项目的要求是这样的 其实也是一个轮播图,而已,所以依照轮播图的实现原理,这里觉得也很简单,还是利用UICollectionView ...

  7. Java 解析excel2003和2007区别和兼容性问题(POI操作)

    最近在使用POI对excel操作中发现一些问题,2003和2007的区别还是蛮大的: 2007相关的包: poi-3.9.jar poi-examples-3.8.jar poi-excelant-3 ...

  8. 20170212-备份ABAP程序

    把生产机上所有后续开发的CBO程序都备份下来.以备急用! 用过2种方法:1.写BDC程序,模拟 TCODE:SE38 -->Program --> Utilities(M)-->Mo ...

  9. 求两个list的交集和并集

    两个list的并集,只需去除重复元素即可: 将两个list放入同一个set中即可: 两个list的交集: 1将其中一个list放入set, 2循环另一个list,每次向set塞值, 3判断set的总数 ...

  10. Cmake的介绍和使用 Cmake实践【转】

    本文转载自:http://www.cppblog.com/Roger/archive/2011/11/17/160368.html Cmake的介绍和使用 Cmake实践 Cmake优点: 1.    ...