百度echarts图表数据更新与漂浮(float)

近来做CRM系统,里面要用到各种图表展示数据。于是研究了一下当前流行的图表组件如
  • Fusioncharts
  • AnyChart
  • Highcharts
  • amChart
  • Xml/Swf Charts
  • Flotr2
  • Open Flash Chart 2 
  • jqplot
  • ichartjs
  • echarts
等等,可以说各有个的优势,在UED团队的推荐下,最后选择了百度团队开发的echarts。

ECharts (Enterprise Charts 商业产品图表库)
提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现。 



百度echarts图表数据更新与漂浮(float)_第1张图片


从介绍中可以看到echarts提供的图表很丰富功能很强大,支持几乎涵盖了所有的主流设备和浏览器及其版本,基本上能满足项目的需要,并且提供多种开发方式(模块化包引入、模块化单文件引入,标签式单文件引入等)以及丰富的API,开发人员可以用自己最熟悉的方式使用,减少了学习的成本,大大方便了开发人员。

目前处于应用初期,使用起来还不是非常熟练,很多开发开发团队在使用过程里面遇到或多或少的问题。比如下面的更新图表数据与漂浮的问题。在这里分享一下解决的办法,对于初次使用的人员,应该会有一些参考价值。

更新图表数据
举例:在一个查看页面,运营人员弹层更新销售排行数据,完毕后在界面不刷新能即时看到更新后的排行榜图表。
解决方案:一般的会用ajax到服务器获取需要更新的数据,然后调用echarts的api更新排行榜图表。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>echarts demo</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="bwOrder" style="height:350px;width:800px;border:1px solid #ccc;"></div>
</body>
<script src="echarts-plain-map.js" charset="utf-8"></script>
<script type="text/javascript">
    <pre name="code" class="javascript">    var bwOrder;//红黑榜
    
     $(function() {
        
         /**
          *默认设置
          */
         var defaultTooltip = {
             trigger: 'item',
             formatter: "{a} <br/>{b} : {c} ({d}%)"
         },
         defaultToolbox = {
             show : false
         };
        
        
         /**
          *红黑榜
          */        
         bwOrder = echarts.init(document.getElementById('bwOrder'));
         bwOrder.setOption({
             title : {
                 text: '红黑榜',
               x : 'center'
             },             
             tooltip : {
                 trigger: 'item',
                 formatter: function (params) {
                       var series = bwOrder.getSeries();
                        var sery = series[0];
                       
                     var tar;
                     if (params[1][2] != '-') {
                         tar = params[1];
                     }
                     else {
                         tar = params[2];
                     }

                        var name = '';
                        var value = params[2];
                        var data = sery.data;
                        for(var i = 0; i < data.length; i++){
                             var d = data[i];
                             var v = d.value;
                             if(v == value){
                                  name = d.name;
                                  break;
                             }
                        }

                        var r = '';
                        if(value < 0 ){
                             r += '倒数';
                        }
                     return r + '第' + params[1] + '名<br/>' + name;
                 }
             },
             calculable : true,
             xAxis : [
                 {
                     type : 'category',
                     data : ['1','2','3','4','5','6','6','5','4','3','2','1']
                 }
             ],
             yAxis : [
                 {
                     type : 'value'
                 }
             ],
             series : [
                 {
                     name:'红黑榜',
                     type:'bar',
                        itemStyle: {
                         normal: {                  
                             borderRadius: 5,
                             label : {
                                 show : true,
                                       position: 'inside',
                                     
                                       //格式化显示名次
                                       formatter: function(value) {
                                           
                                            //计数器
                                            if(!window._counter){
                                                 window._counter = [];
                                            }
                                            var len = window._counter.length;
                                            window._counter.push(len + 1);
                                           
                                            //获取名次数据
                                            var series = bwOrder.getSeries();
                                            var sery = series[0];
                                            var data = sery.data;
                                            var d = data[len];
                                            var name = d.name;
                                           
                                            //清空计数器
                                            if(len == data.length - 1){
                                                 window._counter = [];
                                            }
                                           
                                            return name;
                                       },
                                       textStyle : {
                                     fontSize : '12',
                                     fontFamily : '微软雅黑'
                                 }
                             }
                         }
                     },
                     data:[
                             {value:12,name : '王燕'},
                             {value:10,name : '张毅'},
                             {value:8,name : '刘文'},
                             {value:6,name : '谭静淑'},
                             {value:4,name : '高玫红'},
                             {value:2,name : '严咏全'},
                             {value:-2,name : '严土城'},
                             {value:-4,name : '赵祎'},
                             {value:-6,name : '周宏昌'},
                             {value:-8,name : '李红常'},
                             {value:-10,name : '全进贤'},
                             {value:-12,name : '赵易山'}
                        ]
                 }
             ]
         });    
        
         //刷新红黑榜:这里用setTimeout代替ajax请求进行演示
         window.setTimeout(function(){
             
              var data = [
                    {value:12,name : 'Sky'},
                    {value:10,name : 'Lyn'},
                    {value:8,name : 'Lucifer'},
                    {value:6,name : 'Moon'},
                    {value:4,name : 'Fly100%'},
                    {value:2,name : 'Focus'},
                    {value:-2,name : 'Sojo'},
                    {value:-4,name : 'Remind'},
                    {value:-6,name : 'Sweet'},
                    {value:-8,name : 'XiaoT'},
                    {value:-10,name : 'GoStop'},
                    {value:-12,name : 'Ted'}
              ];
             
              refreshBwOrderData(data);
             
         },3000);
        
     });
    
   
    /**
     * 刷新红黑榜
     */    
     function refreshBwOrderData(data){
         if(!bwOrder){
             // Todo something?
              return;
         }
        
         //更新数据
          var option = bwOrder.getOption();
          option.series[0].data = data;
         
          /**
         if (bwOrder && bwOrder.dispose) {
              bwOrder.dispose();
         }    
         
          bwOrder = echarts.init(document.getElementById('bwOrder'));//重新实例化
          */
        
          bwOrder.setOption(option);    
     }
</script>
</html>

 
 
代码其实很简单,api也有介绍,稍微熟悉的应该都可以完成,这里贴出来供新手参考。
漂浮(float)
项目里面有一个栏目,想在一个行内展示多个图表,需要使用到元素的漂浮(float),向左或向右。一开始定义了用来初始化图表的div元素如下:
<div id="bwOrder" style="height:350px;border:1px solid #ccc;float:left;"></div>

这段代码在IE8和谷歌下竟然导致了echarts脚本的出现死循环(算BUG吗?)!后来在UED同事的帮助下,将问题解决了。解决的办法是为div元素定义宽度。

<div id="bwOrder" style="height:350px;width:350px;border:1px solid #ccc;float:left;"></div>

在官方的例子里面也很少看到有显示为图表的容器定义宽度的,所以大家也没注意。其实,在echarts的文档中,其初始化方法有说明到,新手或者不做前端的开发人员,一般不会在意或遗漏甚至视而不见,特别是那些只看实例代码不看api说明文档的开发人员。看api文档,其实还是可以解决大部分问题的,新手真的要学会看api文档。




你可能感兴趣的:(解决办法,数据更新,百度echarts,漂浮float)