标签：告白 content params str var data Echarts 情人节 255
文章目录
前言
总想带你，
走遍世界的每个角落。
但生活的忙碌，
总是无暇抽身，
也总是这样或那样的理由&借口。
《爱情旅游日记墙 WE 记录我们的足迹》
用自己最擅长的事，
为你准备2021.2.14情人节的告白。
我希望：
将世界的著名旅游景点的没张照片，
都换成我们的合影；
将每个景点的介绍，
都写上我们“爱的宣言”。
一、项目说明
（一）应用开发技术
Echarts5开源可视化图表库
- 图表基础框架的搭建；
- series-pictorialBar，象形柱图；
- series-bar，柱状图；
- dataZoom 组件，用于区域缩放；
- on方法添加事件处理函数；
layui前端框架
layer弹出模态框；
二、实战开发
（一）引入JS库
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
<!--LayUI交互模态框-->
<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: {
//rotate: -270,
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 = "<img src='" + url + "' style='width:100%; max-width:100%;'/>";
// 创建对象
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,
//maxmin: true,
shade: 0.7,
area: ['600px', '400px'],
shadeClose: true,
scrollbar: false,
title: title,
content: '<div class="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!
标签：告白,content,params,str,var,data,Echarts,情人节,255 来源： https://blog.csdn.net/weixin_41290949/article/details/113781162
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。