使用ECharts打造一个数据可视化面板
Posted 在人间负债^
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用ECharts打造一个数据可视化面板相关的知识，希望对你有一定的参考价值。
使用ECharts打造一个数据可视化面板
- 1. 使用技术
- 2. 案例适配方案
- 3. 基础设置
- 4. header 布局
- 5. mainbox 主体模块
- 6. 公共面板模块 panel
- 7. 柱形图 bar 模块（布局）
- 8. 中间布局
- 9. ECharts 介绍
- 10. ECharts 体验
- 11. ECharts 基础配置
- 12. 柱状图图表（两大步骤）
- 13. 柱状图2定制
- 14. 折线图1 人员变化模块制作
- 15. 折线图2 播放量模块制作
- 16. 饼状图1 年龄分布模块制作
- 17. 饼状图2 地区分布模块制作（南丁格尔玫瑰图）
- 18. ECharts 社区介绍
- 19 ECharts map使用（扩展）
- 20. 最后的约束缩放
因为最近要做大数据的项目了，项目要求使用 ECharts 来做数据的列表展示，所以花了几个小时的时间学习了一下 ECharts，并跟着黑马前端，做了这个基于 ECharts 的数据可视化面板
前提声明：这个项目是只有前端页面，所有的数据都是虚假的，没有与后端对接
1. 使用技术
- div + css 布局
- flex 布局
- Less
- 原生js + jquery 使用
- rem适配
- echarts基础
2. 案例适配方案
设计稿是1920px
- flexible.js 把屏幕分为 24 等份
- cssrem 插件的基准值是 80px
插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。
但是别忘记重启vscode软件保证生效
3. 基础设置
- body 设置背景图 ，缩放为 100% ， 行高1.15
- css初始化
4. header 布局
- 高度为100px
- 背景图，在容器内显示
- 缩放比例为 100%
- h1 标题部分 白色 38像素 居中显示 行高为 80像素
- 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素
// 格式： 当前时间：2020年3月17-0时54分14秒
<script>
var t = null;
t = setTimeout(time, 1000);//開始运行
function time()
clearTimeout(t);//清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours();//获取时
var m = dt.getMinutes();//获取分
var s = dt.getSeconds();//获取秒
document.querySelector(".showTime").innerhtml = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
t = setTimeout(time, 1000); //设定定时器，循环运行
</script>
- header 部分 css 样式
header
position: relative;
height: 1.25rem;
background: url(../images/head_bg.png) no-repeat top center;
background-size: 100% 100%;
h1
font-size: 0.475rem;
color: #fff;
text-align: center;
line-height: 1rem;
.showTime
position: absolute;
top: 0;
right: 0.375rem;
line-height: 0.9375rem;
font-size: 0.25rem;
color: rgba(255, 255, 255, 0.7);
5. mainbox 主体模块
- 需要一个上左右的10px 的内边距
- column 列容器，分三列，占比 3：5：3
css 样式
.mainbox
padding: 0.125rem 0.125rem 0;
display: flex;
.column
flex: 3;
&:nth-child(2)
flex: 5;
6. 公共面板模块 panel
- 高度为 310px
- 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
- 有line.jpg 背景图片
- padding为 上为 0 左右 15px 下为 40px
- 下外边距是 15px
- 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
- 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px
.panel
position: relative;
height: 3.875rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: url(../images/line\\(1\\).png);
padding: 0 0.1875rem 0.5rem;
margin-bottom: 0.1875rem;
&::before
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
&::after
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
.panel-footer
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&::before
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
&::after
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
7. 柱形图 bar 模块（布局）
- 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px
- 图标内容模块 chart 高度 240px
- 以上可以作为panel公共样式部分
h2
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 400;
.chart
height: 3rem;
background-color: pink;
8. 中间布局
- 上面是no 数字模块
- 下面是map 地图模块
- 数字模块 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
/* 声明字体*/
@font-face
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF);
地图模块制作：
- 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
- 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
- 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
- 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
<div class="no">
<div class="no-hd">
<ul>
<li>125811</li>
<li>104563</li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>前端需求人数</li>
<li>市场供应人数</li>
</ul>
</div>
</div>
<div class="map">
<div class="chart"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
</div>
中间样式
/* 声明字体*/
@font-face
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF);
.no
background: rgba(101, 132, 226, 0.1);
padding: 0.1875rem;
.no-hd
position: relative;
border: 1px solid rgba(25, 186, 139, 0.17);
&::before
content: "";
position: absolute;
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
top: 0;
left: 0;
&::after
content: "";
position: absolute;
width: 30px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
right: 0;
bottom: 0;
ul
display: flex;
li
position: relative;
flex: 1;
text-align: center;
height: 1rem;
line-height: 1rem;
font-size: 0.875rem;
color: #ffeb7b;
padding: 0.05rem 0;
font-family: electronicFont;
font-weight: bold;
&:first-child::after
content: "";
position: absolute;
height: 50%;
width: 1px;
background: rgba(255, 255, 255, 0.2);
right: 0;
top: 25%;
.no-bd ul
display: flex;
li
flex: 1;
height: 0.5rem;
line-height: 0.5rem;
text-align: center;
font-size: 0.225rem;
color: rgba(255, 255, 255, 0.7);
padding-top: 0.125rem;
.map
position: relative;
height: 10.125rem;
.chart
position: absolute;
top: 0;
left: 0;
z-index: 5;
height: 10.125rem;
width: 100%;
.map1,
.map2,
.map3
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6.475rem;
height: 6.475rem;
background: url(../images/map.png) no-repeat;
background-size: 100% 100%;
opacity: 0.3;
.map2
width: 8.0375rem;
height: 8.0375rem;
background-image: url(../images/lbx.png);
opacity: 0.6;
animation: rotate 15s linear infinite;
z-index: 2;
.map3
width: 7.075rem;
height: 7.075rem;
background-image: url(../images/jt.png);
animation: rotate1 10s linear infinite;
@keyframes rotate
from
transform: translate(-50%, -50%) rotate(0deg);
to
transform: translate(-50%, -50%) rotate(360deg);
@keyframes rotate1
from
transform: translate(-50%, -50%) rotate(0deg);
to
transform: translate(-50%, -50%) rotate(-360deg);
9. ECharts 介绍
常见的数据可视化库：
- 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，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
大白话：
- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表，且可定制。
- 折线图、柱状图、散点图、饼图、K线图
官网地址：https://www.echartsjs.com/zh/index.html
10. ECharts 体验
官方教程：[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)
下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
使用步骤：
- 引入echarts 插件文件到html页面中
- 准备一个具备大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
- 初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
- 指定配置项和数据(option)
var option =
xAxis:
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
,
yAxis:
type: 'value'
,
series: [
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
]
;
- 将配置项设置给echarts实例对象
myChart.setOption(option);
11. ECharts 基础配置
知道以下配置每个模块的主要作用干什么的就可以了
需要了解的主要配置：
seriesxAxisyAxisgridtooltiptitlelegendcolor
-
series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
-
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
-
yAxis：直角坐标系 grid 中的 y 轴
-
grid：直角坐标系内绘图网格。
-
title：标题组件
-
tooltip：提示框组件
-
legend：图例组件
-
color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
option =
// color设置我们线条的颜色 注意后面是个数组
color: ['pink', 'red', 'green', 'skyblue'],
// 设置图表的标题
title:
text: '折线图堆叠123'
,
// 图表的提示框组件
tooltip:
// 触发方式
trigger: 'axis'
,
// 图例组件
legend:
// series里面有了 name值则 legend里面的data可以删掉
,
// 网格配置 grid可以控制线形图 柱状图 图表大小
grid:
left: '3%',
right: '4%',
bottom: '3%',
// 是否显示刻度标签 如果是true 就显示 否则反之
containLabel: true
,
// 工具箱组件 可以另存为图片等功能
toolbox:
feature:
saveAsImage:
,
// 设置x轴的相关配置
xAxis:
type: 'category',
// 是否让我们的线条和坐标轴有缝隙
boundaryGap: false,
data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
,
// 设置y轴的相关配置
yAxis:
type: 'value'
,
// 系列图表配置 它决定着显示那种类型的图表
series: [
name: '邮件营销',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
,
name: '联盟广告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
,
name: '视频广告',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
,
name: '直接访问',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
]
;
12. 柱状图图表（两大步骤）
- 官网找到类似实例， 适当分析，并且引入到HTML页面中
- 根据需求定制图表
- 引入到 html 页面中
// 柱状图1模块
(function()
// 实例化对象
let myChart = echarts.init(document.querySelector(".bar .chart"));
// 指定配置和数据
let option =
color: ["#3398DB"],
tooltip:
trigger: "axis",
axisPointer:
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
,
grid:
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
,
xAxis: [
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisTick:
alignWithLabel: true
],
yAxis: [
type: "value"
],
series: [
name: "直接访问",
type: "bar",
barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220]
]
;
// 把配置给实例对象
myChart.setOption以上是关于使用ECharts打造一个数据可视化面板的主要内容，如果未能解决你的问题，请参考以下文章
宋庆离的个人空间 客户软文 正文 ECharts5.0版本即将上线，来说说我与ECharts的那些事吧！