关于javascript:ECharts数据可视化从0到1的蜕变内部技术分享总结

33次阅读

共计 11544 个字符，预计需要花费 29 分钟才能阅读完成。

前言

最近接到一个新的工作，说是在公司外部要组织发展技术交换分享会，为了促成程序共事间的技术气氛，进步大家的学习积极性，让更多的人能参加进来，已纳入部门和集体绩效考核领域。

模式很简略，每周都会进行一次技术分享。分享人由入职工夫先后顺序安顿。题材不限，能够是本人相熟的技术畛域或某个知识点，比方 区块链开发者 分享底层公链、联盟链、智能合约等等；服务端开发 者分享框架与设计模式，SQL 深度优化，音讯队列等等，前端开发者 分享 MVVM 模式，WEB 前端性能优化，数据可视化，CSS3 高级用法等等。

能够是一些通用的技术，比方数据结构，算法，代码标准，学习路线指南，调试技巧等，甚至能够是看书读后感（读书笔记）等等，抑或是最近大家在钻研一个开源的我的项目，也能够跟大家讲讲这个开源我的项目的架构，或者有些人利用业余时间做了一个小工具插件，也能够拿进去分享。

首次线下分享经验

有图有假相，感激共事们的反对与关注，快来瞧一瞧，站在台上是不是老帅了。

先简略介绍一下本人，我是 Jack Chen，一名十分酷爱学习的 【高级 Web 前端工程师】，从事 Web 前端工作多年，具备丰盛的大中型实战我的项目开发教训。【学习与写作】 是目前惟一每天都保持实现的事件，业余时间的我，喜爱写作和分享。我经营着本人的 公众号【懒人码农】和有着一群喜爱浏览我文章的读者，还能跟着气味相投的搭档们一起交流学习一起提高。

集体 3D 酷炫动画博客地址：http://106.55.168.13:8888/

数据可视化源码下载地址：https://github.com/jackchen0120

在线数据可视化平台演示地址：https://jackchen0120.github.io/vueDataV/

小编接到这个工作后，第一反馈是本人感觉没啥压力，反而更加有能源，想着怎么去做好这次技术分享会。还被动提出作为 2021 新年第一场技术分享者，也是首次尝试线下交换分享会。

分享几点播种

  • 做技术分享，最大的受益者在分享者身上。在分享的筹备和过程中，训练了写作能力，组织能力，演讲能力，和材料整顿能力。再面向本人的共事陈说一遍，分享的材料才会真真正正变成本人的货色。
  • 学会制作 PPT 演讲稿或画思维导图
  • 通过分享会，让更多的人参加进来，大家相互交换和探讨技术，能够相互进步，结识更多大牛。

此次分享自我感觉还不错，取得了一大波粉丝的反对与关注，尽管本人还有很多有余（比方：工夫管控、语言表达、互动交换），这只是临时的，后续会加倍努力做得更好。思考到让更多的小伙伴对数据可视化有个全新的意识，以及感兴趣参加入手开发属于本人的炫酷作品，小编加班加点赶出这边文章，心愿对大家有所帮忙。

主题内容从三个方面进行论述

  • 第一局部：这是什么呢？（What）
  • 第二局部：为什么用这个呢？（Why）
  • 第三局部：如何做更好呢？（How）

What?

数据可视化

科普

百度百科

数据可视化（Data visualization）是对于数据视觉表现形式的科学技术钻研。其中，这种数据的视觉表现形式被定义为，一种以某种概要模式抽提进去的信息，包含相应信息单位的各种属性和变量。

数据可视化视频介绍：https://baikevideo.cdn.bcebos.com/media/mda-O95ntOML8EqV0Umy/913a849554690764f3708ce06c2d15a0.mp4

可视化（Visualization）是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示进去，再进行交互解决的实践、办法和技术。

可视化视频介绍：https://baikevideo.cdn.bcebos.com/media/mda-O95fgdPNjvL51hpe/3fc58c4084f854393b6c2a2320eb4127.mp4

