echarts初次学习笔记
echarts学习笔记
前言：配置环境，熟悉代码；在系统中注释至少5种不同类型的echarts图表；
文章目录
- echarts学习笔记
- 配置环境
- 学习思路
- echarts
- mapbox
- three.js
- [Vue.js Examples](https://vuejsexamples.com/)
- echarts理论基础
- 五分钟上手echarts
- 自定义构建echarts
- echarts基础概念概览
- 两个demo
- 柱状图（模拟日均客运总量）
- 折线图（月度客运总量）
配置环境
根据拉勾招聘上的招聘介绍以及公司官网了解到。公司主要领域是智慧城市大数据分析挖掘和大数据的可视化，公司面向城市规划、交通规划、城市管理、国土管理、环境保护等部分，针对多源城市时空活动大数据（包括手机、智能交通系统如出租车、地铁、公交等数据）采集处理、分析挖掘、可视表达并提供智能决策支持和应用解决方案。
公司产品中使用到的技术有：GIS（QGis、PostGIS、PostgreSQL）、可视化（echarts、mapbox、three.js）
在这里我主要学习echarts，做图表的可视化。echarts是基于canvas标签的。
使用echarts的方法是：下载echarts.min.js，然后用script标签引用。
学习思路
我习惯学以致用，带着做产品的思路去学习，始终记住自己要干什么，怎么去解决学习过程中遇到的问题。学习的过程就会有趣好玩。
这个echarts是一个百度做的可视化神器。是一个JavaScript库。
echarts
是一个使用JavaScript实现的开源可视化库。通过下载echarts.min.js用script标签引入来使用。浏览器端图表可以选择canvas或SVG渲染。
echarts生成图表的配置：创建HTML页面、为echarts准备一个具备高宽的DOM容器、使用json格式配置。
我习惯用菜鸟教程来简单了解这些库，它的官网教程在这
一个可视化的JavaScript库，主要用于图表显示。本质是canvas，可以参考源代码造轮子。
mapbox
是为许多公司的网站提供订制在线地图的大型供应商。自2010年起，该公司快速拓展了订制地图的市场地位。官网在这里
mapbox gl js 是一个JavaScript库，使用webGL，以vector tiles和mapbox styles为来源，将它们渲染成互动式地图。
一个专用于地图显示的JavaScript库，主要用于显示地图。本质是webGL
three.js
一个跨浏览器的脚本，使用JavaScript函数库或API在浏览器中创建和展示动画的三维计算机图形。three.js使用webGL，源代码托管在GitHub。官网在这里
本质是webGL。可以参考造轮子。
Vue.js Examples
example.vue：vue框架中的例子。
echarts理论基础
五分钟上手echarts
五分钟上手echarts
在官网下载echarts；引用echarts；绘制一个简单的图表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<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
一般可以直接从CDN中获取构建好的echarts，也可以在GitHub中echarts/dist文件夹中获取构建好的echarts。这些都可以在浏览器端项目中使用。一般有如下三种定制。
- 完全版：
echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。 - 常用版：
echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。 - 精简版：
echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。
我们也可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。
echarts基础概念概览
echarts实例：一个网页可以创建多个echarts实例。每个echarts实例可以创建多个图表和坐标系等等（用option来描述）。准备一个DOM节点（作为echarts的渲染容器），就可以在上面创建一个echarts实例。每个echarts实例独占一个DOM节点。
系列（series）：一组数值以及他们映射成的图。一个系列包含的要素至少有一组数值、图表类型（series.js）以及其他关于这些数据如何映射成图的参数。series.type中可以设置图表类型，如饼图pie、折线图line、柱状图bar等；在series.data中设置每个系列中所需要的数据。
组件（component）：在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、…我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
用option描述图表：option表述了数据、数据如何映射成图形、交互行为。
更多内容请看：个性化图表的样式、echarts的样式简介、使用dataset管理数据、在图表中加入交互组件、移动端自适应、数据的视觉映射、echarts中的事件和行为、富文本标签、使用echarts GL实现基础的三维可视化。
两个demo
首先思考需要用到哪些demo。由于是要做一个地铁系统。确定做：显然柱状图、折线图是必备的，饼状图作为补充。在这初步的三个demo的基础上还需要加入富文本标签。然后应该就可以应付大部分图表了。
然后在echarts官网的实例中选demo。
最后在GitHub上下载echarts.min.js。用script标签引入。
柱状图（模拟日均客运总量）
样子：
思路：有三组数据：工作日、周末、节假日；横坐标是2010到2019，纵坐标是0到600万人次。
参考：官网上的例子 。修改option；
var option = {
title: {text: '仿日均客运总量柱状图'},
legend: {},
tooltip: {},
dataset: {
source: [
['product', '工作日', '周末', '节假日'],
['2010', 53.5, 57.3, 56.8],
['2011', 174.2, 158.2, 79.2],
['2012', 183.4, 172.5, 174.4],
['2013', 279.3, 266.3, 211.2]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
],
};
折线图（月度客运总量）
样子：
思路：2010到2019共十组数据，横坐标是1月到12月；
参考官网例子，修改option；