Echarts实现情人节的告白：爱情旅游日记照片墙WE记录我们的世界足迹

一、项目说明 （一）应用说明

1. 用时间轴形式展示图片和文本，将曾经的经历按照时间顺序加载，形成一个时间轴大事记照片墙；
2. 实现照片和文本的点击放大效果，展示全部详情和细节；
3. 将计划和足迹通过后台修改图片合影和旅游日记的方式，生动的记录爱情生活；

（二）应用开发技术 Echarts5开源可视化图表库

1. 图表基础框架的搭建；
2. series-pictorialBar，象形柱图；
3. series-bar，柱状图；
4. dataZoom 组件，用于区域缩放；
5. on方法添加事件处理函数；

layui前端框架

layer弹出模态框；

二、实战开发 （一）引入JS库

（二）背景样式表

* {
    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 

2.初始化图表

   var myChart = echarts.init(document.getElementById("love"));

3.组件和系列设置

为了代码的完整性和表述的需要，将部分说明直接注释在代码中，具体实现的功能如下：

1. 单击展示和隐藏文本信息；
2. 单击展示和隐藏图片信息；
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);
        }
    });

（六）封装函数

1. layUI弹出图片层

    /*弹出图片层*/
    function previewImg(url) {
        var imgHtml = "";
        // 创建对象
        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 () {
            }
        });
    }

2. layUI弹出文字层

    function layContent(title, str) {
        layer.open({
            type: 1,
            //maxmin: true,
            shade: 0.7,
            area: ['600px', '400px'],
            shadeClose: true,
            scrollbar: false,
            title: title,
            content: '
' + str + '',
            cancel: function () {
            }
        });
    }

3. 字符串按字数换行

    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;
        }
    }

4. 缩减文本

    function limitWords(txt, num) {
        var str = txt;
        str = str.substr(0, num);
        return str + "";
    }