echart分组柱形图绑定数据

Posted ZHANGKAIXUAN

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echart分组柱形图绑定数据相关的知识，希望对你有一定的参考价值。

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

以上是关于echart分组柱形图绑定数据的主要内容，如果未能解决你的问题，请参考以下文章

echarts怎么动态添加多条柱形图

echarts怎么实现堆积柱状图，数据来源数据库

Vue——ElementUI+Echarts将数据以柱形图展示

Vue——ElementUI+Echarts将数据以柱形图展示

Echarts柱形图颜色设置

Echart--单个柱形图