【Echarts】——上手Demo

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

[html]  view plain  copy
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"><!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></span>  

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

[html]  view plain  copy
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"><!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></span>  


3、新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)
[html]  view plain  copy
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"><!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></span>  

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

[html]  view plain  copy
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"><!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></span>  

5、浏览器中打开echarts.html,就可看到以下效果


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值