大数据可视化展现之echarts实操

最新推荐文章于 2024-03-12 22:39:28 发布

山东大葱哥

最新推荐文章于 2024-03-12 22:39:28 发布

阅读量5.5k

点赞数 1

分类专栏：大数据文章标签：大数据可视化百度 javascript 插件

本文链接：https://blog.csdn.net/jmfang/article/details/77894020

版权

大数据专栏收录该内容

5 篇文章 3 订阅

订阅专栏

前言

作为大数据分析的最终目的是为了得到某种形式的输出结果，而这些输出结果大都以可视化图表的形式进行展示，当然了有些大数据分析不需要图表展示如推荐系统。

而可视化展现自然需要一套好用的图表插件，市场上有很多可以展现各种图表的插件，今天我给大家介绍的是百度出品的echarts，目前最新版本为echarts3，作为实例我使用的echarts2。

echarts2简介

echarts是一套基于javascript的轻量级图表框架，使用方式非常简单，而展现的图表形式很丰富，而且展现的图表集成了很多实用的交互展示，如可以根据需要对图表中的数据项进行隐藏，支持对数据进行拖拽、可以到处为图片格式等等。

动手操练

本地新建一个html文件，引入echarts，构造对应的展示数据，然后就可以双击这个html文件在浏览器中访问了，就是这么简单，甚至都不需要应用服务器、web服务器的支持。是不是超级轻量级呢。

基本的页面代码如下：

<!DOCTYPE html>  
<head>  
    <meta charset="utf-8">  
    <title>数据展示</title>  
</head>
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="height:400px"></div>      
    <!-- ECharts单文件引入 -->  
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>  
    <script type="text/javascript">  
        // 路径配置  
        require.config({  
            paths: {  
                echarts: 'http://echarts.baidu.com/build/dist'  
            }  
        });  
         // 使用柱状图就加载bar模块，按需加载
        require(
            [
                'echarts',
                'echarts/chart/bar', 
                'echarts/chart/line',
        'echarts/chart/funnel' //漏斗图
            ],
            function (ec) {
            chart1(ec);  //绘制chart的函数，便于查看独立出来
            }
        ); 
        //绘制图表1 
        function chart1(ec){
          //具体代码见下文
        }
    </script>  
</body>

直角系图表
2.1. 构造对应直角系绘图代码如下：

function chart1(ec){
    //基于准备好的dom，初始化echarts图表
    var myChart = ec.init(document.getElementById('main')); 
    // 过渡---------------------
    myChart.showLoading({
        text: '正在努力的读取数据中...',    //loading话术
    });
    myChart.hideLoading();
    var option = {
        title : {
            text: '2016年每日数据分析',
            subtext: '测试数据'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}",                        
            show: true
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        legend: {
            data:['注册人数','实名人数','充值人数',
            '当日新注册投资人数',"投资总人数","首投人数",
            "复投人数","还款人数","提现人数"]
        },
        xAxis : [
        {
            type : 'category',
            data : ["A月1日","A月2日","A月3日","A月4日","A月5日",
            "A月6日","A月7日","A月8日","A月9日","A月10日",
            "A月11日","A月12日","A月13日","A月14日","A月15日",
            "A月16日","A月17日","A月18日","A月19日","A月20日",
            "A月21日","A月22日","A月23日","A月24日","A月25日",
            "A月25日","A月25日","A月25日","A月29日","A月30日",
            "A月31日"]
        }
        ],
        yAxis : [
        {
            type : 'value'
        }
        ],
        series : [
        {
            name:"注册人数",
            type:'bar',
            stack:'group1',//堆积展示
            data:[12,10,11,7,4,5,16,15,27,19,13,13,15,29,18,15,23,19,
            15,8,26,30,26,22,17,17,17,17,82,70,74]
        },
        {
            name:"实名人数",
            type:'bar',
            stack:'group1',//堆积展示
            data:[7,3,4,4,1,4,7,4,16,4,6,6,4,20,7,8,17,12,4,6,13,13,
            15,14,10,10,10,10,54,58,56]
        },
        {
            name:"充值人数",
            type:'line',
            data:[19,19,23,15,14,5,27,22,30,27,21,
            14,14,42,33,36,31,47,
            20,12,47,48,46,50,42,42,42,42,80,84,65]
        },
        {
            name:"当日新注册投资人数",
            type:'line',
            data:[2,2,0,2,1,0,6,1,4,2,1,4,1,17,5,6,7,8,3,4,9,4,
            7,7,7,7,7,7,39,46,44]
        },
        {
            name:"投资总人数",
            type:'line',
            data:[52,66,64,61,52,66,69,77,93,59,71,71,59,113,96,80,
            75,89,77,46,113,79,112,102,82,82,82,82,148,143,96]
        },
        {
            name:"首投人数",
            type:'line',
            data:[3,6,3,3,5,0,8,2,7,6,2,5,1,19,7,8,7,11,4,5,13,6,
            14,10,13,13,13,13,42,58,51]
        },
        {
            name:"复投人数",
            type:'line',
            data:[49,61,62,60,48,66,62,75,87,54,69,66,
            58,95,90,75,70,
            80,74,41,101,74,99,93,92,92,92,92,108,87,46]
        },
        {
            name:"还款人数",
            type:'line',
            data:[71,52,129,0,0,177,0,33,98,0,140,
            89,78,105,116,68,
            110,82,33,36,162,37,181,81,70,70,70,70,145,27,0]
        },
        {
            name:"提现人数",
            type:'line',
            data:[47,43,30,46,0,0,92,29,32,46,14,0,0,112,52,63,42,
            56,0,0,129,54,30,60,39,39,39,39,42,74,40]
        }
            ]
    };        
    // 为echarts对象加载数据 
    myChart.setOption(option); 
}

