简单的ECharts数据可视化,30分钟学会

小南:你先跟我说说什么是ECharts吧。

信平:ECharts是开源的商业及数据图表库,它是一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度定制化定制的数据可视化图表。ECharts中加入了更丰富的交互功能以及更多的可视化效果,并对移动端做了深度的优化。

简单的说,ECharts是由来自百度EFE数据可视化团队开发的,ECharts是基于JavaScript的数据图表库。

小南:明白,那么ECharts要怎么用呢?

信平:很简单,ECharts官网下载地址:

http://echarts.baidu.com/download.html。

       使用ECharts绘制简单的图表,新建 echarts_demo目录,在目录下新建文件夹jslib,把下载的echarts.min.js放入到此目录中。本案例中的脚本结构如下。

echarts_demo01

└─jslib

└─echarts.min.js

│─echarts_demo.html

然后在echarts_demo01目录下新建echarts_demo.html页面。

<!DOCTYPE html>

<html>

<head>

     <metacharset="utf-8" />

     <title></title>

     <!--引入 echarts.js -->

<scriptsrc="jslib/echarts.min.js"></script>

</head>

<body>

<!--为ECharts准备一个具备大小(宽高)的Dom -->

<div id="main"style="width: 600px;height:400px;"></div>

<scripttype="text/javascript">

        // 基于准备好的dom,初始化echarts实例

        var myChart =echarts.init(document.getElementById('main'));



        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        };



        // 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

</body>

</html>

使用浏览器打开echarts_demo.html页面,显示效果如图8-46所示。

本案例中,我们使用ECharts绘制简单的柱状图,有以下知识点需要注意。

1,引入ECharts

ECharts是一个纯JavaScript的图标库,需要像普通的JavaScript库一样用script标签引用。

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8">

<!--引入ECharts文件 -->

<scriptsrc="jslib/echarts.min.js"></script>

</head>

</html>

2, 绘制简单图表

在绘图前需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>

<!--为ECharts准备一个具备大小(宽高)的 DOM -->

<div id="main"style="width: 600px;height:400px;"></div>

</body>


       然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。

<scripttype="text/javascript">

        // 基于准备好的dom,初始化echarts实例

        var myChart =echarts.init(document.getElementById('main'));



        // 指定图表的配置项和数据

        var option = {

            title: {

                text'ECharts入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

yAxis: {},

            series: [{

                name'销量',

                type'bar',

                data: [52036101020]

            }]

        };



        // 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

 

小南:哇,ECharts功能好强大啊,可以给我举一些常用图表的范例吗?

信平:OK,在数据分析中常用的图表就是柱形图,下面我们来看看Flask和ECharts结合的范例吧。

在新建 echarts_demo2目录,在目录下新建文件夹jslib,把下载的echarts.min.js放入到此目录中。在本例中实现显示多个图表功能。本案例中的脚本结构如下。

echarts_demo2

└─jslib

└─echarts.min.js

│─report.py

│─echarts_bar.html

       然后在echarts_demo2目录下新建路由report.py

# -*- coding: utf-8 -*-

from flask import Flask


app = Flask(__name__,static_url_path='', static_folder='')


if __name__ == '__main__':

app.debug = True

app.run(host='0.0.0.0', port=80)

启动Flask服务器,在命令行运行以下 report.py 脚本启动服务器

python report.py

   柱形图

在echarts_demo2目录下新建页面echarts_bar.html

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8">

<title>ECharts</title>

<!--引入 echarts.js-->

<scriptsrc="jslib/echarts.min.js"></script>



</head>

<body>

<!--为ECharts准备一个具备大小(宽高)的Dom -->

<div id="main"style="width: 600px;height:400px;"></div>

<scripttype="text/javascript">

        // 基于准备好的dom,初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));



        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts柱状图'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        };



        // 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

</body>

</html>

然后访问http://127.0.0.1/echarts_bar.html,就会出现一个Echarts的柱状图,如图8-48所示。

小南:棒棒的,Echarts功能简单,和Flask结合在一起就像是“倚天剑“+“屠龙刀”的组合。

 

推荐一本好书,这本书参加了京东年中购物节,每满100减50

购买二维码

另外由于出版社美眉送了一本,送给有需要的朋友,规则就一条:留言点赞最多者,且大于十者