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

最新推荐文章于 2024-04-03 16:23:48 发布

BUG弄潮儿

最新推荐文章于 2024-04-03 16:23:48 发布

阅读量409

点赞数

文章标签：可视化数据可视化 js javascript css

原文链接：https://item.jd.com/12340304.html

版权

小南：你先跟我说说什么是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: [5, 20, 36, 10, 10, 20]

            }]

        };



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

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所示。