开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

百度数据可视化图表套件echart实战

简介:
+关注继续查看

最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3。d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的。3月底由在亚马逊工作的同学介绍下使用了一下echart,一个由百度前端发起的canvas国产类库(官网:http://echarts.baidu.com/index.html)。这个echart其实是在canvas类库zrender的基础上做的主题图库,优点有数据驱动,图例丰富,功能强大,支持数据拖拽重计算,数据区域漫游,全中文文档非常过瘾。跟同样是国产的前端脚手架fis一样(官网http://fis.baidu.com/),都是诚意满满的国产套餐,体现了现今国内不俗的前端开发实力。使用它们的感觉就像想自己做个平板电脑,去华强北一转,主板、CPU、屏幕等各种套餐一订购,东西就哗哗地组装起来了。极其高效,非常适合商业项目开发。而且,即使是为了研究,用这些也可以打一个很好的基础。

Echart图表库层次关系

1.引入目录

废话不多说了,看到好东西,第一步是从github上把相关文件全下下来,然后到build目录翻箱倒柜把东西找齐。新建目录如下:

echarts-1.3.8
—-zrender   //zrender是echart依赖的绘图库,官网要求下载,但是目前我的程序中并没有直接引用它,可以说普通情况下echart可以自己独立运行
——–zrender.js
—-excanvas_r3 //excanvas是实现IE7,8兼容canvas绘图的利器,实现了大部分canvas的API,在绘图方面其核心是通过IE的VML去实现的,效率较低
——–excanvas.js
—-echarts.js  //echarts主程序,包含除map以外所有的主题图库。注意这个是压缩过的,并且只能通过requirejs或者esl.js模块化加载;想用标签或sea.js加载请用echarts-plain.js
—-echarts-orginal.js  //没有压缩过的echarts.js
—-echarts-map.js  //echarts的map主题图库

 

2.在自己的项目中实现其demo

这个echart是百度前端做的,他们推荐使用模块式开发。好在我之前的项目,就是采用requirejs + angularjs开发的。所以引入比较容易。

首先,在requirejs的入口配置文件main.js里加上echart:

然后,在要引入echart的具体页面控制js文件里,加载相关依赖。

以上两步,熟悉dojo或者requirejs的朋友应该都毫无压力,但是还是有很多朋友没用过这些,所以还是有必要说一下的。

接着就是把官网的例子放在自己的页面里实现。这里我选取了一个特别的千层饼图,点击这里去官网查看原图。

那么我们把例子里的静态数据(option对象)搬运到我们自己的JS文件中,然后仿照官网的例子写一个渲染&刷新函数

然后在页面上找个div,显示echart就可以了。

不过请注意一定要给这个div设置宽度高度,否则图显示不出来不要怪我。

3.定制

当然,仅仅停留在引用别人的例子是不能让我满意的。

首先,要进行数据绑定。

这里细分为3步:

  1. 分析数据格式(就是分析option对象,这一步需要注意把后台获取的数据和样式信息分开。故而我在代码里设置了$scope.option对象存储默认的样式配置信息,之后ajax获取数据后将二者再extend即可。)
  2. 在后台组装相应的数据(根据不同需求而异,我这里只取数值信息,不多言)
  3. 前台ajax获取真实数据(这一点相信大家都很纯熟,不过我的代码里是使用angularjs封装过的$.post对象来做到这一点的)
  4. 复制代码
    复制代码
    //设置真实数据格式
    $scope.default_option = {
        title : {
            text: '故障类型时序变化年轮图',
            subtext: '本图由内向外展示了各种故障类型的出现频率所占百分比,及其随时间变化的规律',
            x:'right',
            y:'bottom'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            selected: $scope.faultnameSelected
            ,data:$scope.faultname
        },
        toolbox: {
            show : true,
            feature : {
                mark : true,
                dataView : {readOnly: false},
                restore : true,
                saveAsImage : true
            }
        },
        calculable : false,
        series : {}
    };
    
     $scope.ajaxChartData = function(dataname){ 
        myChart.showLoading({
            text: '正在努力的读取数据中...',    //loading话术
        });  
        $http.post("index.php/main/readfaultnum", null).success(function(alldata){
            console.log(alldata);
            var option = $scope.default_option;
            option.series = $scope.setData(alldata);
            $scope.refresh(option,true);
            $scope.order = dataname;
    
            myChart.hideLoading();    
    
        }).error(function(){
            domMessage.innerHTML = '网络故障,获取数据失败';
        });
     };
    复制代码
    复制代码

     

 

 

5.进一步定制

虽然我使用了官网的例子实现了需求,但是我还有些自己的想法。

官网的千层饼图中,代表时间的年轮宽度是固定的。但是我们从后台读取的数据(以月为颗粒度)在时间上是变化的,随着系统使用时间增长而增长。这就导致一个问题,就是在只有一个月时,年轮只有小小一个,有50个月时,年轮多到超过了显示范围。这样很不美观,并且丧失了一定的可用性。

我决定要对其进行优化。当使用月份很少导致数据很少的时候,年轮会很宽;当使用月份很多导致数据很多的时候,年轮会很细——这样就可以同时避免数据量小的时候不美观和数据量大的时候丧失可用性的问题了。当然,如果数据量过大,年轮就会过细,同样会丧失可用性。因此我们要设置一个最大数据量的阈值,把超过的部分砍掉。

解决方案就是要对根据数据量对年轮宽度进行缩放,也就是使用比例尺函数。在echart里我暂时没有找到这样的比例尺函数。当然,线性比例尺很简单,函数可以自己写。但是其他类型的比例尺缩放就稍微要一些技巧了。好在之前我一直是使用d3类库来做可视化的,我知道d3里有这样的比例尺函数可以很容易地解决我的问题。那就是d3.scale对象,其中包含线性比例尺、平方比例尺、指数比例尺、集合比例尺,完全可以满足需要。我可以从开源的d3库中把比例尺函数抽取出来,也引入到这个页面。根据实际数据的测试结果,我选择了平方比例尺。那么接下来就很好写了:

复制代码
复制代码
var maxTime = 36; //本千层饼图最多显示60个月的数据(最多显示60个圈)
//原始数据的加工工厂函数
$scope.setData = function(data){
    //这是D3的平方比例尺函数,用于根据数据大小缩放环的宽度
    var rScale = d3.scale.sqrt()
            .domain([maxTime, 1])
            .range([3, 30])
            .nice();
    console.log(rScale(1), rScale(12), rScale(36))
    //如果数据量超过60(即有60个月),则删除60个月之前的数据,只显示最近60个月的内容
    if(data.length > maxTime){
        data.splice(0, maxTime);
    }
    //经过D3比例尺计算的环的宽度
    var R = rScale(data.length);
    console.log(R);
    for(var i=0; i<data.length; i++){
        data[i]['type'] = 'pie';
        data[i]['radius'] = [i * R + 40, i * R + 40 + R];    
        //if(typeof($scope.times[i])!= null)
        data[i]['name'] = $scope.times[i];
        data[i]['itemStyle'] = {normal : {
            label : {show : i > (data.length-2)},
            labelLine : {
                show : i > (data.length-2), 
                length:40,
                color : '#f0f',
                width : 10,
                type : 'dotted'
            }
        }};        
    }

    //显示中央文字
    setTimeout(function(){
        var myDate = new Date();
        var myMouth = myDate.getMonth()+1;
        var myYear = myDate.getFullYear();    //获取完整的年份(4位,1970-????)

        // 补充千层饼中央的说明文字
        var _ZR = myChart.getZrender();
        _ZR.addShape({
            shape : 'text',
            style : {
                x : _ZR.getWidth() / 2,
                y : _ZR.getHeight() / 2,
                color: 'orange',
                text : data.length + '个月前',
                textAlign : 'center'
            }
        });
        _ZR.addShape({
            shape : 'text',
            style : {
                x : _ZR.getWidth() / 2 + data.length * R +50,
                y : _ZR.getHeight() / 2,
                color: 'orange',
                strokeColor: 'pink',
                text : '今日 ' + myYear + "年" + myMouth + "月" ,
                textAlign : 'left',
                textFont:'normal 14px 微软雅黑'
            }
        });
        _ZR.refresh();
    }, 500);

    return data;
};
复制代码
复制代码

 

只有4个月数据时的年轮图

30个月的测试数据的年轮图

 

当然,做到这一步,虽然实现了需求,但毕竟是照着别人的例子修改,没有自己创作来的有深度。不过如何自己创作,就超过了本文的范畴,并且也不是这一篇博客所能包含得了的,日后再议。

5.浏览器兼容性:

最后必须一提浏览器兼容性问题。IE8、IE7浏览器不兼容canvas绘图(IE6请允许我直接无视),为了实现兼容需要引入excanvas_r3库。

有时IE8中绘图错位,加入以下代码启用IE7兼容模式即可解决:

 


本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/6252399.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用ECharts对数据进行可视化
通过对数据可视化,可以让数据更容易理解,激发数据使用者的 想象力。 在阿里云上,可以使用DataV进行数据的可视化。 在阿里云下,可以使用ECharts进行数据的可视化。 下面,是使用ECharts对数据进行可视化的例子。
7425 0
数据可视化图表插件--HighCharts
使用步骤: 1.引入JQuery和HighCharts库 2.div设置id用于包含 Highcharts 绘制的图表 3.使用json数据格式来配置图表 4.动态数据与服务端交互 Demo示例: 详细学习地址:HighCharts中文教程                          菜鸟教程
881 0
【云周刊】第127期:数据可视化最强CP登场!DataV接入ECharts图表库
DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化从业者推崇的开源图表库,这两个扛把子级产品的结合了。揭秘红包场景下的高性能本地存储架构设计;首届阿里巴巴研发效能嘉年华即将开幕……更多精彩技术资讯,尽在云周刊!
14073 0
《企业迁云实战》——导读
如果只是单独介绍技术,很难让读者快速抓住和理解企业迁云的实战精髓,因此我们结合了众多实际案例进行逐步解析,形成一个整体,期望读者可以快速结合自己工作中遇到的实际场景与书中案例中的场景,更好、更深刻地理解企业迁云的部署与实施过程。
4118 0
echart(2),模拟数据导入篇
先上图,就是介样子的:                       所模拟的效果就是讲左下角的li里面的数据取出来,然后用环形图的展示出数据。   看代码截图:     1.总的框架图:       2.
565 0
dart正则替换手机号中间四位为*
dart正则替换手机号中间四位为* Flutter项目中隐藏手机号中间4位
0 0
轻松上手ECS云服务器--MySQL数据库进阶实战
冬季实战营第二期已经学会了如何操作阿里云服务器ECS搭建所需要的环境,那么这一期告诉我们如何安装使用MySQL以及数据库上云迁移
0 0
百度EChart3初体验
百度EChart3初体验
0 0
SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)
SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)
0 0
vue中使用vue-echarts引入百度地图实现数据可视化
本文主要讲解vue-echarts引入百度地图实现数据可视化,实现在项目中使用百度地图的效果
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
MySQL 5.7优化不求人
立即下载
数据库智能优化系统的探索与实践
立即下载
十亿级视频播放技术优化揭秘
立即下载