@[naughty_cc]::微信小程序
微信小程序从入门到精通
关于数据可视化
维基百科：
数据可视化（英语：Data visualization）被许多学科视为与视觉传达含义相同的现代概念。它涉及到数据的可视化表示的创建和研究。为了清晰有效地传递信息，数据可视化使用统计图形、图表、信息图表和其他工具。可以使用点、线或条对数字数据进行编码，以便在视觉上传达定量信息。有效的可视化可以帮助用户分析和推理数据和证据。它使复杂的数据更容易理解和使用。用户可能有特定的分析任务（如进行比较或理解因果关系），以及该任务要遵循的图形设计原则。表格通常用于用户查找特定的度量，而各种类型的图表用于显示一个或多个变量的数据中的模式或关系。数据可视化既是一门艺术也是一门科学。有些人认为它是描述统计学的一个分支，但也有些人认为它是一个扎根理论开发工具。互联网活动产生的数据量的增加和环境中传感器数量的增加被称为"大数据"或物联网。处理、分析和交流这些数据对数据可视化来说是道德和分析方面的挑战。[4] 数据科学领域和被称为数据科学家的从业人员可以帮助应对这一挑战。
数据可视化是一门有趣的学科，将来的研究目标
关于小程序的数据可视化
JavaScript ： 一款具有函数优先的轻量级，解释型或即时编译型的编程语言。
这位小可爱跟Java没有任何关系，仅有的一点的关系是js蹭了Java热度记得网页设计基础老师不讲js的理由是他必须学完Java才能学，对他混的行为表示强烈谴责！！！！
实现小程序数据可视化的工具有
Echarts:百度开源js数据可视化工具，使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
炫酷的echarts官网
Anty：蚂蚁数据可视化，ntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。让数据栩栩如生
antv官网
== HighCharts==
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。（官网信息看不懂，我没了~~）
highcharts官网
快速上手F2（移动端）
安装
通过npm安装（实现装好node.js的前提下）
命令行运行
npm install @antv/f2 --save
成功安装完成之后，即可使用 import 或 require 进行引用。
const F2 = require('@antv/f2');
浏览器引入:既可以通过将脚本下载到本地也可以直接引入在线资源。
<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.4.2/f2.min.js"></script>
<!-- 友情提醒：请按需更新版本号。 -->
<!-- 引入本地脚本 -->
<script src="./f2.js"></script>
你也可以直接通过 unpkg 下载。
一分钟上手
在 F2 引入页面后，我们就已经做好了创建第一个图表的准备了。
下面是以一个基础的柱状图为例开始我们的第一个图表创建。
浏览器引入方式
-
创建canvas标签
在页面上创建一个 并指定 id： -
编写图表绘制代码
创建 标签后，我们就可以进行简单的图表绘制:
创建 Chart 图表对象，指定图表 ID、指定图表的宽高、边距等信息；
载入图表数据源；
使用图形语法进行图表的绘制；
渲染图表。
// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
// Step 1: 创建 Chart 对象
const chart = new F2.Chart({
id: 'myChart',
pixelRatio: window.devicePixelRatio, // 指定分辨率
});
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart
.interval()
.position('genre*sold')
.color('genre');
// Step 4: 渲染图表
chart.render();
完成上述两步之后，保存文件并用浏览器打开，一张柱状图就绘制成功了：
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
const chart = new F2.Chart({
id: 'myChart',
pixelRatio: window.devicePixelRatio, // 指定分辨率
});
// load the data
chart.source(data);
// draw a column chart
chart
.interval()
.position('genre*sold')
.color('genre');
chart.render();
微信小程序下使用anTV-f2
1.新建微信小程序
2.在小程序项目根目录下运行cmd
npm init -f
执行完npm，生成package.json文件后执行install
-f表示force的意思，不加这个，npm会让你输入一堆信息，比如name、version之类，如果只是做做实验小demo，直接-f，npm帮你初始化package.json，并填充各种默认值，省事。初始化的项目文件夹不能为英文，否则会发生 code EINVALIDTAGNAME错误。
3.运行：
npm install –production
-save表示将安装的包加入依赖列表的意思，可以看下package.json 里的dependencies字段。后面再运行 npm install，就会把所有依赖安装下来。如果不加–save，什么都不会安装。（加save之前本人秃了头也没解决报错）
4.运行安装wx-antv/f2
npm install @antv/wx/f2 -save
5.安装f2-canvers组件
npm i @antv/g2-canvas
6.微信内设置使用npm
7.构建npm
8.进行构建自己的项目就好啦
初步认识了antv的方法，一定会更加细化