维基百科

数据可视化 被许多学科视为与视觉传播含意雷同的古代概念。它波及到数据的可视化示意的创立和钻研。为了清晰无效地传递信息，数据可视化应用统计图形、图表、信息图表和其余工具。能够应用点、线或条对数字数据进行编码，以便在视觉上传播定量信息。

可视化 是指用于创立图形、图像或动画，以便交换沟通讯息的任何技术和办法。在历史上包含洞穴壁画、埃及象形文字等，现在可视化有不断扩大的应用领域，如迷信教育、工程、互动多媒体、医学等。

定义

数据可视化能够加强数据的出现成果，不便用户以更加直观的形式察看数据，进而发现数据中暗藏的信息。

目标

借助于图形化伎俩，清晰无效地传播与沟通信息。

前端可视化

利用前端技术手段，以前端体现层伎俩展现、解决和剖析数据。

ECharts

定义

ECharts，Enterprise Charts，商业级数据图表，一个应用 JavaScript 实现的开源可视化库，能够晦涩的运行在 PC 端和挪动端的绝大部分浏览器上，底层依赖矢量图形库 ZRender，提供直观，交互丰盛，可高度个性化定制的数据可视化图表。

由百度商业前端数据可视化团队打造的一款开源可视化工具，目前已捐献给 Apache 开源软件基金会，作为孵化我的项目。

个性

  • 丰盛的可视化类型（统计数据可视化、天文数据可视化、关系数据可视化）
  • 多种数据格式无需转换间接应用（二维表、key-value 键值对）
  • 千万数据的前端展现
  • 挪动端优化，交互和布局适配，按需打包
  • 跨平台应用（PC 端、挪动端、微信小程序）
  • 壮丽的特效
  • …

Why?

技术现状

  • 当初的数据时代，数据可视化因为数据分析的炽热而变得逐步炽热起来，然而数据可视化并不是一个新的技术，尽管说数据可视化绝对于数据分析来说相当的简略，然而数据可视化却是一个重要的技术。
  • 在国外，其实数据可视化曾经很成熟了，比如说新闻方面，他们借助于数据可视化的技术，应用图像化来流传信息，以此来进步本人的影响力。而在我国，数据可视化起步的工夫较晚一点，比方阿里巴巴的淘宝指数，通过旗下的电子交易产生的商业数据进行剖析和可视化，为买家、卖家和其余第三方提供信息，进行分享。

发展趋势

  • 进步从业者的职业素养，造就创新型人才，数据的客观性和准确性对任何企业来说都是十分重要的，大数据分析从业者面对海量数据信息时要精确的梳理出所须要信息，还须要具备对数据信息进行收集、剖析及决策的能力。
  • 要共享数据，数据不是机密，咱们当初的大数据时代，人人即是数据的生产者，也是信息的接收者，大量简单的信息，咱们应该从这些信息中汲取有用的信息，随着媒体技术的倒退，应该提供共享数据，共事对数据进行监管，使数据失去。
  • 要制作有创新型、个性化的数据体验，大数据时代不应该停留在传统的模式上，应该采取多种模式来满足不同的用户，个性化、创新型是将来数据可视化的发展趋势。

应用益处

  • 更容易被记住
  • 以建设性形式探讨后果
  • 更好了解经营和后果之间的连贯

How?

基础知识储备

  • HTML（超文本标记语言）
  • CSS（层叠样式表）
  • JavaScript（简称：JS，脚本编程语言）
  • ECharts（JS 插件）

实现形式

报表类

针对一般使用者

Excel 图表制作软件

商业智能 BI

针对业余数据分析人员，会应用可视化工具软件。

  • Microsoft BI
  • Power BI

编码类

针对程序开发人员，有肯定的编程根底。

ECharts

劣势

  • 国人开发，文档全，便于开发和浏览文档
  • 图表丰盛，能够实用各种各样的性能

劣势

  • 基于图形语法的能力不够灵活性
  • 简单关系型图表比拟难定制

