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

Echarts简介

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

使用Echarts

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

模块化包引入:这里的echarts.js从这里下载,下载完后解压,用到的文件就是echarts-2.2.7\build\dist下的

 

[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.7\build\dist\chart目录在工程中的路径  
  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="width: 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.     title: {// 图表标题,可以通过show:true/false控制显示与否,还有subtext:'二级标题',link:'http://www.baidu.com'等  
  3.         text: '实例'  
  4.     },  
  5.     tooltip : {// 这个是鼠标浮动时的工具条,显示鼠标所在区域的数据,trigger这个地方每种图有不同的设置,见官网吧,一两句说不清楚  
  6.         trigger: 'axis'  
  7.     },  
  8.     legend: {// 这个就是图例,也就是每条折线或者项对应的示例,就是这个<a target=_blank href="//img-blog.csdn.net/20160622094820180?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">图例</a>  
  9.         data:[]  
  10.     },  
  11.     toolbox: {  
  12.         feature: {  
  13.             saveAsImage: {}// 工具,提供几个按钮,例如动态图表转换,数据视图,保存为图片等  
  14.         }  
  15.     },  
  16.     grid: {  
  17.         left: '3%',  
  18.         right: '4%',  
  19.         bottom: '3%',// 这几个属性可以控制图表上下左右的空白尺寸,可以自己试试。  
  20.         containLabel: true  
  21.     },  
  22.     xAxis : [  
  23.         {  
  24.             type : 'category',  
  25.             boundaryGap : false,  
  26.             data : []// X轴的定义  
  27.         }  
  28.     ],  
  29.     yAxis : [  
  30.         {  
  31.             type : 'value'// Y轴的定义  
  32.         }  
  33.     ],  
  34.     series : []// 这里就是数据了  
  35. };  

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

[javascript] view plain copy
 
  1. jQuery.ajax({  
  2.     url:"url",  
  3.     type:'get',  
  4.     dataType:'json',  
  5.     success:function(jsons){  
  6.         var Item = function(){  
  7.             return {  
  8.                 name:'',  
  9.                 type:'line',  
  10.                 itemStyle: {normal: {areaStyle: {type: 'default',opacity:isArea}}},  
  11.                         label: {normal: {show: isShowAllData,position: 'top'}},  
  12.                         markLine: {data: [{type: 'average', name: '平均值'}]},  
  13.                         data:[]  
  14.             }  
  15.         };// series中的每一项为一个item,所有的属性均可以在此处定义  
  16.         var legends = [];// 准备存放图例数据  
  17.         var Series = []; // 准备存放图表数据  
  18.         var json = jsons.data;// 后台返回的json  
  19.         for(var i=0;i < json.length;i++){  
  20.             var it = new Item();  
  21.             it.name = json[i].name;// 先将每一项填充数据  
  22.             legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中  
  23.             it.data = json[i].data;  
  24.             Series.push(it);// 将item放在series中  
  25.         }  
  26.           
  27.         option.xAxis[0].data = jsons.xcontent;// 这一步是设置X轴数据了,需要注意:option.xAxis.data = json.xcontent这样不行  
  28.                               // 折线图可设置上下两个X轴,所以必须是option.xAxis[0].data = json.xcontent  
  29.                               option.legend.data = legends;// 设置图例  
  30.                               option.series = Series; // 设置图表  
  31.                               myChart.setOption(option);// 重新加载图表  
  32.                        },  
  33.                        error:function(){  
  34.                               alert("数据加载失败!请检查数据链接是否正确");  
  35.                        }  
  36.               });  

 


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

 

 

