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. iOS中3种正则表达式的使用

    1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: ? 1 2 3 4 NSString *email ＝ @“nijino_saki@163.com”:  NSString *regex ...

  2. [LeetCode][Java] Remove Duplicates from Sorted List II

    题意: Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct  ...

  3. ABAP WEBRFC

    通过WEBRFC实现在网页下载SMW0上传的文件 FUNCTION zhr_download_test. *"---------------------------------------- ...

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

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

  5. YTU 2432: C++习题 对象数组输入与输出

    2432: C++习题 对象数组输入与输出 时间限制: 1 Sec  内存限制: 128 MB 提交: 1603  解决: 1152 题目描述 建立一个对象数组,内放n(n<10)个学生的数据( ...

  6. C#函数3递归

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Console ...

  7. codeforces 689E E. Mike and Geometry Problem(组合数学)

    题目链接: E. Mike and Geometry Problem time limit per test 3 seconds memory limit per test 256 megabytes ...

  8. 并不对劲的bzoj3277

    陈年老坑 题意大概是有n个字符串,要求出每一个字符串的所有子串(不包括空串)在所有字符串(包括自身)中出现次数不少于k的有多少个.n,k,字符串总长<=100000. 如果只有一个串的话,非常好 ...

  9. eclipse下清除项目的svn信息

    点击项目右键->Team->Disconnect 选择第一个即可

  10. E20180207-ts

    crumb n. 碎屑(尤指面包屑或糕饼屑); 面包心; 些许,少许; <俚>可鄙的人物;