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. 

  2. title: {// 图表标题，可以通过show:true/false控制显示与否，还有subtext:'二级标题',link:'http://www.baidu.com'等
    3. 

  3. text: '实例'
    4. 

  4. },
    5. 

  5. tooltip : {// 这个是鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置，见官网吧，一两句说不清楚
    6. 

  6. trigger: 'axis'
    7. 

  7. },
    8. 

  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. 

  9. data:[]
    10. 

  10. },
    11. 

  11. toolbox: {
    12. 

  12. feature: {
    13. 

  13. saveAsImage: {}// 工具，提供几个按钮，例如动态图表转换，数据视图，保存为图片等
    14. 

  14. }
    15. 

  15. },
    16. 

  16. grid: {
    17. 

  17. left: '3%',
    18. 

  18. right: '4%',
    19. 

  19. bottom: '3%',// 这几个属性可以控制图表上下左右的空白尺寸，可以自己试试。
    20. 

  20. containLabel: true
    21. 

  21. },
    22. 

  22. xAxis : [
    23. 

  23. {
    24. 

  24. type : 'category',
    25. 

  25. boundaryGap : false,
    26. 

  26. data : []// X轴的定义
    27. 

  27. }
    28. 

  28. ],
    29. 

  29. yAxis : [
    30. 

  30. {
    31. 

  31. type : 'value'// Y轴的定义
    32. 

  32. }
    33. 

  33. ],
    34. 

  34. series : []// 这里就是数据了
    35. 

  35. };




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




  1. jQuery.ajax({
    2. 

  2. url:"url",
    3. 

  3. type:'get',
    4. 

  4. dataType:'json',
    5. 

  5. success:function(jsons){
    6. 

  6. var Item = function(){
    7. 

  7. return {
    8. 

  8. name:'',
    9. 

  9. type:'line',
    10. 

  10. itemStyle: {normal: {areaStyle: {type: 'default',opacity:isArea}}},
    11. 

  11. label: {normal: {show: isShowAllData,position: 'top'}},
    12. 

  12. markLine: {data: [{type: 'average', name: '平均值'}]},
    13. 

  13. data:[]
    14. 

  14. }
    15. 

  15. };// series中的每一项为一个item,所有的属性均可以在此处定义
    16. 

  16. var legends = [];// 准备存放图例数据
    17. 

  17. var Series = []; // 准备存放图表数据
    18. 

  18. var json = jsons.data;// 后台返回的json
    19. 

  19. for(var i=0;i < json.length;i++){
    20. 

  20. var it = new Item();
    21. 

  21. it.name = json[i].name;// 先将每一项填充数据
    22. 

  22. legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中
    23. 

  23. it.data = json[i].data;
    24. 

  24. Series.push(it);// 将item放在series中
    25. 

  25. }
    26. 

  26. option.xAxis[0].data = jsons.xcontent;// 这一步是设置X轴数据了，需要注意：option.xAxis.data = json.xcontent这样不行
    27. 

  27. // 折线图可设置上下两个X轴，所以必须是option.xAxis[0].data = json.xcontent
    28. 

  28. option.legend.data = legends;// 设置图例
    29. 

  29. option.series = Series; // 设置图表
    30. 

  30. myChart.setOption(option);// 重新加载图表
    31. 

  31. },
    32. 

  32. error:function(){
    33. 

  33. alert("数据加载失败！请检查数据链接是否正确");
    34. 

  34. }
    35. 

  35. });






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




  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 

  2. pageEncoding="UTF-8"%>
    3. 

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    4. 

  4. <html>
    5. 

  5. <head>
    6. 

  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. 

  7. <title>折线图</title>
    8. 

  8. <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    9. 

  9. <script src="${pageContext.request.contextPath}/js/echarts.js"></script>
    10. 

  10. </head>
    11. 

  11. <body >
    12. 

  12. <div align="center">
    13. 

  13. <div id="main" style="width: 1000px;height:700px"></div>
    14. 

  14. </div>
    15. 

  15. <script src="${pageContext.request.contextPath}/source/echarts/myTheme.js"></script>
    16. 

  16. <script type="text/javascript">
    17. 

  17. // 另外说一下带主题加载，就是这样的，注意“e_macarons”必须是myTheme.js(上面引入的自定义主题js文件,echarts中也附带了不少主题js文件)中函数的名字
    18. 

  18. var myChart = echarts.init(document.getElementById('main'),e_macarons);
    19. 

  19. option = {
    20. 

  20. title: { ··· },
    21. 

  21. tooltip : { ··· },
    22. 

  22. legend: { ··· },
    23. 

  23. toolbox: { ··· },
    24. 

  24. grid: { ··· },
    25. 

  25. xAxis : [ ··· ],
    26. 

  26. dataZoom: [ ··· ],
    27. 

  27. yAxis : [ ··· ],
    28. 

  28. series:[]
    29. 

  29. };
    30. 

  30. //加载数据
    31. 

  31. jQuery.ajax({
    32. 

  32. url:"url",
    33. 

  33. type:'get',
    34. 

  34. dataType:'json',
    35. 

  35. success:function(jsons){
    36. 

  36. var Item = function(){
    37. 

  37. return {
    38. 

  38. name:'',
    39. 

  39. type:'line',
    40. 

  40. itemStyle: {normal: {areaStyle: {type: 'default',opacity:isArea}}},
    41. 

  41. label: {normal: {show: isShowAllData,position: 'top'}},
    42. 

  42. markLine: {data: [{type: 'average', name: '平均值'}]},
    43. 

  43. data:[]
    44. 

  44. }
    45. 

  45. };
    46. 

  46. var legends = [];
    47. 

  47. var Series = [];
    48. 

  48. var json = jsons.data;
    49. 

  49. for(var i=0;i < json.length;i++){
    50. 

  50. var it = new Item();
    51. 

  51. it.name = json[i].name;
    52. 

  52. legends.push(json[i].name);
    53. 

  53. it.data = json[i].data;
    54. 

  54. Series.push(it);
    55. 

  55. }
    56. 

  56. option.xAxis[0].data = jsons.xcontent;
    57. 

  57. option.legend.data = legends;
    58. 

  58. option.series = Series; // 设置图表
    59. 

  59. myChart.setOption(option);// 重新加载图表
    60. 

  60. },
    61. 

  61. error:function(){
    62. 

  62. alert("数据加载失败！请检查数据链接是否正确");
    63. 

  63. }
    64. 

  64. });
    65. 

  65. // 初次加载图表(无数据)
    66. 

  66. myChart.setOption(option);
    67. 

  67. </script>
    68. 

  68. </body>
    69. 

  69. </html>