D3

劣势

  • 弱小的 SVG 操作能力，能够非常容易的将数据映射为 SVG 属性
  • 集成了大量数据处理、布局算法和计算图形的工具办法
  • 弱小的社区和丰盛的 DEMO

劣势

  • API 太底层，复用性低，学习与应用老本高

HighCharts

劣势

  • 应用门槛极低，兼容性好
  • 应用宽泛，十分成熟

劣势

  • 款式比拟古老、图表难以扩大
  • 商业上应用须要购买版权

AntV

模块

  • 底层绘图引擎 G
  • 可视化语法类库 G2（灵便的图形语法）
  • 关系可视化类库 G6
  • 挪动端图表类库 F2
  • 可视化设计指引与应用标准

劣势

  • 简略、易用
  • 齐备的可视化编码
  • 弱小的扩大能力

劣势

  • 语法须要肯定学习老本

ECharts 根本应用

疾速上手五部曲

  • 引入 echarts.js 文件
  • 筹备一个出现图表的盒子
  • 基于 DOM 容器，初始化 echarts 实例对象
  • 指定配置项和数据
  • 将配置项设置给 echarts 实例对象

根底配置

首先 ECharts 的图形化出现次要是通过配置办法来实现的 setOption，而后是对图形标签进行初始化，最初把配置办法 setOption 赋值到初始化图形中，具体的配置文件请戳这里 https://echarts.apache.org/zh/option.html#title

编程实操

HTML 根本模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>HTML 根本页面模板 </title>
</head>
<body>
    <!-- 1. 引入 echarts.js 文件，通过 CDN 引入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <!-- 2. 筹备一个出现图表的盒子，必须设置宽高 -->
    <div id="main" style="width:600px;height:450px;"></div>
    <script>
        // 3. 获取 DOM 元素，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));
        // 4. 指定图表的配置项和数据
        var option = {// ...}
        // 5. 应用指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

5 分钟上手 ECharts，请移步 ECharts 官网文档

代码实现

小编利用业余时间开发的大数据可视化平台演示地址：https://jackchen0120.github.io/vueDataV/#/

折线图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>echarts 折线图示例 </title>
</head>
<body>
    <!-- 1. 引入 echarts.js 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <!-- 2. 筹备一个出现图表的盒子 -->
    <div id="main" style="width:600px;height:450px;"></div>
    <script>
        // 3. 获取 DOM 元素，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));
        // 4. 指定图表的配置项和数据
        var option = {
            title: { // 题目
                text: 'Echarts 入门示例'
            },
            tooltip: {
                trigger: 'axis', // 坐标轴触发
                axisPointer: { // 坐标轴指示器
                    type: 'cross',
                    label: {backgroundColor: '#283b56'}
                }
            }, // 提示框
            legend: {data: ['区块链利用']
            }, // 图例
            xAxis: { // 直角坐标系 x 轴
                data: ['天河数通', '地质大数据', '自主可控公链', '优版权', '麻利指控']
            },
            yAxis: {name: '注册用户（个）',}, // 直角坐标系 y 轴
            series: [{ // 系列列表
                name: '区块链利用', // 系列名称
                type: 'line', // 图表类型
                smooth: true, // 平滑曲线显示
                data: [48, 18, 9, 25, 2], // 数据内容数组 
            }]
        }
        // 5. 应用指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

运行成果如下图所示：

柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>echarts 柱状图示例 </title>
</head>
<body>
    <!-- 1. 引入 echarts.js 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <!-- 2. 筹备一个出现图表的盒子 -->
    <div id="main" style="width:600px;height:450px;"></div>
    <script>
        // 3. 获取 DOM 元素，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));
        // 4. 指定图表的配置项和数据
        var option = {
            title: { // 题目
                text: 'Echarts 入门示例'
            },
            tooltip: {
                trigger: 'axis', // 坐标轴触发
                axisPointer: { // 坐标轴指示器
                    type: 'shadow',
                    label: {backgroundColor: '#283b56'}
                }
            }, // 提示框
            legend: {data: ['区块链利用']
            }, // 图例
            xAxis: { // 直角坐标系 x 轴
                data: ['天河数通', '地质大数据', '自主可控公链', '优版权', '麻利指控']
            },
            yAxis: {name: '注册用户（个）',}, // 直角坐标系 y 轴
            series: [{ // 系列列表
                name: '区块链利用', // 系列名称
                type: 'bar', // 图表类型
                data: [48, 18, 9, 25, 2], // 数据内容数组 
            }]
        }
        // 5. 应用指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

运行成果如下图所示：

饼图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>echarts 柱状图示例 </title>
</head>
<body>
    <!-- 1. 引入 echarts.js 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <!-- 2. 筹备一个出现图表的盒子 -->
    <div id="main" style="width:600px;height:450px;"></div>
    <script>
        // 3. 获取 DOM 元素，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));
        // 4. 指定图表的配置项和数据
        var option = {
            title: { // 题目
                text: 'Echarts 入门示例'
            },
            tooltip: {
                trigger: 'item', // 数据项图形触发
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            }, // 提示框
            legend: {data: ['区块链利用']
            }, // 图例
            series: [{ // 系列列表
                name: '区块链利用', // 系列名称
                type: 'pie', // 图表类型
                data: [
                    {value: 48, name: '天河数通'},
                    {value: 18, name: '地质大数据'},
                    {value: 9, name: '自主可控公链'},
                    {value: 20, name: '优版权'},
                    {value: 2, name: '麻利指控'}
                ] 
            }]
        }
        // 5. 应用指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

运行成果如下图所示：

地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>echarts 实现地图数据展现 </title>
    <style>
    html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        #main {
            width: 1000px;
            height: 900px;
        }
    </style>
