学习笔记：使用echarts画图表

来源：互联网发布：e25数据编辑：程序博客网时间：2024/06/04 14:50

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

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

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

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

1 画一个最粗糙的图表

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

<!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 为图表添加各种样式

<!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 为图表添加事件

// 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称namefunction 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了。

<!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轴上的名称namefunction 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编码，关闭流等操作还不够轻车熟路

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容许。

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

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

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

0 0