zoukankan      html  css  js  c++  java

  • Echarts使用及动态加载图表数据 折线图X轴数据动态加载

    Echarts简介

          echarts，缩写来自Enterprise Charts，商业级数据图表，一个纯JavaScript的图表库，来自百度。。。我想应该够简洁了

    使用Echarts

          目前，就官网的文档显示，使用echarts有两种方式，echarts3之前的版本使用“模块化包引入”，echarts3还可以使用标签引入。例如

    模块化包引入：这里的echarts.js从这里下载，下载完后解压，用到的文件就是echarts-2.2.7uilddist下的

    [javascript] view plain copy
     
    1. <body>  
    2.     <div id="main" style="height:400px;"></div>   // 首先定义一个待用的div，一定要指定宽度、高度，给他一个id，为什么给个id，你懂得  
    3.     ...  
    4.     <script src="./js/echarts.js"></script>       // 这个地方很重要，关于echarts的初始化和加载一定要在<body></body>标签中，而且要放在div定义的下面  
    5.     <script type="text/javascript">  
    6.         require.config({  
    7.             paths: {  
    8.                 echarts: './js/dist/chart'        // 这是各种图的js根目录，echarts-2.2.7uilddistchart目录在工程中的路径  
    9.             }  
    10.         });  
    11.         require(  
    12.             [  
    13.                 'echarts',                        // 这个“echarts”其实就是上面的paths中的echarts  
    14.                 'echarts/chart/line',             // 按需加载所需图表，表示我这个页面中需要用到折线图  
    15.                 'echarts/chart/bar'               // 折线图可动态转换为柱状图，所以需要动态转换的要记得把相关的js也一并加载  
    16.             ],  
    17.             function (ec) {  
    18.                 var myChart = ec.init(document.getElementById('main'));    // 初始化图表，注意这里不能用JQuery方式，否则会无法初始化  
    19.                 var option = {  
    20.                     ...                           // 这里就是图表的定义数据了  
    21.                 }  
    22.                 myChart.setOption(option);        // 最后加载图表  
    23.             }  
    24.         );  
    25.     </script>  
    26. </body>  

    标签引入：这里的echarts.js从这里下载，推荐下载这个(如图)，因为这个只有一个文件

          使用方式超简单：

    [html] view plain copy
     
    1. <html>  
    2. <head>  
    3.     <meta charset="utf-8">  
    4.     <title>title</title>  
    5.     <!-- 引入 echarts.js -->  
    6.     <script src="js/echarts.js"></script>  
    7. </head>  
    8. <body>  
    9.     <div id="main" style=" 600px;height:400px;"></div>          // 一样的定义一个待用的div，一定要指定宽度、高度，给个id  
    10.     <script type="text/javascript">  
    11.        var myChart = echarts.init(document.getElementById('main'));  // 直接开始初始化，还是要用原生javascript  
    12.         var option = { <pre name="code" class="javascript">             // 图表的定义数据  
    13.     };   
    14.     myChart.setOption(option); // 加载图表   
    15.     </script>  
    16. </body>  
    17. </html>  



    


    动态加载折线图数据(series)，动态加载图例(legend)，动态加载X轴(xAxis)
    

          这个是开发经常遇到的，但是官方的示例都是死数据。。。怎样动态获取后台数据呢？
    

          首先，不管你使用哪一种方式使用echarts，数据定义(option)部分都是相同的。我以折线图为例，首先定义option如下：呃，我顺便说一下各个定义项吧
    


    

    

    [javascript] view plain copy

     
    

    

    

      

    1. option = {  
      2. 

    2.     title: {// 图表标题，可以通过show:true/false控制显示与否，还有subtext:'二级标题',link:'http://www.baidu.com'等  
      3. 

    3.         text: '实例'  
      4. 

    4.     },  
      5. 

    5.     tooltip : {// 这个是鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置，见官网吧，一两句说不清楚  
      6. 

    6.         trigger: 'axis'  
      7. 

    7.     },  
      8. 

    8.     legend: {// 这个就是图例，也就是每条折线或者项对应的示例，就是这个<a target=_blank href="http://img.blog.csdn.net/20160622094820180?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">图例</a>  
      9. 

    9.         data:[]  
      10. 

    10.     },  
      11. 

    11.     toolbox: {  
      12. 

    12.         feature: {  
      13. 

    13.             saveAsImage: {}// 工具，提供几个按钮，例如动态图表转换，数据视图，保存为图片等  
      14. 

    14.         }  
      15. 

    15.     },  
      16. 

    16.     grid: {  
      17. 

    17.         left: '3%',  
      18. 

    18.         right: '4%',  
      19. 

    19.         bottom: '3%',// 这几个属性可以控制图表上下左右的空白尺寸，可以自己试试。  
      20. 

    20.         containLabel: true  
      21. 

    21.     },  
      22. 

    22.     xAxis : [  
      23. 

    23.         {  
      24. 

    24.             type : 'category',  
      25. 

    25.             boundaryGap : false,  
      26. 

    26.             data : []// X轴的定义  
      27. 

    27.         }  
      28. 

    28.     ],  
      29. 

    29.     yAxis : [  
      30. 

    30.         {  
      31. 

    31.             type : 'value'// Y轴的定义  
      32. 

    32.         }  
      33. 

    33.     ],  
      34. 

    34.     series : []// 这里就是数据了  
      35. 

    35. };  
      36. 

    

          定义好option，下面就要获取数据动态加载到option中了
    

    

    

    [javascript] view plain copy

     
    

    

    

      

    1. jQuery.ajax({  
      2. 

    2.     url:"url",  
      3. 

    3.     type:'get',  
      4. 

    4.     dataType:'json',  
      5. 

    5.     success:function(jsons){  
      6. 

    6.         var Item = function(){  
      7. 

    7.             return {  
      8. 

    8.                 name:'',  
      9. 

    9.                 type:'line',  
      10. 

    10.                 itemStyle: {normal: {areaStyle: {type: 'default',opacity:isArea}}},  
      11. 

    11.                         label: {normal: {show: isShowAllData,position: 'top'}},  
      12. 

    12.                         markLine: {data: [{type: 'average', name: '平均值'}]},  
      13. 

    13.                         data:[]  
      14. 

    14.             }  
      15. 

    15.         };// series中的每一项为一个item,所有的属性均可以在此处定义  
      16. 

    16.         var legends = [];// 准备存放图例数据  
      17. 

    17.         var Series = []; // 准备存放图表数据  
      18. 

    18.         var json = jsons.data;// 后台返回的json  
      19. 

    19.         for(var i=0;i < json.length;i++){  
      20. 

    20.             var it = new Item();  
      21. 

    21.             it.name = json[i].name;// 先将每一项填充数据  
      22. 

    22.             legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中  
      23. 

    23.             it.data = json[i].data;  
      24. 

    24.             Series.push(it);// 将item放在series中  
      25. 

    25.         }  
      26. 

    26.           
      27. 

    27.         option.xAxis[0].data = jsons.xcontent;// 这一步是设置X轴数据了，需要注意：option.xAxis.data = json.xcontent这样不行  
      28. 

    28.                               // 折线图可设置上下两个X轴，所以必须是option.xAxis[0].data = json.xcontent  
      29. 

    29.                               option.legend.data = legends;// 设置图例  
      30. 

    30.                               option.series = Series; // 设置图表  
      31. 

    31.                               myChart.setOption(option);// 重新加载图表  
      32. 

    32.                        },  
      33. 

    33.                        error:function(){  
      34. 

    34.                               alert("数据加载失败！请检查数据链接是否正确");  
      35. 

    35.                        }  
      36. 

    36.               });  
      37. 

    


    

          以上就可完成图表数据的动态加载，现在整个页面应该是这样的
    



    

    

    [javascript] view plain copy

     
    

    

    

      

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
      2. 

    2.     pageEncoding="UTF-8"%>  
      3. 

    3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
      4. 

    4. <html>  
      5. 

    5. <head>  
      6. 

    6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
      7. 

    7. <title>折线图</title>  
      8. 

    8.     <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>  
      9. 

    9.     <script src="${pageContext.request.contextPath}/js/echarts.js"></script>  
      10. 

    10. </head>  
      11. 

    11. <body >  
      12. 

    12.     <div align="center">  
      13. 

    13.         <div id="main" style=" 1000px;height:700px"></div>  
      14. 

    14.     </div>  
      15. 

    15.     <script src="${pageContext.request.contextPath}/source/echarts/myTheme.js"></script>  
      16. 

    16.     <script type="text/javascript">  
      17. 

    17.      // 另外说一下带主题加载，就是这样的，注意“e_macarons”必须是myTheme.js(上面引入的自定义主题js文件,echarts中也附带了不少主题js文件)中函数的名字  
      18. 

    18.     var myChart = echarts.init(document.getElementById('main'),e_macarons);  
      19. 

    19.     option = {   
      20. 

    20.                title: { ··· },   
      21. 

    21.                tooltip : { ··· },   
      22. 

    22.                legend: { ··· },   
      23. 

    23.                toolbox: { ··· },   
      24. 

    24.                grid: { ··· },   
      25. 

    25.                xAxis : [ ··· ],   
      26. 

    26.                dataZoom: [ ··· ],   
      27. 

    27.                yAxis : [ ··· ],   
      28. 

    28.                series:[]   
      29. 

    29.       };   
      30. 

    30.       //加载数据  
      31. 

    31.       jQuery.ajax({  
      32. 

    32.         url:"url",  
      33. 

    33.         type:'get',  
      34. 

    34.         dataType:'json',  
      35. 

    35.         success:function(jsons){  
      36. 

    36.             var Item = function(){  
      37. 

    37.                 return {  
      38. 

    38.                     name:'',  
      39. 

    39.                     type:'line',  
      40. 

    40.                     itemStyle: {normal: {areaStyle: {type: 'default',opacity:isArea}}},  
      41. 

    41.                                 label: {normal: {show: isShowAllData,position: 'top'}},  
      42. 

    42.                                 markLine: {data: [{type: 'average', name: '平均值'}]},  
      43. 

    43.                                 data:[]  
      44. 

    44.                     }  
      45. 

    45.                 };  
      46. 

    46.             var legends = [];  
      47. 

    47.             var Series = [];  
      48. 

    48.             var json = jsons.data;  
      49. 

    49.             for(var i=0;i < json.length;i++){  
      50. 

    50.                 var it = new Item();  
      51. 

    51.                 it.name = json[i].name;  
      52. 

    52.                 legends.push(json[i].name);  
      53. 

    53.                 it.data = json[i].data;  
      54. 

    54.                 Series.push(it);  
      55. 

    55.             }  
      56. 

    56.                   
      57. 

    57.             option.xAxis[0].data = jsons.xcontent;   
      58. 

    58.                     option.legend.data = legends;  
      59. 

    59.                         option.series = Series; // 设置图表  
      60. 

    60.                        myChart.setOption(option);// 重新加载图表  
      61. 

    61.         },  
      62. 

    62.         error:function(){  
      63. 

    63.             alert("数据加载失败！请检查数据链接是否正确");  
      64. 

    64.         }  
      65. 

    65.     });  
      66. 

    66.         // 初次加载图表(无数据)   
      67. 

    67.         myChart.setOption(option);   
      68. 

    68.     </script>  
      69. 

    69. </body>  
      70. 

    70. </html>   
      71. 

    

    


    附：后台数据返回
    


    

    

    [java] view plain copy

     
    

    

    

      

    1. @ResponseBody  
      2. 

    2.     @RequestMapping("/jsonData")  
      3. 

    3.     public Object jsonData(){  
      4. 

    4.           
      5. 

    5.         Integer[] data1 = {120, 132, 101, 134, -90, 230, 210};  
      6. 

    6.         Integer[] data2 = {20, 232, 11, -144, 90, 30, 90};  
      7. 

    7.         Integer[] data3 = {180, -12, 161, 84, 60, 230, -10};  
      8. 

    8.           
      9. 

    9.         JsonData jd1 = new JsonData();  
      10. 

    10.         jd1.setName("测试数据1");  
      11. 

    11.         jd1.setData(data1);  
      12. 

    12.           
      13. 

    13.         JsonData jd2 = new JsonData();  
      14. 

    14.         jd2.setName("测试数据2");  
      15. 

    15.         jd2.setData(data2);  
      16. 

    16.           
      17. 

    17.         JsonData jd3 = new JsonData();  
      18. 

    18.         jd3.setName("测试数据3");  
      19. 

    19.         jd3.setData(data3);  
      20. 

    20.           
      21. 

    21.         List<JsonData> data = new ArrayList<JsonData>();  
      22. 

    22.         data.add(jd1);  
      23. 

    23.         data.add(jd2);  
      24. 

    24.         data.add(jd3);  
      25. 

    25.           
      26. 

    26.         String[] xcontent = {"a","b","c","d","e","f","g"};  
      27. 

    27.           
      28. 

    28.         TestlineData tld = new TestlineData();  
      29. 

    29.         tld.setXcontent(xcontent);  
      30. 

    30.         tld.setData(data);  
      31. 

    31.         return tld;  
      32. 

    32.     }  
      33. 

    


          这个数据是一个三条折线，X轴7个项的折线图：
    


    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  微信小程序与内嵌webview之间来回跳转的几点总结，以及二维码的使用
                    
    web端生成的带有echarts图表的html页面，嵌入在(javaFx)webview中显示错位问题
                    
    vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等
                    
    css3的calc属性不生效问题
                    
    element-ui使用el-tabs组件的时候浏览器直接卡死的问题
                    
    webkitdirectory 实现文件夹上传
                    
    开发vue插件并发布到npm包管理工具的流程
                    
    路径前加与不加反斜杠 /
                    
    DNS学习笔记
                    
    好用的chrome插件
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/shiyh/p/7193080.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看