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. #define中的#和##作用

    #define语句中的#是把参数字符串化,##是连接两个参数成为一个整体. #define FACTORY_REF(name) { #name, Make##name } 中#name就是将传入的na ...

  2. LoadRunner 中调用c函数生成随机字符串

    Action() { int itera_num,rand_num,i; ]=""; char StrTable[]="abcdefghijklmnopqrstuvwxy ...

  3. CALayer与UIView的关系

    CALayer属于Core Animation部分的内容,比较重要而不太好理解.以下是园子中看到的一篇文章的摘录: 1. UIView是iOS系统中界面元素的基础,所有的界面元素都是继承自它.它本身完 ...

  4. 2016/05/25 get和post的区别

    get是从服务器上获取数据,post是向服务器传送数据.   get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTP ...

  5. HDU 5405 Sometimes Naive 树链剖分+bit*****

    Sometimes Naive Problem Description   Rhason Cheung had a naive problem, and asked Teacher Mai for h ...

  6. Lightoj 1011 - Marriage Ceremonies

    You work in a company which organizes marriages. Marriages are not that easy to be made, so, the job ...

  7. O(n²)、O(n)、O(1)、O(nlogn)

    大体上和 @丁戍 说的差不多. 简单说O(n²)表示当n很大的时候,复杂度约等于Cn²,C是某个常数,简单说就是当n足够大的时候,n的线性增长,复杂度将沿平方增长. O(n)也是差不多的意思,也就是说 ...

  8. Buildroot构建指南——根文件系统(Rootfs)【转】

    本文转载自; 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   Buildroot构建指南——根文件系统(Rootfs) Buildroot的Rootfs构建流程有一个大 ...

  9. NABCD项目需求报告

    项目:记账小账本 N:need 需求 根据我们的调查,很多人虽然知道记账有很多的好处,但是因为种种的原因,我们都没能养成记账的好习惯,所以我们所做的记账小软件,说到底是一个行为养成类的软件,而这类软件 ...

  10. EF通过反射追踪修改记录.适合记录变更系统

    private static void IsUpdate<T>(T old, T current, string id) { Model.PerFileHistory history = ...