前言
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KfjXnCsj-1646239564788)(C:\Users\小半\AppData\Roaming\Typora\typora-user-images\image-20220116154930665.png)]
来源于PINK老师的听课笔记
一、准备工作
1.1 技术准备
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v79x0kxX-1646239564791)(C:\Users\小半\AppData\Roaming\Typora\typora-user-images\image-20220115172616132.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5kq27TKf-1646239564791)(C:\Users\小半\AppData\Roaming\Typora\typora-user-images\image-20220115173010721.png)]
1.2 相关准备
1.2.1 安装vscode中easy less插件
功能:生成.less文件,可自动转换为.css为文件
###1.2.2 案例适配方案
(1) 引入flexible.js
功能:根据浏览器尺寸自动改变文字大小
flexible默认划分为10等份,页面设计稿是1920px,此处修改为24等份
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bcl3yggf-1646239564792)(C:\Users\小半\AppData\Roaming\Typora\typora-user-images\image-20220115173626633.png)]
(2)安装cssrem插件
功能:cssrem插件可直接设置固定值,如基准值设置为80px。(80即1920/24)
转换成rem的目的是为了做屏幕适配
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vFhHlynU-1646239564793)(C:\Users\小半\AppData\Roaming\Typora\typora-user-images\image-20220115173728014.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j9mPjGIp-1646239564794)(C:\Users\小半\AppData\Roaming\Typora\typora-user-images\image-20220115173731611.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O0yZuwk9-1646239564795)(C:\Users\小半\AppData\Roaming\Typora\typora-user-images\image-20220115173734942.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LsqzIPtF-1646239564797)(C:\Users\小半\AppData\Roaming\Typora\typora-user-images\image-20220115173739080.png)]
二、布局
2.1 基础设置
-
body 设置背景图 (引入图片样式、不重复、图片放置位置),缩放为 100% , 行高1.15(注意不跟单位)
body{ background: url(../images/bg.jpg) no-repeat top center; line-height:1.15; }
-
css初始化
*{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; }
2.2 header 布局
-
高度为100px
-
背景图,在容器内显示
-
缩放比例为 100%
-
h1 标题部分: 白色 38像素 居中显示 行高为 80像素
-
时间模块 showTime: 定位右侧 right 为 30px 行高为 75px 文字颜色为:rgba(255, 255, 255, 0.7) 而文字大小为 20像素
header{ // 子绝父相 position: relative; height: 1.25rem; background: url(../images/head_bg.png) no-repeat; // 缩放 background-size: 100% 100%; // less支持嵌套 h1{ font-size: 0.475rem; color: #fff; text-align: center; line-height: 1rem; } .showTime{ position: absolute; right: 0.375rem; top: 0; line-height: 0.9375rem; color: rgba(255, 255, 255, 0.7); font-size: 0.25rem; } }
<!-- 格式: 当前时间:2022年1月15-18时18分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>
2.3 mainbox 主体模块
- 约束盒子的宽度
- 需要一个上左右的10px 的内边距
- column 列容器,分三列,占比 3:5:3
<!-- mainbox 主体模块 -->
<section class="mainbox">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
// mainbox 主体模块
.mainbox{
// display: flex使用时给父亲加
display: flex;
// 约束盒子的宽度,此处可以不用转换成rem
min-width: 1024px;
max-width: 1920px;
margin: 0 auto;
padding: .125rem .125rem 0;
// 将列分块为3 5 3
.column{
flex: 3;
// 这个也可注释换下一种
&:nth-child(2){
flex: 5;
}
}
// .column:nth-child(2){
// flex: 5;
// }
}
2.4 公共面板模块(左侧) panel
-
高度为 310px
-
边框:1像素的 1px solid rgba(25, 186, 139, 0.17)
-
有line.jpg 背景图片,设置背景色rgba(255, 255, 255, 0.03)
-
padding为 上为 0 左右 15px 下为 40px
-
下外边距是 15px
-
利用panel 盒子 before 和after伪元素 制作上面两个角:大小为 10px 线条为 2px solid #02a6b5
-
新加一个panel-footer盒子的before 和after 制作下侧两个角:位置在最底端,宽度高度为 10px
<!-- 如第一个panel盒子 --> <div class="column"> <!-- 公共面板模块(左侧) panel --> <div class="panel"> <!-- 设置下方两角的样式 --> <div class="panel-footer"></div> </div> </div>
// 公共面板模块(左侧) panel .panel{ position: relative; height: 3.875rem; padding: 0 .1875rem .5rem; // 边框较细,可以不用rem border: 1px solid rgba(25, 186, 139, 0.17) ; margin-bottom: .1875rem; background:url(../images/line\(1\).png) rgba(255, 255, 255, 0.03); // 设置上面两个角 &::before{ position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-left:2px solid #02a6b5; border-top: 2px solid #02a6b5; content: ""; } &::after{ position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-right:2px solid #02a6b5; border-top: 2px solid #02a6b5; content: ""; } // 设置下面两个角 .panel-footer{ position: absolute; bottom: 0; left: 0; width: 100%; &::before{ position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; border-left:2px solid #02a6b5; border-bottom: 2px solid #02a6b5; content: ""; } &::after{ position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-right:2px solid #02a6b5; border-bottom: 2px solid #02a6b5; content: ""; } } }
2.5 柱形图 bar 模块
- 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px
- 图标内容模块 chart 高度 240px
- 以上可以作为panel公共样式部分
<!-- 如第一个panel盒子 -->
<div class="column">
<!-- 公共面板模块(左侧) panel -->
<div class="panel bar">
<h2>柱形图</h2>
<div class="chart">图表</div>
<!-- 设置下方两角的样式 -->
<div class="panel-footer"></div>
</div>
</div>
// h2标题
h2{
height: .6rem;
color: #fff;
line-height: .6rem;
text-align: center;
font-size: .25rem;
font-weight: 400;
}
// 图表
.chart{
height: 3rem;
}
2.6 中间布局
2.6.1 no 数字模块
-
数字模块 no 的背景颜色 rgba(101, 132, 226, 0.1); 内边距15像素
-
注意中间列 column 有个 左右 10px 下 15px 的外边距
.column{ flex: 3; &:nth-child(2){ flex: 5; //此项代码为 margin: 0 .125rem .1875rem; } }
-
no 模块里面上下划分 上面是数字(no-hd) 下面 是 相关文字说明(no-bd)
-
no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)
-
no-hd 数字模块 里面分为两个小li(以li撑起盒子的高度)。每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
注意:需引用DS-DIGIT.TTF文件
/* 声明字体*/ @font-face { font-family: electronicFont; src: url(../font/DS-DIGIT.TTF); }
-
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
<!-- no 数字模块 --> <div class="column"> <!-- 公共面板模块(中间) panel --> <!-- no 数字模块 --> <div class="no"> <!-- 数字模块 --> <div class="no-hd"> <ul> <li>12345</li> <li>12345</li> </ul> </div> <!-- 文字模块 --> <div class="no-bd"> <ul> <li>需求</li> <li>供应</li> </ul> </div> </div> </div>
// no 数字模块 .no{ background: rgba(101, 132, 226, 0.1); padding: .1875rem; .no-hd{ position: relative; border: 1px solid rgba(25, 186, 139, 0.17); &::before{ position: absolute; top: 0; left: 0; content: ""; width: 30px; height: 10px; border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; } &::after{ position: absolute; bottom: 0; right: 0; content: ""; width: 30px; height: 10px; border-bottom: 2px solid #02a6b5; border-right: 2px solid #02a6b5; } ul{ display: flex; li{ position: relative; flex: 1; line-height: 1rem; font-size: .875rem; color: #ffeb7b; text-align: center; // 设置字体 font-family: 'electronicFont'; // 只给第一个小li加右边的小竖线 &:nth-child(1)::after{ content: ""; position: absolute; top:25%; right: 0; height: 50%; width: 1px; background: rgba(255, 255, 255, 0.2); } } } } .no-bd{ ul{ display: flex; li{ flex: 1; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: .225rem; height: .5rem; line-height: .5rem; padding-top: .125rem; } } } }
2.6.2 map 地图模块
-
地图模块高度为 810px 里面包含4个盒子:chart 放图表模块、球体盒子、旋转1、旋转2
具体如下:
-
球体盒子 map1: 大小为 518px(高和宽均为518px),要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
-
旋转1 map2: 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
-
旋转2 map3: 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
<!-- map 地图模块 -->
<div class="map">
<!-- 球体盒子 -->
<div class="map1"></div>
<!-- 旋转1 -->
<div class="map2"></div>
<!-- 旋转2 -->
<div class="map3"></div>
<!-- chart 放图表模块 -->
<div class="chart"></div>
</div>
// map 地图模块
.map{
position: relative;
height: 10.125rem;
.map1{
width: 6.475rem;
height: 6.475rem;
position: absolute;
top:50%;
left: 50%;
// 定位到正中央
transform: translate(-50%,-50%);
background: url(../images/map.png);
// 保证缩放
background-size: 100% 100%;
// 透明度
opacity: 0.3;
}
.map2{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 8.0375rem;
height: 8.0375rem;
background: url(../images/lbx.png);
background-size: 100% 100%;
// 调用动画效果 动画时间 匀速 无限循环
animation: rotate1 15s linear infinite;
opacity: 0.6;
}
.map3{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 7.075rem;
height: 7.075rem;
background: url(../images/jt.png);
background-size: 100% 100%;
// 调用动画效果 动画时间 匀速 无限循环
animation: rotate2 10s linear infinite;
opacity: 0.6;
}
.chart{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10.125rem;
}
// 设置旋转1的动画效果,顺时针旋转
@keyframes rotate1 {
from{
transform: translate(-50%,-50%) rotate(0deg);
}
to{
transform: translate(-50%,-50%) rotate(360deg);
}
}
// 设置旋转2的动画效果,逆时针旋转
@keyframes rotate2 {
from{
transform: translate(-50%,-50%) rotate(0deg);
}
to{
transform: translate(-50%,-50%) rotate(-360deg);
}
}
}
三、Echarts
3.1 介绍
3.1.1 常见的数据可视化库
- D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
- ECharts.js 百度出品的一个开源 Javascript 数据可视化库
- Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
- AntV 蚂蚁金服全新一代数据可视化解决方案 等等
- Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
3.1.2 ECharts
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
-
是一个JS插件
-
性能好可流畅运行PC与移动设备
-
兼容主流浏览器
-
提供很多常用图表,且可
定制。
- 折线图、柱状图、散点图、饼图、K线图
官方网站:https://echarts.apache.org/zh/index.html
(1)使用
-
下载并引入ECharts.js文件——图表依赖这个js库
❀进入官网,点击“下载”,在指定版本后点击“Dist”,下载对应的js文件
❀引入:
<script src="js/echarts.min.js"></script>
-
准备一个具有大小的DOM容器——生成的图表存放于这个容器内
<div id="main" style="width: 600px;height:400px;"></div>
-
初始化ECharts实例对象
<script> //初始化实例对象echarts.init(dom容器); var myChart = echarts.init(document.getElementById('main')); </script>
-
指定配置项和数据
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实例对象——让ECharts对象根据修改好的配置生效
<script>
myChart.setOption(option);
</script>
(2)基础配置
需要了解的主要配置:series xAxis yAxis grid tooltip title legend color toolbox
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YbTCKYfx-1646239564799)(C:\Users\小半\AppData\Roaming\Typora\typora-user-images\image-20220115234902150.png)]
- series:系列图表配置,决定显示哪种类型的图表
- 其后是数组
- type
- stack:数据堆叠,同个类目轴上系列配置相同的
stack
值后 后一个系列的值会在前一个系列的值上相加。[一般情况下不需要]
- xAxis:直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 (即是否有缝隙)true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
- type:坐标轴类型(value为数值轴、category为类目轴、time为时间轴、log为对数轴)
- date:坐标轴上显示的提示信息
- yAxis:直角坐标系 grid 中的 y 轴
- grid:直角坐标系内绘图网格。可以控制线形图、柱状图的图表大小
- containLabel:true; //ture即显示刻度标签,false反之
- title:标题组件
- tooltip:提示框组件(即鼠标放在图上的提示信息)
- trigger:触发方式(axis坐标轴触发、item数据项图形触发)
- legend:图例组件
- series里面有了name值,则legend里面的data可以删掉
- color:调色盘颜色列表。可以设置线条的颜色,注意后面是个数组
- toolbox:工具箱组件,可以将其另存为图片等功能
// 将图表下载为图片
toolbox: {
feature: {
saveAsImage: {}
}
},
3.2 柱状图图表
3.2.1 官网找到实例,引入HTML页面中
<script src="js/echarts.min.js"></script>
<script src="js/index.js"></script>
eg:此处要添加在下列代码所示的一行空行中
<div class="panel bar">
<h2>柱形图</h2>
<div class="chart">
</div>
<!-- 设置下方两角的样式 -->
<div class="panel-footer"></div>
</div>
❀在官网实例文件中找到我们需要的图例,然后在自定义的Index.js文件中写入如下:
//柱状图模块1
(function () {
// 实例化对象
var myChart = echarts.init(document.querySelector('.bar .chart'))
// 指定配置项和数据
var 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(option);
})();
3.2.2 根据需求定制图表
(1)修改图表柱形颜色
color: ["#2f89cf"],
(2)修改图表大小
// 修改图表大小
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
(3)X轴相关设置
-
坐标轴刻度标签的相关设置
要求:文本颜色设置为rgba(255,255,255,.6) 字体大小为12px
xAxis: [{ // 修改刻度标签相关样式.注意值都需要加引号 axisLabel: { color: "rgba(255,255,255,.6) ", fontSize: "12" } } ],
-
X轴线的样式不显示
xAxis: [{ // x轴样式不显示 axisLine: { show: false // 如果想要设置单独的线条样式 // lineStyle: { // color: "rgba(255,255,255,.1)", // width: 1, // type: "solid" } } ],
(4)Y轴相关设置
-
文本颜色设置为rgba(255,255,255,.6) 字体大小为12px
yAxis: [ { // y轴文字标签样式 axisLabel: { color: "rgba(255,255,255,.6) ", fontSize: "12" }, } ],
-
Y轴线条样式更改为1像素的rgba(255,255,255,.1)边框
yAxis: [ { // y轴线条样式 axisLine: { lineStyle: { color: "rgba(255,255,255,.1)", width: 1, type: "solid" } }, } ],
-
分隔线的颜色修饰为1像素的rgba(255,255,255,.1)
yAxis: [ { // y轴分割线样式 splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } } } ],
(5)修改柱形为圆角以及柱子宽度
series: [
{
// 修改柱子宽度
barWidth: "35%",
// 修改柱子圆角
itemStyle: {
barBorderRadius: 5
}
}
]
};
(6)更换数据
即更换data里面的值
(7)让图表跟随屏幕自适应
// 让图表跟随屏幕自适应
window.addEventListener("resize", function () {
myChart.resize();
});
扩展
扩展:
立即执行函数妙用:为了防止变量污染,减少命名冲突,我们可以采取立即执行函数的写法。因为里面的变量都是局部变量。
❀多个立即执行函数之间必须用分号
eg:(不完整)
(function(){
var myChart=
})();
(function(){
var myChart=
})();
3.3柱状图图表2
//柱状图模块2
(function () {
// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 2. 指定配置和数据
var option = {
grid: {
top: "10%",
left: "22%",
bottom: "10%",
// containLabel: true
},
// 不显示x轴的相关信息,即x坐标轴刻度标签
xAxis: {
show: false
},
yAxis: [
// y轴左侧数据。注意两组数据需切换成数组样式
{
type: "category",
// 是否是反向坐标轴
inverse: true,
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// 不显示y轴的坐标轴线
axisLine: {
show: false
},
// 不显示y轴的坐标轴刻度
axisTick: {
show: false
},
// 把刻度标签里面的文字颜色设置为白色
axisLabel: {
color: "#fff"
}
},
// y轴右侧数据
{
data: [702, 350, 610, 793, 664],
inverse: true,
// 不显示y轴的线
axisLine: {
show: false
},
// 不显示刻度
axisTick: {
show: false
},
// 把刻度标签里面的文字颜色设置为白色
axisLabel: {
color: "#fff"
}
}
],
series: [
{
// 修改第一组柱子相关样式(条状)
name: "条",
type: "bar",
data: [70, 34, 60, 78, 69],
// 第一个对象添加,保证位置上挨着
yAxisIndex: 0,
itemStyle: {
// 修改第一组柱子的圆角
barBorderRadius: 20,
// 此时的color 可以修改柱子的颜色
color: function (params) {
// params 传进来的是柱子对象
// console.log(params);
// dataIndex 是当前柱子的索引号(上面申明了颜色数组)
return myColor[params.dataIndex];
}
},
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 图形上的文本标签:显示柱子内的文字,即设置第一组柱子内百分比显示数据
label: {
show: true,
// 图形内显示
position: "inside",
// 文字的显示格式:{c} 会自动的解析为data里面的数据
// 另外:{a}系列名即name名、{b}数据名、{c}数据值、{@xxx}数据中名为'xxx'的维度的值、{@[n]}数据中维度n的值
formatter: "{c}%"
}
},
{
// 修改第二组柱子的相关配置(框状)
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 15,
// 第二个对象添加,保证位置上挨着
yAxisIndex: 1,
data: [100, 100, 100, 100, 100],
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
}
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
//4. 让图表跟随屏幕自适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();
3.4 折线图
3.4.1 官网找到实例,引入HTML页面中
3.4.2 根据需求定制图表
(1)修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
// 显示边框
show: true,
// 边框颜色
borderColor: '#012f4a',
// 包含刻度文字在内
containLabel: true
},
(2)修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
textStyle: {
color: '#4c9bfd'
},
// 注意加引号
right: '10%'
},
(3)x轴相关配置
- 刻度去除
- x轴刻度标签字体颜色:#4c9bfd
- 剔除x坐标轴线颜色(将来使用Y轴分割线)
- 轴两端是不需要内间距 boundaryGap
xAxis: {
type: 'category',
// 去除轴间距
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 去除刻度线
axisTick: {
show: false
},
// 修改文本颜色
axisLabel: {
color: '#4c9bfd'
},
// 去除轴线
axisLine: {
show: false
}
},
(4)y轴相关配置
- 刻度去除
- 字体颜色:#4c9bfd
- 分割线颜色:#012f4a
yAxis: {
type: 'value',
// 去除刻度线
axisTick: {
show: false
},
// 修改文本颜色
axisLabel: {
// 解决x轴横坐标文字显示不完整
interval: 0,
// // 将文字倾斜
// rotate: 40,
color: '#4c9bfd'
},
// 去除轴线
axisLine: {
show: false
},
// 分割线颜色
splitLine: {
lineStyle: {
color: '#012f4a'
}
}
},
(5)两条线形图定制
- 颜色分别:#00f2f1 #ed3f35
- 把折线修饰为圆滑 series 数据中添加 smooth 为 true
// 修改两条线的颜色
color: ['#00f2f1', '#ed3f35'],
series: [
{
name: 'Email',
type: 'line',
// 防止图像重叠
stack: 'Total',
// 将线条线修改为平滑曲线显示
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
},
(6)配置数据
// x轴的文字
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 图标数据
series: [{
name:'新增粉丝',
data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
type: 'line',
smooth: true
},{
name:'新增游客',
data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
type: 'line',
smooth: true
}
}]
(7)点击 2020年、2021年,图表数据发生变化
以下是后台送过来数据(ajax请求过来的)
注意引用jquery.js文件
<script src="js/jquery.js"></script>
<div class="panel line">
<h2>折线图1
<!-- 根据年份读取相关数据 -->
<a href="javascript:;">2021</a>
<a href="javascript:;">2022</a>
</h2>
<div class="chart">
</div>
<div class="panel-footer"></div>
</div>
// 折线图模块1
(function () {
// 相关年份的图表数据
var yearData = [
{
year: '2020', // 年份
data: [ // 两个数组是因为有两条线
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
},
{
year: '2021', // 年份
data: [ // 两个数组是因为有两条线
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
]
}
];
// 点击2020年、2021年,图表数据发生变化
// 注意使用之前,务必先引用jquery.js文件
$('.line h2').on('click', 'a', function () {
//以下几步为测试代码
// 点击相关年份,控制台打印出对应的索引序号
// console.log($(this).index());
// 点击年份的链接标签后,根据对应的索引号找到对应的yearData的相关对象
// 点击相关年份,控制台打印出对应的索引序号的yearData的相关对象
// console.log(yearData[$(this).index()]);
//正式点击的js代码
var obj = yearData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
// 需要重新渲染图表
myChart.setOption(option);
})
3.5折线图2
// 折线图模块2
(function () {
var myChart = echarts.init(document.querySelector(".line2 .chart"));
var option = {
tooltip: {
trigger: "axis"
},
legend: {
top: "0%",
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
// 设置文字颜色及大小
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
// 修改图表大小
grid: {
left: "10",
top: "30",
right: "10",
bottom: "10",
containLabel: true
},
xAxis: [
{
type: "category",
boundaryGap: false,
// x轴更换数据
data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
// 文本颜色为rgba(255,255,255,.6),文字大小为 12
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
// x轴线的颜色为rgba(255,255,255,.2)
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)"
}
}
}
],
yAxis: [
{
type: "value",
// 不显示刻度标签
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
// 修改分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
name: "邮件营销",
type: "line",
// 曲线圆滑
smooth: true,
// 单独修改当前线条的样式
lineStyle: {
color: "#0184d5",
width: "2"
},
// 填充区域颜色设置
areaStyle: {
// 渐变色
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
}
],
false
),
// 影子效果
shadowColor: "rgba(0, 0, 0, 0.1)"
},
// 设置拐点,即线条上的小圆点
symbol: "circle",
// 小圆点大小
symbolSize: 8,
// 开始不显示小圆点, 鼠标经过才显示
showSymbol: false,
// 设置拐点颜色以及边框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40]
},
{
name: "联盟广告",
type: "line",
smooth: true,
lineStyle: {
normal: {
color: "#00d887",
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 216, 135, 0.4)"
},
{
offset: 0.8,
color: "rgba(0, 216, 135, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
symbol: "circle",
symbolSize: 5,
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
showSymbol: false,
data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})();
3.6 饼状图
3.6.1 官网找到实例,引入HTML页面中
3.6.2 根据需求定制图表
####(1)需求1
- 修改图例组件在底部并且居中显示。
- 每个小图标的宽度和高度修改为 10px
- 文字大小为12 颜色 rgba(255,255,255,.5)
legend: {
// 修改图例组件在底部并且居中显示
bottom: "0%",
// 修改小图标的大小,即高度和宽度
itemWidth: 10,
itemHeight: 10,
// 修改图例组件的文字大小及颜色
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
(2)需求2
- 修改水平居中 垂直居中
- 修改内圆半径和外圆半径为 [“40%”, “60%”] pink老师友情提示,带有直角坐标系的比如折线图柱状图是 grid修改图形大小,而我们饼形图是通过 radius 修改大小
series: [
{
name: "年龄分布",
type: "pie",
// 这个radius可以修改饼形图的大小.第一个值是内圆的半径 第二个值是外圆的半径
radius: ["40%", "60%"],
// 设置饼形图在容器中的位置
center: ["50%", "45%"],
avoidLabelOverlap: false,
// 图形上的标签文字
label: {
// 不显示标签文字
show: false,
position: "center"
},
// 连接 文字和图形 的线是否显示
labelLine: {
show: false
},
}
]
};
####(3)更换数据
series: [
{
name: "年龄分布",
type: "pie",
// 这个radius可以修改饼形图的大小.第一个值是内圆的半径 第二个值是外圆的半径
radius: ["40%", "60%"],
// 设置饼形图在容器中的位置
center: ["50%", "45%"],
avoidLabelOverlap: false,
// 图形上的标签文字
label: {
// 不显示标签文字
show: false,
position: "center"
},
// 连接 文字和图形 的线是否显示
labelLine: {
show: false
},
data: [
{ value: 1, name: "0岁以下" },
{ value: 4, name: "20-29岁" },
{ value: 2, name: "30-39岁" },
{ value: 2, name: "40-49岁" },
{ value: 1, name: "50岁以上" }
]
}
]
(4)更换颜色
var option = {
color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
3.7 饼状图2
// 饼状图模块2
(function () {
var myChart = echarts.init(document.querySelector(".pie2 .chart"));
var option = {
color: [
"#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 图例
legend: {
bottom: "0%",
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
series: [
{
name: "地区分布",
type: "pie",
radius: ["10%", "70%"],
center: ["50%", "45%"],
// 将饼形图的显示模式改为半径模式
roseType: "radius",
// 图形的文字标签
label: {
fontSize: 10
},
// 链接图形和文字的线条
labelLine: {
// length 链接图形的线条
length: 6,
// length2 链接文字的线条
length2: 8
},
data: [
{ value: 20, name: "云南" },
{ value: 26, name: "北京" },
{ value: 24, name: "山东" },
{ value: 25, name: "河北" },
{ value: 20, name: "江苏" },
{ value: 25, name: "浙江" },
{ value: 30, name: "四川" },
]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})();
3.8 模拟飞行路线模块地图模块
进入官网,点击“资源”,选择“更多资源”,点击“ Gallery”,可寻找相关例子。
❀引入china.js提供中国地图的js文件
完整代码:
// 模拟飞行路线模块地图模块
(function () {
var myChart = echarts.init(document.querySelector(".map .chart"));
var geoCoordMap = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513],
中山: [113.4229, 22.478],
临汾: [111.4783, 36.1615],
临沂: [118.3118, 35.2936],
丹东: [124.541, 40.4242],
丽水: [119.5642, 28.1854],
乌鲁木齐: [87.9236, 43.5883],
佛山: [112.8955, 23.1097],
保定: [115.0488, 39.0948],
兰州: [103.5901, 36.3043],
包头: [110.3467, 41.4899],
北京: [116.4551, 40.2539],
北海: [109.314, 21.6211],
南京: [118.8062, 31.9208],
南宁: [108.479, 23.1152],
南昌: [116.0046, 28.6633],
南通: [121.1023, 32.1625],
厦门: [118.1689, 24.6478],
台州: [121.1353, 28.6688],
合肥: [117.29, 32.0581],
呼和浩特: [111.4124, 40.4901],
咸阳: [108.4131, 34.8706],
哈尔滨: [127.9688, 45.368],
唐山: [118.4766, 39.6826],
嘉兴: [120.9155, 30.6354],
大同: [113.7854, 39.8035],
大连: [122.2229, 39.4409],
天津: [117.4219, 39.4189],
太原: [112.3352, 37.9413],
威海: [121.9482, 37.1393],
宁波: [121.5967, 29.6466],
宝鸡: [107.1826, 34.3433],
宿迁: [118.5535, 33.7775],
常州: [119.4543, 31.5582],
广州: [113.5107, 23.2196],
廊坊: [116.521, 39.0509],
延安: [109.1052, 36.4252],
张家口: [115.1477, 40.8527],
徐州: [117.5208, 34.3268],
德州: [116.6858, 37.2107],
惠州: [114.6204, 23.1647],
成都: [103.9526, 30.7617],
扬州: [119.4653, 32.8162],
承德: [117.5757, 41.4075],
拉萨: [91.1865, 30.1465],
无锡: [120.3442, 31.5527],
日照: [119.2786, 35.5023],
昆明: [102.9199, 25.4663],
杭州: [119.5313, 29.8773],
枣庄: [117.323, 34.8926],
柳州: [109.3799, 24.9774],
株洲: [113.5327, 27.0319],
武汉: [114.3896, 30.6628],
汕头: [117.1692, 23.3405],
江门: [112.6318, 22.1484],
沈阳: [123.1238, 42.1216],
沧州: [116.8286, 38.2104],
河源: [114.917, 23.9722],
泉州: [118.3228, 25.1147],
泰安: [117.0264, 36.0516],
泰州: [120.0586, 32.5525],
济南: [117.1582, 36.8701],
济宁: [116.8286, 35.3375],
海口: [110.3893, 19.8516],
淄博: [118.0371, 36.6064],
淮安: [118.927, 33.4039],
深圳: [114.5435, 22.5439],
清远: [112.9175, 24.3292],
温州: [120.498, 27.8119],
渭南: [109.7864, 35.0299],
湖州: [119.8608, 30.7782],
湘潭: [112.5439, 27.7075],
滨州: [117.8174, 37.4963],
潍坊: [119.0918, 36.524],
烟台: [120.7397, 37.5128],
玉溪: [101.9312, 23.8898],
珠海: [113.7305, 22.1155],
盐城: [120.2234, 33.5577],
盘锦: [121.9482, 41.0449],
石家庄: [114.4995, 38.1006],
福州: [119.4543, 25.9222],
秦皇岛: [119.2126, 40.0232],
绍兴: [120.564, 29.7565],
聊城: [115.9167, 36.4032],
肇庆: [112.1265, 23.5822],
舟山: [122.2559, 30.2234],
苏州: [120.6519, 31.3989],
莱芜: [117.6526, 36.2714],
菏泽: [115.6201, 35.2057],
营口: [122.4316, 40.4297],
葫芦岛: [120.1575, 40.578],
衡水: [115.8838, 37.7161],
衢州: [118.6853, 28.8666],
西宁: [101.4038, 36.8207],
西安: [109.1162, 34.2004],
贵阳: [106.6992, 26.7682],
连云港: [119.1248, 34.552],
邢台: [114.8071, 37.2821],
邯郸: [114.4775, 36.535],
郑州: [113.4668, 34.6234],
鄂尔多斯: [108.9734, 39.2487],
重庆: [107.7539, 30.1904],
金华: [120.0037, 29.1028],
铜川: [109.0393, 35.1947],
银川: [106.3586, 38.1775],
镇江: [119.4763, 31.9702],
长春: [125.8154, 44.2584],
长沙: [113.0823, 28.2568],
长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028]
};
var XAData = [
[{ name: "西安" }, { name: "拉萨", value: 100 }],
[{ name: "西安" }, { name: "上海", value: 100 }],
[{ name: "西安" }, { name: "广州", value: 100 }],
[{ name: "西安" }, { name: "西宁", value: 100 }],
[{ name: "西安" }, { name: "银川", value: 100 }]
];
var XNData = [
[{ name: "西宁" }, { name: "北京", value: 100 }],
[{ name: "西宁" }, { name: "上海", value: 100 }],
[{ name: "西宁" }, { name: "广州", value: 100 }],
[{ name: "西宁" }, { name: "西安", value: 100 }],
[{ name: "西宁" }, { name: "银川", value: 100 }]
];
var YCData = [
[{ name: "拉萨" }, { name: "潍坊", value: 100 }],
[{ name: "拉萨" }, { name: "哈尔滨", value: 100 }],
[{ name: "银川" }, { name: "上海", value: 100 }],
[{ name: "银川" }, { name: "西安", value: 100 }],
[{ name: "银川" }, { name: "西宁", value: 100 }]
];
var planePath =
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
//var planePath = 'arrow';
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
};
var color = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
var series = [];
[
["西安", XAData],
["西宁", XNData],
["银川", YCData]
].forEach(function (item, i) {
series.push(
{
name: item[0] + " Top3",
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: "red", //arrow箭头的颜色
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + " Top3",
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + " Top3",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
},
emphasis: {
areaColor: "#2B91B7"
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
}
);
});
var option = {
tooltip: {
trigger: "item",
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return "线路:" + params.data.name + "" + params.data.value[2];
} else if (params.seriesType == "lines") {
return (
params.data.fromName +
">" +
params.data.toName +
"<br />" +
params.data.value
);
} else {
return params.name;
}
}
},
legend: {
orient: "vertical",
top: "bottom",
left: "right",
data: ["西安 Top3", "西宁 Top3", "银川 Top3"],
textStyle: {
color: "#fff"
},
selectedMode: "multiple"
},
geo: {
map: "china",
label: {
emphasis: {
show: true,
color: "#fff"
}
},
// 把中国地图放大了1.2倍
zoom: 1.2,
roam: true,
itemStyle: {
normal: {
// 地图省份的背景颜色
areaColor: "rgba(20, 41, 87,0.6)",
borderColor: "#195BB9",
borderWidth: 1
},
emphasis: {
areaColor: "#2B91B7"
}
}
},
series: series
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})();
3.9 最后的约束缩放
/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
html {
font-size: 42px !important;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}