文章目录
- 前言
- 一、项目说明
-
- （一）应用说明
- （二）应用开发技术
-
- Echarts5开源可视化图表库
- layui前端框架
- 二、实战开发
-
- （一）引入JS库
- （二）背景样式表
- （三）演示数据处理
-
- （四）Echarts图表
-
- 1.构建渲染容器
- 2.初始化图表
- 3.组件和系列设置
- （五）单击事件
- （六）封装函数
- 后记说明
前言
总想带你，
走遍世界的每个角落。
但生活的忙碌，
总是无暇抽身，
也总是这样或那样的理由&借口。
《爱情旅游日记墙 WE 记录我们的足迹》
用自己最擅长的事，
为你准备2021.2.14情人节的告白。
我希望：
将世界的著名旅游景点的没张照片，
都换成我们的合影；
将每个景点的介绍，
都写上我们“爱的宣言”。
一、项目说明
（一）应用说明
- 用时间轴形式展示图片和文本，将曾经的经历按照时间顺序加载，形成一个时间轴大事记照片墙；
- 实现照片和文本的点击放大效果，展示全部详情和细节；
- 将计划和足迹通过后台修改图片合影和旅游日记的方式，生动的记录爱情生活；
（二）应用开发技术
Echarts5开源可视化图表库
- 图表基础框架的搭建；
- series-pictorialBar，象形柱图；
- series-bar，柱状图；
- dataZoom 组件，用于区域缩放；
- on方法添加事件处理函数；
layui前端框架
layer弹出模态框；
二、实战开发
（一）引入JS库
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js">script>
<script src="//iot.qiaodu.net/js/layui/layui.js">script>
<link rel="stylesheet" href="//iot.qiaodu.net/js/layui/css/layui.css">
（二）背景样式表
* {
margin: 0;
padding: 0;
}
body {
background: #fff url("../images/mainbg.jpg") no-repeat top center;
}
#love {
width: 100%;
height: 100%
}
.content {
padding: 12px;
font-size: 16px;
text-indent: 32px;
line-height: 25px;
background: #FFF;
}
（三）演示数据处理
1.数据格式
基于项目的实际情况，无法全部展示后端代码，同时为了实现本地化的预览需求，将JSON数据格式转化为JS数组对象格式，具体如下：
var data = [
{
vplace: '美国大峡谷', vcontent: '美国大峡谷是一个举世闻名的自然奇观， 位于西部亚利桑那州西北部的凯巴布高原上，总面积2724.7平方公里， 由于科罗拉多河穿流其中，故又名科罗拉多大峡谷。它是联合国教科文组织选为受保护的天然遗产之一 。', vimg: 'upload/01.jpg', vdata: 120, vctime: '2020-01-01'},
{
vplace: '澳大利亚的大堡礁', vcontent: '世界上有一个最大最长的珊瑚礁群 ，它就是有名的大堡礁- Great Barrier Reef ，它纵贯蜿蜒于澳洲的东海岸，全长2011公里 ，最宽处161公里 ，南端最远离海岸241公里， 北端离海岸仅16公里， 在落潮时 ，部分的珊瑚礁露出水面形成珊瑚 。', vimg: 'upload/02.jpg', vdata: 60, vctime: '2020-01-02'},
{
vplace: '美国佛罗里达州', vcontent: '佛罗里达风景最亮丽的棕榈海滩是全球著名的旅游天堂之一。 适宜的气候 ，美丽的海滩 ，精美的饮食 ，艺术展览和文艺演出 即使是最挑剔的游客， 在棕榈海滩也能满意而归 。每年的四月， 棕榈海滩的艺术活动是最丰富多彩的， 包括各种海滩工艺品展览， 其中于4月4日启动的棕榈海滩爵士节以展示美国最杰出的爵士音乐而赢得了艺术爱好者 。', vimg: 'upload/03.jpg', vdata: 120, vctime: '2020-01-03'},
{
vplace: '新西兰的南岛', vcontent: '新西兰位于南太平洋， 海岸线长6900千米， 主要由南岛和北岛组成库克海峡将两岛分开， 还有许多较小的岛屿全境多山， 山地面积占全国面积的50% ，南岛西部绵亘着雄伟的南阿尔卑斯山脉库克峰海拔3764米，为全国最高峰 ，无论是茂盛的雨林、 清澈的湖泊 还是绿草茵茵的和山坡、水清沙白的海滩 ，无不显示新西兰的 。', vimg: 'upload/04.jpg', vdata: 60, vctime: '2020-01-04'}
];
2.数据格式处理
var timeDate = [], dataImg = [], dataList = [], dataName = [], content = [], dataPictorial = [];
for (var i = 0; i < data.length; i++) {
dataName.push(data[i].vplace);
timeDate.push(data[i].vctime);
dataImg.push(data[i].vimg);
dataList.push(data[i].vdata);
content.push(data[i].vcontent);
}
for (var j = 0; j < dataName.length; j++) {
dataPictorial.push({
value: dataList[j],
symbol: 'image://' + dataImg[j]
})
}
（四）Echarts图表
1.构建渲染容器
<div id="love">div>
2.初始化图表
var myChart = echarts.init(document.getElementById("love"));
3.组件和系列设置
为了代码的完整性和表述的需要，将部分说明直接注释在代码中，具体实现的功能如下：
- 单击展示和隐藏文本信息；
- 单击展示和隐藏图片信息；
- 鼠标滚动缩放列表；
var option = {
title: {
text: '爱情旅游日记墙 WE 记录我们的足迹',
x: 'center',
y: '2%',
textStyle: {
color: 'rgba(255,255,255,0.9)',
fontSize: 28
}
},
tooltip: {
show: false
},
legend: {
icon: 'circle',
data: [
{
"name": "大事记"},
{
"name": "爱情墙"}
],
textStyle: {
"color": "rgba(255,255,255,0.9)"
},
y: '6%',
},
dataZoom: [{
show: true,
type: 'inside',
start: 0,
end: 50
}],
grid: {
"top": "25%",
"right": "2%",
"bottom": "10%",
"left": "2%",
containLabel: true
},
xAxis: [
{
"type": "category",
data: timeDate,
interval: 0,
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"}},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)", fontSize: '12'},
}
}
],
yAxis: {
show: false,
"type": "value",
"name": "高度"
},
series: [
{
name: "大事记",
tooltip: {
show: false},
type: 'bar',
data: dataList,
barWidth: 3,
itemStyle: {
color: '#FF5722',
},
label: {
show: true,
padding: 5,
backgroundColor: '#fff',
borderRadius: 5,
width: 120,
position: [-60, 0],
formatter: function (params) {
return "{b|" + dataName[params.dataIndex] + "}\n{content|" + newline(limitWords(content[params.dataIndex], 100), 10) + "}";
},
rich: {
content: {
color: 'rgba(0,0,0,0.8)',
lineHeight: 20,
},
b: {
color: '#FF0087',
fontWeight: 'bold'
}
}
}
}, {
name: '爱情墙',
tooltip: {
show: false},
type: 'pictorialBar',
symbolPosition: 'end',
symbolSize: [130, 125],
symbolOffset: [5, '-110%'],
data: dataPictorial,
z: 999,
}
]
};
（五）单击事件
1.点击图片，弹出layui图片层，实现图片自适应大小，全屏展示；
2.点击文字，弹出layui，弹出layui图片层，将全部文本予以展示；
myChart.on('click', function (params) {
if (params.componentIndex == 0) {
var title = dataName[params.dataIndex];
var str = content[params.dataIndex];
layContent(title, str);
}
if (params.componentIndex == 1) {
var url = params.data.symbol.replace("image://", "");
previewImg(url);
}
});
（六）封装函数
- layUI弹出图片层
function previewImg(url) {
var imgHtml = "![]("</span> <span class="token operator">+</span> url <span class="token operator">+</span> <span class="token string">")
";
var img = new Image();
img.src = url;
layer.open({
type: 1,
shade: 0.7,
area: [img.width + 'px', img.height + 'px'],
shadeClose: true,
scrollbar: false,
title: false,
content: imgHtml,
cancel: function () {
}
});
}
- layUI弹出文字层
function layContent(title, str) {
layer.open({
type: 1,
shade: 0.7,
area: ['600px', '400px'],
shadeClose: true,
scrollbar: false,
title: title,
content: ''
+ str
+ '<\/div>',
cancel
: function () {
}
});
}
- 字符串按字数换行
function newline(str, n) {
var len = str.length;
var strTemp = '';
if (len > n) {
strTemp = str.substring(0, n);
str = str.substring(n, len);
return strTemp + '\n' + newline(str, n);
} else {
return str;
}
}
- 缩减文本
function limitWords(txt, num) {
var str = txt;
str = str.substr(0, num);
return str + "";
}
后记说明
- 本案例为开源案例，如果您觉得有参考价值，请留言点赞关注，将通过私信发您下载链接；或者直接通过资源下载：https://download.csdn.net/download/weixin_41290949/15177505
- 案例基于1920*1080，16：9模式开发，建议F11全屏查看，效果最佳；
- “技术服务于生活”，在忙碌的工作中，给自己爱的人做一份“心意”，也是难得的体验。
Done!
