项目需要在网页上画图表,在网上找了一下,发现百度出品的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>
得到的图表
- <!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轴上的名称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了。
- <!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>
- 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();
- }
- }
- }
- {
- "title" : "销量和进货量",
- "category" : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ],
- "value" : [ 5, 20, 40, 10, 10, 20 ]
- }
- var newOption = myChart.getOption(); // 深拷贝
- newOption.xAxis[0].data = newData.category;
- newOption.series[0].data = newData.value;
- myChart.setOption(newOption,true); // 第二个参数表示不和原先的option合并