数据可视化详解

1.数据可视化相关的库

D3 是一个JavaScript数据可视化库用于HTML和SVG。它旨在将数据带入生活，强调Web标准，将强大的可视化技术与数据驱动的文档对象模型(DOM)操作方法相结合。 D3是Github上最流行的数据可视化项目，在数据科学界有很好的表现。点击去往官方网址。

ECharts提供了常规的折线图、柱状图等；用于地理数据可视化的图；用于关系数据可视化的图表；还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形。点击去往官方网址。

chartjs是一个图表控件集合，使用html5的canvas进行绘制。点击去往官方网址。

Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。点击去往官方网址。

AntV 3.0 已全新升级，主要包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验后方敢与君见。点击去往官方网址。

2.使用ECharts实现一周的盈亏可视化图表

1.在Web端实现ECharts

下载ECharts相关的资源文件，官方为我们提供了多种下载方式，选择自己可以操作的下载方式即可，本文主要使用dist文件夹下的echarts.min.js；

在Visual Studio Code中新建一个echarts01.html，用来展示可视化图表,并在文中实现如下代码；

Week's Gain And Loss

// 基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));// 指定图表的配置项和数据option={tooltip: {trigger:'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type:'shadow'// 默认为直线，可选为：'line' | 'shadow'                    }                },legend: {data: ['利润','支出','收入']                },grid: {left:'3%',right:'4%',bottom:'3%',containLabel:true                },xAxis: [                    {type:'value'                    }                ],yAxis: [                    {type:'category',axisTick: {show:false                        },data: ['周一','周二','周三','周四','周五','周六','周日']                    }                ],series: [                    {name:'利润',type:'bar',label: {show:true,position:'inside'                        },data: [200,170,240,244,200,220,210]                    },                    {name:'收入',type:'bar',stack:'总量',label: {show:true                        },data: [320,302,341,374,390,450,420]                    },                    {name:'支出',type:'bar',stack:'总量',label: {show:true,position:'left'                        },data: [-120,-132,-101,-134,-190,-230,-210]                    }                ]            };// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);

在代码中的option是数据可视化的关键数据，在使用过程中可根据具体需求更换option来展示其它饼状图、雷达图、柱状图等。

2.结合腾讯云实现以上案例

登录腾讯云官方注册账号，登录成功之后，在左上角找到云产品>云开发>云开发CloudBase>新建环境即可使用；

如图所示，在左侧找到数据库>添加集合Echarts>在桌面新建txt文件，并把option数据放入文件中，保存为json文件>导入json文件到Echarts集合中

说明：其中点击红色箭头导入json文件，蓝色箭头部分为导入成功的一条数据。

在代码中使用云开发来实现ECharts，代码如下所示；

Week's Gain And Loss

constapp=tcb.init({env:'你的环境ID'// 此处填入你的环境ID        });app.auth({persistence:'session'//在窗口关闭时清除身份验证状态        }).anonymousAuthProvider().signIn()//AnonymousAuthProvider.signIn() 匿名登录云开发.then(()=>{//登录成功constdb=app.database()db.collection("Echarts").where({_id:"ofPyPg1pMtWhlbVdheFDRrp5b8o1YSzPZeg5znMXFCg2GsxL",}).get().then(res=>{constoption=res.data[0]// 基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);                })}).catch(err=>{console.log("登录失败",err)//登录失败            })

4.在腾讯云开发左侧找到静态网站托管，这里是把自己的HTML文件和ECharts文件上传到文件管理中，以便我们在浏览器访问

打开静态网站托管>文件管理>上传文件（找到自己HTML文件的存放位置上传即可）

打开静态网站托管>基础配置（找到自己的默认域名）>在浏览器中通过“域名/文件路径”即可访问

3.在微信小程序中使用ECharts

下载微信开发者工具，申请小程序appid

下载githup上的开源echarts小程序

在微信开发者创建一个新项目，创建成功之后把其它不需要的文件删除干净

把githup上下载的小程序中的ec-canvas、img文件复制到自己创建的项目中

把app.wxss中的代码复制到自己项目中的app.wxss

.container{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;}

把其中一个page页面复制到自己项目中，其中wxml、wxss、json文件都是通用的，使用时把js文件中的option替换掉就可以使用其它页面

4.小程序云开发实现ECharts

下载微信开发者工具，申请小程序appid

下载githup上的开源echarts小程序

在微信开发者创建一个新项目，并点击云开发，创建成功之后把其它不需要的文件删除干净，并在app.js中初始化云开发，云开发环境id在小程序云开发控制台中设置找到

onLaunch:function() {wx.cloud.init({env:"云开发环境id",  })}

在云开发控制台>数据库>新建集合Echarts>高级操作>add模板，其中data为option的数据，点击执行即可

把githup上下载的小程序中的ec-canvas、img文件复制到自己创建的项目中

把app.wxss中的代码复制到自己项目中的app.wxss，代码同上

把其中一个page页面复制到自己项目中，其中wxml、wxss、json文件都是通用的，使用时把js文件中的option替换掉就可以使用其它页面，这里的option通过云开发获得

import*asechartsfrom'../../ec-canvas/echarts';constapp=getApp()constdb=wx.cloud.database()asyncfunctioninitChart(canvas,width,height,dpr) {constoption=(awaitdb.collection("Echarts").where({_id:"baada3ac5ed4ab250022ec955b2a7fec",}).get()).data[0]constchart=echarts.init(canvas,null, {width:width,height:height,devicePixelRatio:dpr  })canvas.setChart(chart);chart.setOption(option,true);returnchart;}Page({onShareAppMessage:function(res) {return{title:'ECharts 可以在微信小程序中使用啦！',path:'/pages/index/index',success:function() { },fail:function() { }    }  },data: {ec: {onInit:initChart    }  },})

3.使用AntV实现各国人口分布图

1.AntV的特性

完善的图形语法：数据到图形的映射，能够绘制出所有的图表。

全新的交互语法：通过触发和反馈机制可以组合出各种交互行为，对数据进行探索。

强大的 View 模块：可支持开发个性化的数据多维分析图形。

双引擎渲染：Canvas 或 SVG 任意切换。

可视化组件体系：面向交互、体验优雅。

全面拥抱 TypeScript：提供完整的类型定义文件。

2.Antv的安装方法

通过 npm 安装

npm install @antv/g2 --save

成功安装完成之后，即可使用import或require进行引用。

import { Chart } from '@antv/g2';const chart = new Chart({  container: 'c1',  width: 600,  height: 300,});

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源：

你也可以直接通过unpkg下载。

3.AntV的使用

可以在官网上找到需要自己使用的Demo,把对应的代码替换掉即可使用，以下为各国人口分布图的代码：

各国人口分布图