您的位置: 首页  >  文章  >  js实现图形报表 ECharts插件

js实现图形报表 ECharts插件

分类: 文章 • 2024-06-10 15:59:28

ECharts是一个很强大的插件 可以实现很多强大的图形报表功能

下图是部分官方实例

js实现图形报表 ECharts插件
 
使用方法也是非常简单
首先打开插件的官方网站
http://echarts.baidu.com/echarts2/doc/example.html
可以看到顶上有一个文档 点开里面的观测手册可以看到里面的使用方法 一下简单的试列
首先我下载的是echarts-2.2.7版本解压之后得到一个echarts-2.2.7文件夹
js实现图形报表 ECharts插件

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

相关推荐