使用echarts画图表

最新推荐文章于 2024-08-07 02:46:45 发布

kunling1104

最新推荐文章于 2024-08-07 02:46:45 发布

阅读量739

点赞数

分类专栏：工具

工具专栏收录该内容

10 篇文章 0 订阅

订阅专栏

项目需要在网页上画图表，在网上找了一下，发现百度出品的echarts非常好用。echarts把看似复杂的图表进行了分解，使用结构化的模型来完成图表的配置。画图表就跟写CSS一样，实际上echarts使用的很多属性名字都和CSS是一样的。

echarts有非常详细的文档，官网还提供了很多个例子，很容易学会。

echarts是支持IE8的，虽然IE8不支持canvas，但是echarts画出的图表在IE8显示，目前没有发现有问题。

想学echarts，看官网的文档就可以了。以下是个人学习之后整理的helloworld小例子，以及学习过程中碰到的一些小问题。

1 画一个最粗糙的图表

官方推荐使用模块化单文件引入，我不知道模块化，所以采用了标签式单文件引入。

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
 <meta charset="UTF-8">  
 <title>echarts测试</title>  
 </head>  
 <body>  
     <!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->  
     <div id="main"  
         style="height: 400px; width: 800px; border: 1px dotted black"></div>  
           
     <!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->  
     <script src="../js/echarts-plain-original.js"></script>  
       
     <!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->  
     <script type="text/javascript">  
         // 初始化一个图表实例  
         var myChart = echarts.init(document.getElementById('main'));  
   
         // echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。  
         var option = {  
             // 标题  
             title : {  
                 text : '销量和进货量'  
             },  
             // x轴  
             xAxis : [ {  
                 type : 'category',  
                 data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]  
             } ],  
             // y轴  
             yAxis : [ {  
                 type : 'value',  
                 axisLabel : {  
                     formatter : '{value}件'  
                 }  
             } ],  
             // 数值序列  
             series : [ {  
                 name : '销量',  
                 type : 'line',  
                 data : [ 5, 20, 40, 10, 10, 20 ],  
             } ]  
         };  
   
         // 为图表实例加载数据  
         myChart.setOption(option);  
     </script>  
 </body>  
 </html>  

得到的图表

2 为图表添加各种样式

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
 <meta charset="UTF-8">  
 <title>echarts测试</title>  
 </head>  
 <body>  
     <!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->  
     <div id="main"  
         style="height: 400px; width: 800px; border: 1px dotted black"></div>  
   
     <!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->  
     <script src="../js/echarts-plain-original.js"></script>  
   
     <!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->  
     <script type="text/javascript">  
         // 初始化一个图表实例  
         var myChart = echarts.init(document.getElementById('main'));  
   
         // echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。  
         var option = {  
             // 标题  
             title : {  
                 text : '销量和进货量',  
                 x : 'center',  
                 y : 'top',  
                 textStyle : {  
                     fontSize : 26,  
                     fontFamily : "微软雅黑",  
                 }  
             },  
             //   
             grid : {  
                 borderWidth : 0  
             },  
             tooltip : {  
                 trigger : 'axis',  
                 axisPointer : {  
                     type : 'line',  
                     lineStyle : {  
                         color : '#0f0',  
                         width : 2,  
                         type : 'solid'  
                     }  
                 }  
             },  
             // x轴  
             xAxis : [ {  
                 type : 'category',  
                 data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ],  
                 axisTick : {  
                     show : false  
                 },  
                 splitLine : {  
                     lineStyle : {  
                         type : 'dotted'  
                     }  
                 }  
             } ],  
             // y轴  
             yAxis : [ {  
                 type : 'value',  
                 axisLabel : {  
                     formatter : '{value}件'  
                 },  
                 splitLine : {  
                     lineStyle : {  
                         type : 'dotted'  
                     }  
                 }  
             } ],  
             // 数值序列  
             series : [ {  
                 name : '销量',  
                 type : 'line',  
                 data : [ 5, 20, 40, 10, 10, 20 ],  
                 itemStyle : {  
                     normal : {  
                         color : '#f00',  
                         lineStyle : {  
                             width : 2  
                         },  
                         label : {  
                             show : true,  
                             position : 'right',  
                             textStyle : {  
                                 fontStyle : 'bolder',  
                                 fontSize : 15  
                             }  
                         }  
                     }  
   
                 },  
                 symbol : 'emptyCircle',  
                 symbolSize : 4,  
             } ]  
         };  
   
         // 为图表实例加载数据  
         myChart.setOption(option);  
     </script>  
 </body>  
 </html>  

加了样式之后的结果如下，我想说我很佩服做美工的同学（我自己画的图表真不好看）

3 为图表添加事件

[html]view plaincopy 
   
 // 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name  
 function eConsole(param) {  
     if (typeof param.seriesIndex == 'undefined') {  
         return;  
     }  
     if (param.type == 'click') {  
         var mes = param.name + ':' + param.value;  
         document.getElementById('info').innerHTML = mes;  
     }  
 }  
 myChart.on(echarts.config.EVENT.CLICK, eConsole);  

效果就是点击图表之后，可以在下面显示出被点击的类目和对应的数量

4 最后，做了一个小练习，使用jQuery来从服务端请求数据

