Echarts简介

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

使用Echarts

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

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

  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从这里下载,推荐下载这个(如图),因为这个只有一个文件

使用方式超简单:

  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如下:呃,我顺便说一下各个定义项吧

  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="http://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中了

  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. option.xAxis[0].data = jsons.xcontent;// 这一步是设置X轴数据了,需要注意:option.xAxis.data = json.xcontent这样不行
  27. // 折线图可设置上下两个X轴,所以必须是option.xAxis[0].data = json.xcontent
  28. option.legend.data = legends;// 设置图例
  29. option.series = Series; // 设置图表
  30. myChart.setOption(option);// 重新加载图表
  31. },
  32. error:function(){
  33. alert("数据加载失败!请检查数据链接是否正确");
  34. }
  35. });

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

  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. option.xAxis[0].data = jsons.xcontent;
  57. option.legend.data = legends;
  58. option.series = Series; // 设置图表
  59. myChart.setOption(option);// 重新加载图表
  60. },
  61. error:function(){
  62. alert("数据加载失败!请检查数据链接是否正确");
  63. }
  64. });
  65. // 初次加载图表(无数据)
  66. myChart.setOption(option);
  67. </script>
  68. </body>
  69. </html>

附:后台数据返回

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

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

Echarts使用及动态加载图表数据 折线图X轴数据动态加载的更多相关文章

  1. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

  2. canvas图表(2) - 折线图

    原文地址:canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那 ...

  3. Echarts动态加载柱状图和折线图混合展示的实例

    一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...

  4. eCharts 折线图,动态绑定数据不更新图表的问题,

    官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...

  5. ECharts学习总结(二)-----图表组件漏斗图(funnel)

    今天在学习ECharts时,想要在ECharts图表的原生态Demo中抠出漏斗图,却不知如何下手,经过一番研究,特总结如下: 首先我们需要这样做 1.拷贝出两个js文件:esl.js 和echarts ...

  6. Android自定义控件:图形报表的实现(折线图、曲线图、动态曲线图)(View与SurfaceView分别实现图表控件)

    图形报表很常用,因为展示数据比较直观,常见的形式有很多,如:折线图.柱形图.饼图.雷达图.股票图.还有一些3D效果的图表等. Android中也有不少第三方图表库,但是很难兼容各种各样的需求. 如果第 ...

  7. echarts中折线图切换为数据视图(表格布局)表头无法对齐解决方法

                dataView: {               show: true,               readOnly: true,               option ...

  8. 使用echart 做出数据折线图

    代码如下: // 基于准备好的dom,初始化echarts图表var myChart = echarts.init(document.getElementById("main")) ...

  9. 关于echarts的那些事(地图标点,折线图,饼图)

    前记:离上一篇博客的发布已经过去两个月了,这期间总想写点什么,却怎么都写不出来,一直拖到了现在.现在的感觉,不是像这期间一样,想好好整理一番,写一篇好博客,却写不出来.事实发现,随心就好,较好的博客, ...

随机推荐

  1. 使用curl进行s3服务操作

    最近使用curl对s3进行接口测试,本想写个总结文档,但没想到已有前辈写了,就直接搬过来做个记录吧,原文见: http://blog.csdn.net/ganggexiongqi/article/de ...

  2. iOS - 开源框架、项目和学习资料汇总(网络篇)

    网络连接 1. AFNetworking – ASI不升级以后,最多人用的网络连接开源库,[推荐]iOS网络编程之AFNetworking使用,iOS开发下载文件速度计算.2. Alamofire – ...

  3. 浅谈 Java 字符串(String, StringBuffer, StringBuilder)

    我们先要记住三者的特征: String 字符串常量 StringBuffer 字符串变量(线程安全) StringBuilder 字符串变量(非线程安全) 一.定义 查看 API 会发现,String ...

  4. 关于webpy模板自动HTML转义的问题

    注意: web.py 将会转义任何任何用到的变量,所以当你将 name 的值设为是一段 HTML 时,它会被转义显示成纯文本.如果要关闭该选项,可以写成 $:name 来代替 $name. 如果我们想 ...

  5. SSH客户端提示 用户密钥未在远程主机上注册

    今天在一台使用已久的内网服务器上面帮一位新同事添加账户,添加完成之后就把账号交付于他,过了10分钟他告诉我说无法登陆,觉得很诧异 这么轻车熟路的 这么会 登陆不上去了,自己也用Xshell 登陆了一下 ...

  6. [EF]vs15+ef6+mysql code first方式

    写在前面 前面有篇文章,尝试了db first方式,但不知道是什么原因一直没有成功,到最后也没解决,今天就尝试下code first的方式. [EF]vs15+ef6+mysql这个问题,你遇到过么? ...

  7. 2016江苏省CPC省赛 I - Itinerary Planning

    Description Mike moved to a new city. There are bus stations in the city, each has a unique name. Ea ...

  8. POJ_3368_Frequent values

    Frequent values Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 19998   Accepted: 7180 ...

  9. 【紫书】Play on Words UVA - 10129 欧拉回路

    题意:给你1e5个字符串,若前一个的末尾字母等于当前的首字母,则可以连在一起(成语接龙一个意思)判断是否可以将他们连在一起 题解:将首位看作点,单词看作边.变成欧拉回路问题. 判断出入度是否相等,再用 ...

  10. Oracle备份恢复之冷备份恢复与异机还原

    (同平台:rhel6.4~rhel6.4:同版本:oracle 11g 11.2.0.1~ oracle 11g 11.2.0.1) 冷备份发生在数据库关闭状态下,直接拷贝物理文件的备份方式,备份数据 ...