百度的Echatrs折线图学习笔记

我在代码见原文链接:http://www.gbtags.com/gb/share/6167.htm

 百度ECharts入门

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

Echarts文档

1、新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。

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

 

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

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

 

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

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

 

 

 

 

你可能感兴趣的:(JavaScript,jquery,css,html5)