</head>
<body>
    <!-- 1. 引入 echarts.js 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src="china.js"></script>
    <!-- <script src="world.js"></script> -->
    <!-- 2. 筹备一个出现图表的盒子 -->
    <div id="main"></div>
    <script>
        // 3. 获取 DOM 元素，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));
        var dataList =  [{name: '南海诸岛', value:0},
            {name: '北京', value: randomValue()},
            {name: '天津', value: randomValue()},
            {name: '上海', value: randomValue()},
            {name: '重庆', value: randomValue()},
            {name: '河北', value: randomValue()},
            {name: '河南', value: randomValue()},
            {name: '云南', value: randomValue()},
            {name: '辽宁', value: randomValue()},
            {name: '黑龙江', value: randomValue()},
            {name: '湖南', value: randomValue()},
            {name: '安徽', value: randomValue()},
            {name: '山东', value: randomValue()},
            {name: '新疆', value: randomValue()},
            {name: '江苏', value: randomValue()},
            {name: '浙江', value: randomValue()},
            {name: '江西', value: randomValue()},
            {name: '湖北', value: randomValue()},
            {name: '广西', value: randomValue()},
            {name: '甘肃', value: randomValue()},
            {name: '山西', value: randomValue()},
            {name: '内蒙古', value: randomValue()},
            {name: '陕西', value: randomValue()},
            {name: '吉林', value: randomValue()},
            {name: '福建', value: randomValue()},
            {name: '贵州', value: randomValue()},
            {name: '广东', value: randomValue()},
            {name: '青海', value: randomValue()},
            {name: '西藏', value: randomValue()},
            {name: '四川', value: randomValue()},
            {name: '宁夏', value: randomValue()},
            {name: '海南', value: randomValue()},
            {name: '台湾', value: randomValue()},
            {name: '香港', value: randomValue()},
            {name: '澳门', value: randomValue()}
        ]

        function randomValue() {return Math.round(Math.random() * 1000);
        }

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item', // 数据项图形触发
                // 数据格式化
                // formatter: function(params, ticket, cb) {
          //           return params.seriesName + '<br />' + params.name+ '：' + params.value;
          //       }
            },
            visualMap: { // 视觉映射
                min: 0,
                max: 1000,
                left: 'left',
                top: 'bottom',
                text: ['高','低'], // 取值范畴的文字
                realtime: false,  // 拖拽时，是否实时更新
                calculable: true,  // 是否显示拖拽用的手柄
                color: ['orangered', 'yellow', 'lightskyblue'],  
                // inRange: {//     color: ['#e0ffff', '#006edd'] // 取值范畴的色彩
                // },
                // show: false // 图注
            },
            series: [{
                name: '信息量',
                type: 'map', 
                map: 'china', // 地图类型
                roam: false, // 是否开启鼠标缩放和平移
                // zoom: 1.2, // 视角缩放比例
                label: {
                    normal: {
                        show: true,
                        fontSize: '10',
                        color: 'rgba(0, 0, 0, 0.7)',
                        formatter: '{b} \n\n {c}'
                    }
                },

                itemStyle: {
                    normal:{borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#f3e42e', // 鼠标抉择区域色彩
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: dataList1
            }]
        }
        // 应用指定的配置项和数据显示图表
        myChart.setOption(option);

        setInterval(() => {
            var dataList =  [{name: '南海诸岛', value:0},
                {name: '北京', value: randomValue()},
                {name: '天津', value: randomValue()},
                {name: '上海', value: randomValue()},
                {name: '重庆', value: randomValue()},
                {name: '河北', value: randomValue()},
                {name: '河南', value: randomValue()},
                {name: '云南', value: randomValue()},
                {name: '辽宁', value: randomValue()},
                {name: '黑龙江', value: randomValue()},
                {name: '湖南', value: randomValue()},
                {name: '安徽', value: randomValue()},
                {name: '山东', value: randomValue()},
                {name: '新疆', value: randomValue()},
                {name: '江苏', value: randomValue()},
                {name: '浙江', value: randomValue()},
                {name: '江西', value: randomValue()},
                {name: '湖北', value: randomValue()},
                {name: '广西', value: randomValue()},
                {name: '甘肃', value: randomValue()},
                {name: '山西', value: randomValue()},
                {name: '内蒙古', value: randomValue()},
                {name: '陕西', value: randomValue()},
                {name: '吉林', value: randomValue()},
                {name: '福建', value: randomValue()},
                {name: '贵州', value: randomValue()},
                {name: '广东', value: randomValue()},
                {name: '青海', value: randomValue()},
                {name: '西藏', value: randomValue()},
                {name: '四川', value: randomValue()},
                {name: '宁夏', value: randomValue()},
                {name: '海南', value: randomValue()},
                {name: '台湾', value: randomValue()},
                {name: '香港', value: randomValue()},
                {name: '澳门', value: randomValue()}
            ]

            myChart.setOption({
                series: [{data: dataList}]
            });
        }, 3000)
    </script>
</body>
</html>

运行成果如下图所示：

我的项目实战进阶

Vue+Echarts 构建大数据可视化酷炫展现公司品牌实战我的项目分享（附源码）

ECharts 官网实例

社区作品实例

如何抉择图表类型，参考如下图所示：

写在最初

  • 想必看官对数据可视化有了初步的意识，大数据时代的必然产物
  • 理解 ECharts 可视化工具，以及如何应用，疾速上手开发
  • 开发者具备哪些前端基础知识
  • 罕用数据可视化工具有哪些
  • 我的项目实战操作

获取更多数据可视化开源我的项目实例，请移步 github：https://github.com/jackchen0120

❤️ 爱心三连击

  • 如果感觉这篇文章还不错，来个 点赞、评论、分享 三连吧，让更多的人也看到～
  • 如需获取以上源码材料，关注公众号：「懒人码农」，后盾回复“可视化”关键字即可。

正文完
javascript
发表至： javascript
2021-01-18
 0
electron实现qq快捷登录!
关于javascript:js学习笔记9运算符
关于javascript:最近面试经常被问到的js手写题
ES6语法