zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    CSwinform程序分页
    C#跨线程访问控件
    CS程序发布版本后提示自动升级功能
    winform控件的二次开发
    JavaNetty拆包粘包（二）
    JavaNetty（一）
    JavaAIO编程
    javaNIO编程
    Java中bio编程
    如何使用CryptoJS配合Java进行AES加密和解密
  • 原文地址：https://www.cnblogs.com/ZHANGKAIXUAN/p/6601482.html
Copyright © 2011-2022 走看看