前端 | 数据可视化之ECharts

猫天意

已于 2022-05-01 10:53:01 修改

阅读量1.3k

点赞数

分类专栏：前端之美文章标签：可视化数据可视化大数据 html5

于 2021-07-11 16:06:31 首次发布

本文链接：https://blog.csdn.net/weixin_46264660/article/details/118637899

版权

前端之美专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

一、数据可视化
二、ECharts简介
- 2.1 什么是ECharts
三、ECharts的快速入门

一、数据可视化

1.1 什么是数据可视化

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理

1.2 数据可视化的使用场景

在这里插入图片描述

1.3 常见可视化库

在这里插入图片描述

1.4 小结

在这里插入图片描述

二、ECharts简介

2.1 什么是ECharts

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

丰富的可视化类型
多种数据格式支持
流数据的支持
移动端优化
跨平台使用
绚丽的特效
详细的文档说明

大白话：

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
- 折线图、柱状图、散点图、饼图、K线图

ECharts能满足绝大多数可视化图表实现，使用方便，功能强大，是实现数据可视化的最优选择之一。

官网地址：https://echarts.apache.org/zh/index.html

三、ECharts的快速入门

3.1 ECharts使用五部曲

ECharts使用五步曲:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts体验</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
    <!-- 1. 下载引入EChart.js 文件 -->
    <script src="js/echarts.min.js"></script>
</head>

<body>
    <!-- 2. 准备一个盒子用来装生成的图表 注意： 这个盒子必须具备大小 -->
    <div class="box"></div>
    <script>
        //    3.初始化echarts 实例对象    
        var myChart = echarts.init(document.querySelector('.box'));
        //  4.  指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 5. 将配置项和数据(option) 设置给 实例对象(myChart)
        myChart.setOption(option);
    </script>
</body>

</html>