码迷,mamicode.com
首页 > 其他好文 > 详细

echarts使用文档

时间:2015-07-23 19:35:55      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:

简介: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 })

 

 





echarts使用文档

标签:

原文地址:http://www.cnblogs.com/badness/p/4670989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!