Echart可视化学习笔记（echarts数据可视化 html模板）

创建需要的目录结构及文件

目录：css、font、images、js

文件：index.html

在css目录下创建一个css文件

Index.html文件中编写基本代码

初始化css

我们查看下引入的文件是否正确，在body中检测一下

双击运行下

准备js文件flexible.js

引入js文件

确认js文件引入是否正确，打开开发者工具，在审查元素的部分可以看到这个部分的代码，并且扩大缩小屏幕数据会发生变化（屏幕适配）

更改适配方案

打开flexible.js，我们设置下面的参数为24

原因是设计稿是1920px，除以24的话就是80，不会太大

检测一下

编辑index.html

再编辑index.css

点击运行一下（随浏览器屏幕大小变化而变化）

准备一些图片在images目录下

body 设置背景图 ，缩放为 100% ， 行高1.15

效果

编写头部的盒子

高度为100px

背景图，在容器内显示

缩放比例为100%

在index.html中添加盒子

运行查看

Index.html放标题文本

标题添加样式

h1 标题部分 白色 38像素 居中显示 行高为 80像素

查看效果

Index.html添加时间模块

时间模块showTime 定位右侧 right 为30px 行高为75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为20像素

Index.css添加样式

Header中添加一个位置样式

再编写时间模块

时间应该是动态的，所以编写一个js

查看效果

页面主体部分

设置测试样式

查看页面效果

需要一个上左右的10px的内边距

添加文本

样式更改

查看效果

接下来column列容器，分三列，占比3：5：3

首先是“父亲” ——mainbox添加flex属性

然后主体添加三个部分的“孩子”

分别分成3：5：3

接下来准备一个：公共面板模块panel

属性设置

1像素的1px solid rgba(25, 186, 139, 0.17) 边框

有
http://cdn.yidiantu.cn/uploads/202009/596592_a11c3f0ae966f55f57a8d0cae4dc32bc817f7e.png!wx背景图片

padding为 上为 0 左右15px 下为40px

下外边距是15px

查看效果

利用panel 盒子before 和after制作两个角 大小为 10px 线条为 2px solid #02a6b5

查看效果

下面的两个角

添加属性

查看效果

完成一个柱形图bar 模块(布局)

标题模块 h2 高度为48px 文字颜色为白色 文字大小为 20px

图标内容模块 chart 高度240px

以上可以作为panel公共样式部分

样式布置

查看效果

其它模块复制就可以了

查看效果

编写中间模块

添加显示样式

数字模块no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距

查看效果

注意中间列column 有个 左右 10px 下15px 的外边距

查看效果

no 模块里面上下划分 上面是数字（no-hd) 下面是相关文字说明(no-bd)

no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)

查看效果

no-hd 数字模块 里面分为两个小li

每个小li高度为80px 文字大小为 70px 颜色为#ffeb7b 字体是图标字体 electronicFont

声明一个字体

字体使用，添加其它样式

查看效果

no-hd 利用after 和before制作2个小角， 边框 2px solid #02a6b5 宽度为30px 高度为10px

查看效果

小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度50% top 25% 即可

查看效果

no-bd 里面也有两个小li 高度为40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为18px 上内边距为 10px

查看效果

地图模块高度为810px

添加样式

查看效果

里面包含4个盒子：

chart 放图表模块

球体盒子

旋转1

旋转2

球体图片模块map1

大小为518px

要加背景图片

因为要缩放100%

定位到最中央

透明度0.3

查看效果

旋转1 map 2

大小为643px

要加背景图片

因为要缩放100%

定位到中央

透明度0.6

做旋转动画

利用z-index压住球体

查看效果

添加旋转动画

查看效果

旋转2 map3

大小为566px

要加背景图片

因为要缩放100%

定位到中央

旋转动画

注意是逆时针

查看效果

Chart模块

模块基本完成

常见的数据可视化库：

D3.js 目前Web 端评价最高的Javascript 可视化工具库(入手难)

ECharts.js 百度出品的一个开源Javascript 数据可视化库

Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用

AntV 蚂蚁金服全新一代数据可视化解决方案 等等

Highcharts 和Echarts 就像是Office 和WPS 的关系

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

使用步骤：

1. 引入echarts插件文件到html页面中

2. 准备一个具备大小的DOM容器

3. 初始化echarts实例对象

4. 指定配置项和数据(option)

5.将配置项设置给echarts实例对象

这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了

需要了解的主要配置：`series` `xAxis` `yAxis` `grid` `tooltip` `title` `legend` `color`

series系列列表。每个系列通过`type` 决定自己的图表类型。大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

xAxis：直角坐标系grid 中的x 轴

boundaryGap:坐标轴两边留白策略true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis：直角坐标系grid 中的y 轴

grid：直角坐标系内绘图网格。

title：标题组件

tooltip：提示框组件

legend：图例组件

color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的`stack`值后 后一个系列的值会在前一个系列的值上相加

基本知识具备，进入操作

准备一个index.js文件

放入准备的js文件

引入文件

编写index.js

实例化对象

指定配置和数据

把配置给实例对象

查看效果

修改图表柱形颜色 #2f89cf

修改图表大小 top为10px bottom为4% grid决定我们的柱状图的大小

X轴相关设置 xAxis

文本颜色设置为 rgba(255,255,255,.6) 字体大小为12px

X轴线的样式 不显示

Y 轴相关定制

文本颜色设置为 rgba(255,255,255,.6) 字体大小为12px

Y 轴线条样式 更改为 1像素的 rgba(255,255,255,.1) 边框

分隔线的颜色修饰为 1像素的 rgba(255,255,255,.1)

修改柱形为圆角以及柱子宽度 series 里面设置

更换对应数据

让图表跟随屏幕自适应

去掉粉色底色，查看效果

柱状图定制

官网找到类似实例， 适当分析，并且引入到HTML页面中

引入代码

在之前的index.html中添加代码

查看效果

根据需求定制图表

实例化对象

指定配置和数据

没有网的同学代码如下：

把配置给实例对象同时让图表跟随屏幕自动的去适应

查看效果

需求1： 修改图形大小 grid

查看效果

需求2： 不显示x轴

查看效果

需求3：y轴相关定制

不显示y轴线和相关刻度

为了后续查看，把标题也去掉

查看效果

y轴文字的颜色设置为白色

查看效果

需求4： 修改第一组柱子相关样式（条状）

查看效果

设置第一组柱子内百分比显示数据

查看效果

设置第一组柱子不同颜色

声明颜色数组

给itemStyle里面的color属性设置一个 返回值函数

查看效果

需求5： 修改第二组柱子的相关配置（框状）

查看效果

需求6： 给y轴添加第二组数据

将yAxis剪切备份走，准备基本结构

把剪切的数据放回

将第二组的数据改一下

查看效果

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

// 给series 第一个对象里面的 添加

yAxisIndex: 0,

// 给series 第二个对象里面的 添加

yAxisIndex: 1,

// series第一个对象里面的data

data: [70, 34, 60, 78, 69],

// series第二个对象里面的data

data: [100, 100, 100, 100, 100],

// y轴更换第一个对象更换data数据

data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],

// y轴更换第二个对象更换data数据

data:[702, 350, 610, 793, 664],

查看效果

反向坐标

查看效果