您的位置：首页 > 其它

百度echarts图表数据更新与漂浮（float）

2014-08-20 13:27 501 查看
近来做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提供的图表很丰富功能很强大，支持几乎涵盖了所有的主流设备和浏览器及其版本，基本上能满足项目的需要，并且提供多种开发方式（模块化包引入、模块化单文件引入，标签式单文件引入等）以及丰富的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) {

4000
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
                                                解决办法
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航