本人学习视频为黑马程序员，视频连接为：黑马程序员

Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

常见的数据可视化库：

D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
官方网址:https://echarts.apache.org/zh/index.html

Echarts使用步骤

1.下载并使用echart.js文件
2.具备一个具有大小的DOM容器
3.初始化echarts实例对象
4.指定配置项和数据(options)
5.将配置项设置给echarts对象
echarts.min.js文件下载地址:https://echarts.apache.org/zh/download.html

使用案例

效果:

Echarts-基础配置

series
系列列表。每个系列通过 type 决定自己的图表类型
大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

第一个柱形图

采用立即执行函数，防止变量混乱。接着采取三步战略引入echarts
根据需求定制:
1.修改图表柱形颜色 #2f89cf
2.修改图表大小 top 为 10px bottom 为 4% grid决定我们的柱状图的大小
3.X轴文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
4.X轴线的样式不显示
5:Y轴文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
6.Y 轴线条样式更改为 1像素的 rgba(255,255,255,.1) 边框
7. 分隔线的颜色修饰为 1像素的 rgba(255,255,255,.1)
8. 修改柱子宽度为35%
9. 修改柱子圆角为5
10.更换对应数据
11.进行屏幕适配

第二个柱形图

1：修改图形大小 grid

2：不显示x轴
3： y轴相关定制，y轴文字的颜色设置为白色

4：修改第一组柱子相关样式（条状），设置第一组柱子内百分比显示数据设置第一组柱子不同颜色
5：修改第二组柱子的相关配置（框状）
6：给y轴添加第二组数据

7：设置两组柱子层叠以及更换数据

最后要记得屏幕适配
效果：

第一个折线图

1：修改折线图大小，显示边框设置颜色：#012f4a，并且显示刻度标签。

2：修改图例组件中的文字颜色 #4c9bfd，距离右侧 right 为 10%

3： x轴相关配置：刻度去除，x轴刻度标签字体颜色：#4c9bfd，剔除x坐标轴线颜色（将来使用Y轴分割线)，轴两端是不需要内间距 boundaryGap

4： y轴的定制：刻度去除，字体颜色：#4c9bfd，分割线颜色：#012f4a

5：两条线形图定制：颜色分别：#00f2f1 #ed3f35，把折线修饰为圆滑 series 数据中添加 smooth 为 true

6：配置数据
7：新增需求点击 2020年 2021年数据发生变化（点击2020按钮需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]，点击2020按钮需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]。2021 按钮同样道理）
需要引入jquery.js文件

效果：

折线图第二个(右边)

1：更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12

2：修改图表大小

3：修改x轴相关配置(修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
x轴线的颜色为 rgba(255,255,255,.2) )

4：修改y轴的相关配置

5：修改两个线模块配置(注意在series 里面定制)

6：更换数据
效果：

饼图

1：修改图例组件在底部并且居中显示。每个小图标的宽度和高度修改为 10px,文字大小为12 颜色 rgba(255,255,255,.5)

2：修改水平居中垂直居中，修改内圆半径和外圆半径为 [“40%”, “60%”] pink老师友情提示，带有直角坐标系的比如折线图柱状图是 grid修改图形大小，而我们饼形图是通过 radius 修改大小
3：更换数据

4：更换颜色

效果：

第二个饼图（右）

1：颜色设置

2：修改饼形图大小 ( series对象)
3：把饼形图的显示模式改为半径模式
4：数据使用更换（series对象里面 data对象）
5：字体略小些 10 px ( series对象里面设置 )
6：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )

效果:

记得要适配屏幕
上诉素材可以到官方网址找差不多的进行需求修改：echarts图示例

中国航线

echart中国地图航线图：地图航线
同时需要引入China.js，注意：.chart一定要有高度不然会报错
需要修改：
1.去掉标题组件
2.去掉背景颜色
3.修改地图省份背景 #142957 areaColor 里面做修改
4.地图放大通过 zoom 设置为1.2即可

效果：

黑马程序档案下载

项目素材地址:黑马程序员

ECharts数据可视化(二)相关推荐

python爬虫豆瓣读书top250+数据清洗+数据库+Java后端开发+Echarts数据可视化(二)
之前的博客已经写了python爬取豆瓣读书top250的相关信息,接下来继续看如何清洗数据. 如果有没看懂的或是不了解上一部分说的是什么内容的,请看https://blog.csdn.net/qq_4 ...
echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html <script src="js/4.2.1/echarts.min.js"></script&g ...
Echarts数据可视化series-scatter散点图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-map地图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-line线图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-heatmap热力图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-graph关系图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-effectscatter特效散点图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-bar柱形图详解，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

ECharts数据可视化(二)