web应用实战篇（echart篇）：一步步教你做可视化大屏（准备篇）

最新推荐文章于 2023-06-28 23:19:14 发布

dhjabc_1

最新推荐文章于 2023-06-28 23:19:14 发布

阅读量1.6k

点赞数 2

分类专栏： web网站项目实战（python版）文章标签： python web 数据可视化

本文链接：https://blog.csdn.net/dhjabc_1/article/details/105764890

版权

web网站项目实战（python版）专栏收录该内容

12 篇文章 9 订阅

订阅专栏

一直计划做一个可视化的大屏，然后今天花了一些时间做前期的准备工作，下面是准备过程中的一些总结，分享给大家伙，希望你们能够喜欢！
下面正式进入主题吧！web应用实战篇（echart）：一步步教你做可视化大屏（准备篇）

一、什么是ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

（一）丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

（二）多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。

（三）深度的交互式数据探索

交互是从数据中发掘信息的重要手段。“总览为先，缩放过滤按需查看细节”是数据可视化交互的基本需求。
ECharts 提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

（四）多维数据的支持以及丰富的视觉编码手段

ECharts 3 开始加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码，能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。

（五）动态数据

ECharts 由数据驱动，数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单，只需要获取数据，填入数据，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 timeline 组件能够在更高的时间维度上去表现数据的信息。

二、第一个完整的案例

（一）引入 ECharts

通过标签方式直接引入构建好的 echarts 文件，下载地址：https://www.echartsjs.com/zh/download.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

（二）绘制一个简单的DIV容器

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

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

（三）绘制一个简单的echarts实例

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="{{ url_for('static',filename='echarts.min.js') }}"></script>
</head>
<body>
    <h1>hello echarts</h1>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="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],
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

（四）运行效果

在这里插入图片描述

三、基本概念

（一）echarts 实例

一个网页中可以创建多个 echarts 实例。每个 echarts 实例中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。

（二）系列（series）

系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个系列包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、…

（三）组件（component）

在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、…
其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
在这里插入图片描述

（四）用 option 描述图表

上面已经出现了 option 这个概念。echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。

// 创建 echarts 实例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);

// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
var option = {
    // option 每个属性是一类组件。
    legend: {...},
    grid: {...},
    tooltip: {...},
    toolbox: {...},
    dataZoom: {...},
    visualMap: {...},
    // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
    xAxis: [
        // 数组每项表示一个组件实例，用 type 描述“子类型”。
        {type: 'category', ...},
        {type: 'category', ...},
        {type: 'value', ...}
    ],
    yAxis: [{...}, {...}],
    // 这里有多个系列，也是构成一个数组。
    series: [
        // 每个系列，也有 type 描述“子类型”，即“图表类型”。
        {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
        {type: 'line', data: [2231, 1234, 552, ... ]},
        {type: 'line', data: [[4, 51], [8, 12], ... ]}
    }]
};

// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
chart.setOption(option);

（五）组件的定位

多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。
其中，他们每个值都可以是：
绝对数值（例如 bottom: 54 表示：距离 echarts 容器底边界 54 像素）。
或者基于 echarts 容器高宽的百分比（例如 right: ‘20%’ 表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%）。
我们可以注意到，left right width 是一组（横向）、top bottom height 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 left 和 right 就可以了，width 会被自动算出。

（六）坐标系

很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 echarts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系等。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。

一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid自动引用并组织起来，共同工作。

四、一个优化的案例

ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现上述的优化：

（一）显示数值

                label:{
                    show:true,
                    padding:3,
                    textShadowBlur:20,
                    textShadowColor:'rgba(0, 0, 0, 0.8)'
                },

（二）显示markpoint

                markPoint:{
                    symbol:'pin',
                    symbolSize:30,
                    data:[
                         {type: 'min', name: '最小值'},
                         {type: 'max', name: '最大值'},
                    ]
                },

（三）显示markline

                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
            }，

（四）修改柱子的颜色

            series: [{
                name: '销量',
                type: 'bar',
                color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f'],
                data: [5, 20, 36, 10, 10, 20],

（五）设置背景色

backgroundColor: '#999',

（六）设置visualMap效果

            visualMap: {
                show: false,
                min: 0,
                max: 50,
                inRange: {
                    colorLightness: [0, 1]
                }
            },

（七）增加数据区域缩放组件

    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            start: 10,
            end: 60
        },
        {
            type: 'inside',
            xAxisIndex: 0,
            start: 10,
            end: 60
        },
        {
            type: 'slider',
            yAxisIndex: 0,
            start: 30,
            end: 80
        },
        {
            type: 'inside',
            yAxisIndex: 0,
            start: 30,
            end: 80
        }
    ],

（七）最终完整的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="{{ url_for('static',filename='echarts.min.js') }}"></script>
</head>
<body>
    <h1>hello echarts</h1>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            backgroundColor: '#999',
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    start: 10,
                    end: 60
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    start: 10,
                    end: 60
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    start: 30,
                    end: 80
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    start: 30,
                    end: 80
                }
            ],
            visualMap: {
                show: false,
                min: 0,
                max: 50,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                color: ['#32C5E9'],
                data: [5, 20, 36, 10, 10, 20],
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                },
                label:{
                    show:true,
                    padding:3,
                    textShadowBlur:20,
                    textShadowColor:'rgba(0, 0, 0, 0.8)'
                },
                markPoint:{
                    symbol:'pin',
                    symbolSize:30,
                    data:[
                         {type: 'min', name: '最小值'},
                         {type: 'max', name: '最大值'},
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
            }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

（八）运行效果

在这里插入图片描述
好吧，纯练手的作品，而且这只是介绍基础知识，因此UI不是本博文的重点，纯属抛砖引玉，希望大家喜欢。

感谢各位的阅读。
参考资料：https://www.echartsjs.com/zh/index.html

dhjabc_1

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
web应用实战篇（echart篇）：一步步教你做可视化大屏（准备篇）

一直计划做一个可视化的大屏，然后今天花了一些时间做前期的准备工作，下面是准备过程中的一些总结，分享给大家伙，希望你们能够喜欢！下面正式进入主题吧！web应用实战篇（echart）：一步步教你做可视化大屏（准备篇）文章目录一、什么是ECharts（一）丰富的可视化类型（二）多种数据格式无需转换直接使用（三）深度的交互式数据探索（四）多维数据的支持以及丰富的视觉编码手段（五）动态数据二、第一个完整...
复制链接

扫一扫