2.2. 直角系效果展示图一
对应的展示如下：
直角系折线图及柱形图展示

2.3. 直角系效果展示图一
在图例区域可以点击图例名称，则会隐藏不需要的数据展示，对应的展示如下：
隐藏掉部分图例

漏斗图
3.1. 漏斗图代码构造
如果需要展示漏斗图，则首先要在声明也就是require ‘echarts/chart/funnel’，然后就是修改对应的构造绘图代码部分。

unction chartFunnel(ec){        
    // 基于准备好的dom，初始化echarts图表
    var myChart = ec.init(document.getElementById('main3')); 
    // 过渡---------------------
    myChart.showLoading({
        text: '正在努力的读取数据中...',    //loading话术
    });
    myChart.hideLoading();
    var option = {              
        title : {
            text: '注册实名投资漏斗图',
            subtext: '每日漏洞转换'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}",                        
            show: true
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        legend: {
        data:['注册人数','实名人数','当日新注册投资人数']
        },
        calculable:true,//允许拖拽重新计算
        series : [
        {
            name:"A月1日漏斗",
            type:'funnel',
            sort : 'descending',
            width:'40%',
            data:[
                {value:12,name:'注册人数'},
                {value:7,name:'实名人数'},
                {value:2,name:'当日新注册投资人数'}
            ]
        },
        { 
            name:"A月2日漏斗",
            type:'funnel', 
            x : '50%',
            sort : 'ascending',
            itemStyle: {
                normal: {
                    label: {position: 'left'}
                }
            },
            width:'40%',
            data:[
                {value:10,name:'注册人数'},
                {value:3,name:'实名人数'},
                {value:2,name:'当日新注册投资人数'}
            ]

        }
        ]
    };        
    // 为echarts对象加载数据 
    myChart.setOption(option);  
}

3.2. 漏斗图效果
漏斗图展示效果如下：

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入技术爱好者交流群373107565，我们一起学技术！

小总结

基本上操练下来，还是很顺畅和简洁的。而且echarts提供了在线的excel表格数据转javascript数据或json格式工具，只需要复制表格到在线工具，即可方便的生成对应的数据格式。

小建议：为了图表展示的美观性，每一个维度的纵坐标数据最好在一个量级内，如果某一个指标的量级较大，会造成别的维度数据纵坐标太低而看不到效果。

山东大葱哥

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
大数据可视化展现之echarts实操

作为大数据分析的最终目的是为了得到某种形式的输出结果，而这些输出结果大都以可视化图表的形式进行展示，当然了有些大数据分析不需要图表展示如推荐系统。而可视化展现自然需要一套好用的图表插件，市场上有很多可以展现各种图表的插件，今天我给大家介绍的是百度出品的echarts，目前最新版本为echarts3，作为实例我使用的echarts2。echarts2简介echarts是一套基于javascript
复制链接

扫一扫