附：后台数据返回




  1. @ResponseBody
    2. 

  2. @RequestMapping("/jsonData")
    3. 

  3. public Object jsonData(){
    4. 

  4. Integer[] data1 = {120, 132, 101, 134, -90, 230, 210};
    5. 

  5. Integer[] data2 = {20, 232, 11, -144, 90, 30, 90};
    6. 

  6. Integer[] data3 = {180, -12, 161, 84, 60, 230, -10};
    7. 

  7. JsonData jd1 = new JsonData();
    8. 

  8. jd1.setName("测试数据1");
    9. 

  9. jd1.setData(data1);
    10. 

  10. JsonData jd2 = new JsonData();
    11. 

  11. jd2.setName("测试数据2");
    12. 

  12. jd2.setData(data2);
    13. 

  13. JsonData jd3 = new JsonData();
    14. 

  14. jd3.setName("测试数据3");
    15. 

  15. jd3.setData(data3);
    16. 

  16. List<JsonData> data = new ArrayList<JsonData>();
    17. 

  17. data.add(jd1);
    18. 

  18. data.add(jd2);
    19. 

  19. data.add(jd3);
    20. 

  20. String[] xcontent = {"a","b","c","d","e","f","g"};
    21. 

  21. TestlineData tld = new TestlineData();
    22. 

  22. tld.setXcontent(xcontent);
    23. 

  23. tld.setData(data);
    24. 

  24. return tld;
    25. 

  25. }




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


												


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

    
								
  1. HighCharts 图表插件 自定义绑定 时间轴数据
		
    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...
    
		
    2. 
						
  2. canvas图表(2) - 折线图
		
    原文地址:canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那 ...
    
		
    3. 
						
  3. Echarts动态加载柱状图和折线图混合展示的实例
		
    一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...
    
		
    4. 
						
  4. eCharts 折线图，动态绑定数据不更新图表的问题，
		
    官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...
    
		
    5. 
						
  5. ECharts学习总结（二）-----图表组件漏斗图(funnel)
		
    今天在学习ECharts时,想要在ECharts图表的原生态Demo中抠出漏斗图,却不知如何下手,经过一番研究,特总结如下: 首先我们需要这样做 1.拷贝出两个js文件:esl.js 和echarts ...
    
		
    6. 
						
  6. Android自定义控件：图形报表的实现（折线图、曲线图、动态曲线图）（View与SurfaceView分别实现图表控件）
		
    图形报表很常用,因为展示数据比较直观,常见的形式有很多,如:折线图.柱形图.饼图.雷达图.股票图.还有一些3D效果的图表等. Android中也有不少第三方图表库,但是很难兼容各种各样的需求. 如果第 ...
    
		
    7. 
						
  7. echarts中折线图切换为数据视图（表格布局）表头无法对齐解决方法
		
                dataView: {               show: true,               readOnly: true,               option ...
    
		
    8. 
						
  8. 使用echart 做出数据折线图
		
    代码如下: // 基于准备好的dom,初始化echarts图表var myChart = echarts.init(document.getElementById("main")) ...
    
		
    9. 
						
  9. 关于echarts的那些事（地图标点，折线图，饼图）
		
    前记:离上一篇博客的发布已经过去两个月了,这期间总想写点什么,却怎么都写不出来,一直拖到了现在.现在的感觉,不是像这期间一样,想好好整理一番,写一篇好博客,却写不出来.事实发现,随心就好,较好的博客, ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 升级后重启造成fsck.ext3: Unable to resolve UUID
			
    这篇文章帮了我的大忙了:转载自:http://wilber82.blog.51cto.com/1124820/724472 今天在做服务器补丁部署,有一台ESX4.1的服务器在升级后重启过程中挂了,通 ...
    
			
    2. 
						
  2. myisam与innodb索引比较
			
    MyISAM支持全文索引(FULLTEXT).压缩索引,InnoDB不支持 InnoDB支持事务,MyISAM不支持 MyISAM顺序储存数据,索引叶子节点保存对应数据行地址,辅助索引很主键索引相差无 ...
    
			
    3. 
						
  3. JVM源码分析之javaagent原理完全解读
			
    概述 本文重点讲述javaagent的具体实现,因为它面向的是我们Java程序员,而且agent都是用Java编写的,不需要太多的C/C++编程基础,不过这篇文章里也会讲到JVMTIAgent(C实现 ...
    
			
    4. 
						
  4. 【BZOJ1294】[SCOI2009]围豆豆Bean 射线法+状压DP+SPFA
			
    [BZOJ1294][SCOI2009]围豆豆Bean Description Input 第一行两个整数N和M,为矩阵的边长. 第二行一个整数D,为豆子的总个数. 第三行包含D个整数V1到VD,分别 ...
    
			
    5. 
						
  5. 【BZOJ1210】[HNOI2004]邮递员 插头DP+高精度
			
    [BZOJ1210][HNOI2004]邮递员 Description Smith在P市的邮政局工作,他每天的工作是从邮局出发,到自己所管辖的所有邮筒取信件,然后带回邮局.他所管辖的邮筒非常巧地排成了 ...
    
			
    6. 
						
  6. [工具] 将Sublime Text 3配置为Java代码编辑器
			
    新建编译器选项 选择菜单栏中的 Tools ——> Build System ——> New Build System ,输入: { "cmd": ["jav ...
    
			
    7. 
						
  7. AndroidStudio 使用Release签名进行Debug
			
    extends:http://blog.csdn.net/h3c4lenovo/article/details/42011887 , http://www.linuxidc.com/Linux/201 ...
    
			
    8. 
						
  8. http模拟登陆及发请求
			
    首先声明下,如果服务端写入的cookie属性是HttpOnly的,程序是不能自动获取cookie的,需要人工登陆网站获取cookie再把cookie写死,如下图所示: http测试工具:http:// ...
    
			
    9. 
						
  9. 7.22 python面试题
			
    2018-7-22 16:32:24 把面试题敲完了,,好强悍! Python 10期考试题 1.常用字符串格式化有那些?并说明他们的区别 # format 直接调用函数 # %s 语法塘 # %r  ...
    
			
    10. 
						
  10. 获取验证码随机字符串@return string $captcha，随机验证码文字
			
    <?php//验证码工具类class Captcha{//属性private $width;private $height;private $fontsize;private $pixes;pr ...
    
			
    11.