echarts使用文档

简介：ECharts是一款开源、功能强大的数据可视化产品;

 

目的：使用echarts，实现数据可视化;

步骤：

第一步：HTML部署
第二步：引入插件
第三步：示例

 

演示：点击查看（需要先启动demo项目）;

 

第一步：HTML部署

1. <!--
   
   1.宽高必须填
   
   2.class必填 （uPie：饼图, uBar：柱状图）
   
   3.title选填 （图表的标题）
   
   4.x选填 （title的位置：left|center|right）
   
   -->
   
   <div width=800 height=400 class="uPie" title="图饼" x="center"></div>

第二步：引入插件

1. 1 require('echarts')//源生插件
   
   2 var $package = require('./package').init();//经过薄封装的插件

第三步：示例

 1 /**

 2  * $package对象：

 3  * pieOption：饼图配置文件对象

 4  * pieChart:初始化饼图

 5  * BarOption:柱状图配置文件对象

 6  * BarChart:初始化柱状图

 7  * series：数据内容数组

 8  * legend：图例

 9  * xAxis:直角坐标系中横组数组

10  */

11     

12 $('.refreshPie').live('click',function(){

13     $package = require('./package').init(); //刷新数据

14     $ajax.weAjax({

15         type:'GET',

16         url:'/wangyang/echarts/pie.json', //加载数据

17         success:function(data){

18             $package.pieOption.series[0].data = data;  //展示图表数据

19             $package.pieOption.legend.data = data; //展示图例数据

20             seajs.log($package.pieOption.series[0].data)

21             $package.pieChart.setOption($package.pieOption); // 为echarts对象加载数据

22             seajs.log('pie数据加载成功');            

23         },

24         error:function(){

25             seajs.log('数据加载失败');

26         }

27     });

28 })

 

 

来自为知笔记(Wiz)