Echarts系列(一): 可视化技术概述与Echarts⼊⻔

一、数据可视化概述

广义上来说，数据可视化本身是一种泛称，它统一了较成熟的科学可视化和较年轻的信息可视化。而在大数据时代，除了包含这两种以外还囊括了在他们基础上发展起来的知识可视化以及结合了数据分析的可视化分析。

从字面意义来说，数据可视化，顾名思义：就是能够以视觉上的一些展现方式来展现我们想要让用户看到的数据

三、什么是数据可视化？

狭义上来讲，数据可视化就是借助某些工具以图形去展示数据，从而能够清晰有效地传达与沟通信息。
说白了，就是用来传递信息的，能够用最简单的方式去传递最准确的信息，可以让用户更直观的看到数据，节约了人们思考的时间。一般以图表形式更生动的表现出来。

四、经典可视化案例

这里我就不多叙述了，转发一下大神的文章，可以说是在没有计算机的时候，通过手绘出来的早期经典案例。链接如下：

https://www.sohu.com/a/364201313_387904

五、⼤数据可视化的价值

说到大数据可视化的价值，我们都知道，数据本身是不会产生价值的，但是对数据进行分析，能够预测未来，然后总结过去的话，那么就会产生价值了。
我们分析数据的结果，肯定是给用户看的，那么用户希望看到的数据肯定是越简单越好，能够读懂数据，把这个数据能够转化到大脑里面，随之做出正确的决策。这才是大数据可视化最终的价值所在。

六、数据可视化⼯具、案例、书籍

关于数据可视化工具，那就太多了！这里转发大神的文章，里面有一些常用的软件：

链接地址：https://www.uisdc.com/useful-data-visualization-tools

案例的话，因为常用的还是Echarts开源框架，所以我们可以看下百度Echarts官网提供案例：

链接地址：https://echarts.apache.org/examples/zh/index.html

数据可视化书籍推荐：

数据可视化之美

数据可视化设计

视不可当：信息图与可视化传播

可视化项目管理

等等很多书籍，可以网上搜，也可以在淘宝上买一些电子资料

七、Echarts概述

ECharts是一个商业级数据图表,纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器。

它是由百度的技术部门所开发，最早是用在百度旗下的一些项目上的，后来其他应用觉得挺不错，也都逐渐使用，后来百度就进行了开源，只是现在已经托管到阿帕奇( Apache)组织了，目前已经更新到4.x版本。

官网也有着详细使用介绍，不过还是建议用2.x版本的，能够让我们初学者遇到问题能够在网上很快找到解决方案。毕竟2.x相对来说更稳定一些，而且以后想再去使用3.x以上版本，也更能理解

八、Echarts特性介绍

百度官方是这样说的：

浏览Echarts所输出的图标，你不在只是个“读者”，你可以参与其中，这就是Echarts，我们正在打造的一个拥有互动图形用户界面(GUI)的数据可视化工具

事实上，它也确实做到了这一点，这也就是为什么Echarts这么多人使用的原因，相比其他js图标库来说，它打破了单纯的视觉呈现，允许用户对所呈现的数据进行挖掘、整合，让可视化成为辅助用户来进行视觉化思考的方式

详细的特性，官网也有教程，这里就不一一叙述了，上链接：

https://echarts.apache.org/zh/feature.html#chart-types

九、如何快速上⼿开发⼀个Echarts可视化图表

不多说，上手官网教程的一个简单使用，如果使用的是vue，react等框架的话，那就简单了，
在项目中通过： npm install echarts --save    下载依赖
然后就可以愉快的在组件当中去使用了，比如vue项目，可以再data中定义对象，然后通过给元素绑定ref获取当前dom，对dom进行挂载就可以使用。当然这只是一种使用方式，具体可以先学习官网教程，然后再去试着在其他框架中使用

获取 ECharts

你可以通过以下几种方式获取 ECharts。

从 Apache ECharts (incubating) 官网下载界面获取官方源码包后构建。

在 ECharts 的 GitHub 获取。

通过 npm 获取 echarts，npm install echarts --save，详见“[在 webpack 中使用 echarts](https://echarts.apache.org/tutorial.html#在 webpack 中使用 ECharts)”

通过 jsDelivr 等 CDN 引入

引入 ECharts

通过标签方式直接引入构建好的 echarts 文件
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <script src="echarts.min.js"></script>
</head>
</html>
绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    
    <script src="echarts.min.js"></script>
</head>
<body>
    
    <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]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
这样你的第一个图表就诞生了！

十、如何阅读Echarts官⽅⽂档

链接地址：[https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts](https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts)

点击地址有详细的官网教程，看完可以去看看api文档。

重要的无非就是 API 教程和 GL配置

十一、Echarts学习必备基础知识

想要学习Echarts，最起码对html，css，javascript，有一定的了解，不了解的也没关系，只要简单会用html就可以。

使用Echarts，基本这四大项得掌握一下：

接口(enterprise charts 图标库)

图表类型(常用的有：柱状图，折线图，散点图，饼图，雷达图，等等)

组件(熟练使用组件中的每个属性对象，比如坐标轴(Axis)，标题(Title)，图例（Legend）等等)

基础库（canvas类库）

十二、Echarts3.x与Echarts2.x的区别

Echarts3.x其实相对于2.x来说没什么太大的改动，只是做了进一步优化，其实2.x的可用性和效果相对来说还是更实用一点，做出来的效果也更加炫酷。当然之后如果没有2.x了，那么3.x之后的版本肯定是一个主流趋势

Echarts系列(一): 可视化技术概述与Echarts⼊⻔

一、数据可视化概述

三、什么是数据可视化？

四、经典可视化案例

五、⼤数据可视化的价值

六、数据可视化⼯具、案例、书籍

七、Echarts概述

八、Echarts特性介绍

九、如何快速上⼿开发⼀个Echarts可视化图表

获取 ECharts

引入 ECharts

绘制一个简单的图表

十、如何阅读Echarts官⽅⽂档

十一、Echarts学习必备基础知识

十二、Echarts3.x与Echarts2.x的区别

猜你喜欢