百度的Echatrs折线图学习笔记

 

 百度ECharts入门

文章的素材有大量注释哦~基本上每一行都注释了配合官方文档看应该是无压力的

Echarts文档

1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>ECharts</title>
  5. </head>
  6.  
  7. <body>
  8. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  9. <div id="main" style="height:400px"></div>
  10. </body>

 

2、新建script标签引入模块化单文件echarts.js

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>ECharts</title>
  5. </head>
  6. <body>
  7. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8. <div id="main" style="height:400px"></div>
  9. <!-- ECharts单文件引入 -->
  10. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  11. </body>

 

3、新建script标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>ECharts</title>
  5. </head>
  6. <body>
  7. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8. <div id="main" style="height:400px"></div>
  9. <!-- ECharts单文件引入 -->
  10. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  11. <script type="text/javascript">
  12. // 路径配置
  13. require.config({
  14. paths: {
  15. echarts: 'http://echarts.baidu.com/build/dist'
  16. }
  17. });
  18. </script>
  19. </body>
 

 

4、script标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>ECharts</title>
  5. </head>
  6. <body>
  7. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8. <div id="main" style="height:400px"></div>
  9. <!-- ECharts单文件引入 -->
  10. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  11. <script type="text/javascript">
  12. // 路径配置
  13. require.config({
  14. paths: {
  15. echarts: 'http://echarts.baidu.com/build/dist'
  16. }
  17. });
  18.  
  19. // 使用
  20. require(
  21. [
  22. 'echarts',
  23. 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  24. ],
  25. function (ec) {
  26. // 基于准备好的dom，初始化echarts图表
  27. var myChart = ec.init(document.getElementById('main'));
  28.  
  29. var option = {
  30. tooltip: {
  31. show: true
  32. },
  33. legend: {
  34. data:['销量']
  35. },
  36. xAxis : [
  37. {
  38. type : 'category',
  39. data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  40. }
  41. ],
  42. yAxis : [
  43. {
  44. type : 'value'
  45. }
  46. ],
  47. series : [
  48. {
  49. "name":"销量",
  50. "type":"bar",
  51. "data":[5, 20, 40, 10, 10, 20]
  52. }
  53. ]
  54. };
  55.  
  56. // 为echarts对象加载数据
  57. myChart.setOption(option);
  58. }
  59. );
  60. </script>
  61. </body>
 

5、浏览器中打开查看

 

折线图的学习笔记

 一个标准折线图图表有这几大元素

第一:标题

  1. //标题
  2. title:{
  3. //文本
  4. text:"未来一周气温变化",
  5. //子标题
  6. subtext:"纯属虚构"
  7. },//!-文本

 第二:鼠标移入上去的提示框

  1. //提示框
  2. tooltip:{
  3. //坐标轴触发显示
  4. trigger:"axis"
  5.  
  6. },

 第三:图例

  1. //图例 每个图表只能有一个
  2. legend:{
  3. data:['最高气温','最低气温']
  4. },//!-图例

 第四:工具箱

  1. //工具箱 每个图表只能有一个
  2. toolbox:{
  3. //是否显示工具箱 图表右上角的一系列开关
  4. show:true,
  5. //特效duang
  6. feature:{
  7. //辅助线标志
  8. mark:{show:true},
  9. //数据视图 可以显示文本数据
  10. //是否仅读？NO
  11. dataView:{show:true,readOnly:false},
  12. //可以切换更多的图形特效吗？
  13. //YSE! 可以切换line和bar类型
  14. magicType:{show:true,type:["line",'bar']},
  15. //卧槽！按错了，可以复原吗？
  16. //YES!
  17. restore:{show:"true"},
  18. //是否可以保存为图片？
  19. //YES!图片可以嵌入PPT里哦~
  20. saveAsImage:{show:true}
  21. },//！-特效
  22.  
  23. },//!-工具箱

 第五:横坐标

  1. xAxis:[
  2. {
  3. //X轴为类目型
  4. type:"category",
  5. //是否两端留白？
  6. boundaryGap:false,
  7. //横坐标数据
  8. //只有类目型的才配拥有data属性！
  9. data:["周一","周二","周三","周四","周五","周六","周日"]
  10.  
  11. }
  12. ],//!-横坐标
 

 第六:纵坐标

  1. yAxis:[
  2. {
  3. //Y轴类型为数值型
  4. type:"value",
  5. //Y轴的文本标签
  6. //改成 万°C会不会被喷？
  7. axisLabel:{
  8. //间隔名称..实际上就是单位
  9. //{value}传递过来的就是值
  10. formatter:"{value}°C"
  11. }
  12. }
  13. ],
  14. //!-纵坐标
 

 第七:图表数据

  1. series:[
  2. //数据一
  3. {
  4. name:"最高气温",
  5. //必要的参数
  6. //不声明为line,电脑妹纸会知道你是个line？
  7. type:"line",
  8. //最高气温
  9. //对应周一-周日
  10. data:[11,11,15,13,12,13,10],
  11. //标注 也就是图表上的那个类似于提示气泡的东西
  12. markPoint:{
  13. data:[
  14. //会出现两个提示气泡
  15. //一周类当中最高气温最大为多少
  16. {type:"max",name:"最大值"},
  17. //一周类最高气温最低为多少
  18. {type:"min",name:"最小值"}
  19. ]
  20. },
  21. //!-标注
 

 

posted on 2015-08-26 09:53  shirleyqin216  阅读(1277)  评论(0)  编辑  收藏  举报