这里，客户端的option一开始只有样式，没有数据。从服务端得到数据之后，把option补全，然后调用setOption方法就OK了。

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
 <meta charset="UTF-8">  
 <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>  
 <title>通过ajax为echarts更新数据</title>  
 </head>  
 <body>  
     <!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->  
     <div id="main"  
         style="height: 400px; width: 800px; border: 1px dotted black"></div>  
   
     <span id="info"></span>  
   
     <!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->  
     <script src="../js/echarts-plain-original.js"></script>  
   
     <!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->  
     <script type="text/javascript">  
         $(document).ready(function() {  
             // 初始化一个图表实例  
             var myChart = echarts.init(document.getElementById('main'));  
   
             // 使用jquery发送post请求，第四个参数指明如何解析服务端返回的数据。  
             // 服务端返回的必须是标准格式的json，也就是双引号括起来的键值对  
             $.post("../data", {  
                 name : "testdata"  
             }, function(data) {  
                 option.title.text = data.title;  
                 option.xAxis[0].data = data.category;  
                 option.series[0].data = data.value;  
                 // 取得数据后显示到图表中  
                 myChart.setOption(option);  
                 myChart.on(echarts.config.EVENT.CLICK, eConsole);  
             }, 'json');  
   
             // echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。  
             var option = {  
                 // 标题  
                 title : {  
                     x : 'center',  
                     y : 'top',  
                     textStyle : {  
                         fontSize : 26,  
                         fontFamily : "微软雅黑",  
                     }  
                 },  
                 //   
                 grid : {  
                     borderWidth : 0  
                 },  
                 tooltip : {  
                     trigger : 'axis',  
                     axisPointer : {  
                         type : 'line',  
                         lineStyle : {  
                             color : '#0f0',  
                             width : 2,  
                             type : 'solid'  
                         }  
                     }  
                 },  
                 // x轴  
                 xAxis : [ {  
                     type : 'category',  
                     axisTick : {  
                         show : false  
                     },  
                     splitLine : {  
                         lineStyle : {  
                             type : 'dotted'  
                         }  
                     }  
                 } ],  
                 // y轴  
                 yAxis : [ {  
                     type : 'value',  
                     axisLabel : {  
                         formatter : '{value}件'  
                     },  
                     splitLine : {  
                         lineStyle : {  
                             type : 'dotted'  
                         }  
                     }  
                 } ],  
                 // 数值序列  
                 series : [ {  
                     name : '销量',  
                     type : 'line',  
                     itemStyle : {  
                         normal : {  
                             color : '#f00',  
                             lineStyle : {  
                                 width : 2  
                             },  
                             label : {  
                                 show : true,  
                                 position : 'right',  
                                 textStyle : {  
                                     fontStyle : 'bolder',  
                                     fontSize : 15  
                                 }  
                             }  
                         }  
                     },  
                     symbol : 'emptyCircle',  
                     symbolSize : 4,  
                 } ]  
             };  
   
             // 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name  
             function eConsole(param) {  
                 if (typeof param.seriesIndex == 'undefined') {  
                     return;  
                 }  
                 if (param.type == 'click') {  
                     var mes = param.name + ':' + param.value;  
                     document.getElementById('info').innerHTML = mes;  
                 }  
             }  
   
         });  
     </script>  
 </body>  
 </html>  

服务端的servlet如下，这种小东西还写的不熟练：获取文件路径，设置UTF-8编码，关闭流等操作还不够轻车熟路

[java]view plaincopy 
   
 protected void doPost(HttpServletRequest request,  
         HttpServletResponse response)  
     throws ServletException, IOException  
 {  
     response.setCharacterEncoding("UTF-8");  
     String name = request.getParameter("name");  
     String fullPath = this.getServletContext().getRealPath("/") + "data"  
             + File.separator + name;  
     PrintWriter out = null;  
     BufferedReader br = null;  
     try  
     {  
         out = response.getWriter();  
         br = new BufferedReader(new FileReader(fullPath));  
         String str = null;  
         while ((str = br.readLine()) != null)  
         {  
             out.print(str);  
         }  
         out.flush();  
     }  
     finally  
     {  
         if (br != null)  
         {  
             br.close();  
         }  
         // 即使自己不关闭，tomcat等容器也会关闭  
         if (out != null)  
         {  
             out.close();  
         }  
     }  
 }  

服务端返回的数据一定要是标准格式的json。标准是指用双引号，不用单引号。另外，最后一个键值对后面不要有逗号，IE8中不允许JavaScript代码中的json采用这种不规范的写法，FireFox容许。

[javascript]view plaincopy 
   
 {  
  "title" : "销量和进货量",  
  "category" : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ],  
  "value" : [ 5, 20, 40, 10, 10, 20 ]  
 }  

如果在图表已经加载过数据之后，想要换一组数据，可以用getOption方法得到一份option的深拷贝，然后把其中的数据改掉，再调用setOption方法就可以：

[html]view plaincopy 
   
 var newOption = myChart.getOption(); // 深拷贝  
 newOption.xAxis[0].data = newData.category;  
 newOption.series[0].data = newData.value;  
 myChart.setOption(newOption,true); // 第二个参数表示不和原先的option合并  