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)