[javascript] view plain copy
 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>折线图</title>  
  8.     <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>  
  9.     <script src="${pageContext.request.contextPath}/js/echarts.js"></script>  
  10. </head>  
  11. <body >  
  12.     <div align="center">  
  13.         <div id="main" style="width: 1000px;height:700px"></div>  
  14.     </div>  
  15.     <script src="${pageContext.request.contextPath}/source/echarts/myTheme.js"></script>  
  16.     <script type="text/javascript">  
  17.      // 另外说一下带主题加载,就是这样的,注意“e_macarons”必须是myTheme.js(上面引入的自定义主题js文件,echarts中也附带了不少主题js文件)中函数的名字  
  18.     var myChart = echarts.init(document.getElementById('main'),e_macarons);  
  19.     option = {   
  20.                title: { ··· },   
  21.                tooltip : { ··· },   
  22.                legend: { ··· },   
  23.                toolbox: { ··· },   
  24.                grid: { ··· },   
  25.                xAxis : [ ··· ],   
  26.                dataZoom: [ ··· ],   
  27.                yAxis : [ ··· ],   
  28.                series:[]   
  29.       };   
  30.       //加载数据  
  31.       jQuery.ajax({  
  32.         url:"url",  
  33.         type:'get',  
  34.         dataType:'json',  
  35.         success:function(jsons){  
  36.             var Item = function(){  
  37.                 return {  
  38.                     name:'',  
  39.                     type:'line',  
  40.                     itemStyle: {normal: {areaStyle: {type: 'default',opacity:isArea}}},  
  41.                                 label: {normal: {show: isShowAllData,position: 'top'}},  
  42.                                 markLine: {data: [{type: 'average', name: '平均值'}]},  
  43.                                 data:[]  
  44.                     }  
  45.                 };  
  46.             var legends = [];  
  47.             var Series = [];  
  48.             var json = jsons.data;  
  49.             for(var i=0;i < json.length;i++){  
  50.                 var it = new Item();  
  51.                 it.name = json[i].name;  
  52.                 legends.push(json[i].name);  
  53.                 it.data = json[i].data;  
  54.                 Series.push(it);  
  55.             }  
  56.                   
  57.             option.xAxis[0].data = jsons.xcontent;   
  58.                     option.legend.data = legends;  
  59.                         option.series = Series; // 设置图表  
  60.                        myChart.setOption(option);// 重新加载图表  
  61.         },  
  62.         error:function(){  
  63.             alert("数据加载失败!请检查数据链接是否正确");  
  64.         }  
  65.     });  
  66.         // 初次加载图表(无数据)   
  67.         myChart.setOption(option);   
  68.     </script>  
  69. </body>  
  70. </html>   

 

附:后台数据返回

 

[java] view plain copy
 
  1. @ResponseBody  
  2.     @RequestMapping("/jsonData")  
  3.     public Object jsonData(){  
  4.           
  5.         Integer[] data1 = {120, 132, 101, 134, -90, 230, 210};  
  6.         Integer[] data2 = {20, 232, 11, -144, 90, 30, 90};  
  7.         Integer[] data3 = {180, -12, 161, 84, 60, 230, -10};  
  8.           
  9.         JsonData jd1 = new JsonData();  
  10.         jd1.setName("测试数据1");  
  11.         jd1.setData(data1);  
  12.           
  13.         JsonData jd2 = new JsonData();  
  14.         jd2.setName("测试数据2");  
  15.         jd2.setData(data2);  
  16.           
  17.         JsonData jd3 = new JsonData();  
  18.         jd3.setName("测试数据3");  
  19.         jd3.setData(data3);  
  20.           
  21.         List<JsonData> data = new ArrayList<JsonData>();  
  22.         data.add(jd1);  
  23.         data.add(jd2);  
  24.         data.add(jd3);  
  25.           
  26.         String[] xcontent = {"a","b","c","d","e","f","g"};  
  27.           
  28.         TestlineData tld = new TestlineData();  
  29.         tld.setXcontent(xcontent);  
  30.         tld.setData(data);  
  31.         return tld;  
  32.     }  


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

 

 

posted @ 2017-07-17 10:21  Mr.石  阅读(18064)  评论(0编辑  收藏  举报