ECharts_01day


数据可视化ECharts

什么是数据可视化

682

应用场景

通用报表,移动端图标,大屏可视化,图编辑&图分析,地理可视化。

683

常见的数据可视化库

简单来说就是能实现上图效果的js代码库

684

数据可视化项目概述

项目展示

685

项目目的

首先目前市面上对数据可视化有大的需求

其次本项目可以对所学知识承上启下,为下面学习的服务器知识如何拿到后端数据做铺垫。

686

项目技术

687

ECharts简介

688

官网
echartsjs.com/zh/index.html
https://echarts.apache.org/zh/index.html

689

它有非常丰富的可视化模板,特效非常绚丽,而且支持多种数据格式的传入。

ECharts基本使用

690

691

第一步 下载引入echarts.js因为我们需要用到这个库

第二步 写一个设置了宽高的盒子,它的作用就是在此区域显示我们的图表。

第三步 初始化echarts实例对象(给第二步的盒子生成一个对象)

第四步 写配置项和数据,配置项会决定图表的样式

第五步 配置项设置好了,我们需要把它赋予给echarts实例对象

692

1-这是课程中的笔记,因为视频是19年的,所以上图中的var现在可以写成const或者let,dom对象选择器的查找可以写成document.querySelector(‘选择器’)

2-配置项不需要我们自己去写,后面再学,直接去官网复制一个即可

3-初始化实例对象,echarts有专门的初始化实例方法init,而不是new

4-这种引入的js,里面的方法等东西是没有提示的,需要自己写。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: skyblue;
        }
    </style>
    <!-- 第一步导入echarts的js -->
    <script src="./代码/js/echarts.min.js"></script>
</head>

<body>
    <!-- 第二步,写一个盒子去存图表,注意必须写大小 -->
    <div class="box"></div>
    <script>
        // 初始化实例对象,echarts有专门的初始化实例方法init,而不是new
        const firstecharts = echarts.init(document.querySelector('.box'))
        // 写入配置文件
        const option = {
            xAxis: {
                data: ['2022-05-24', '2022-05-25', '2022-05-26', '2022-05-27']
            },
            yAxis: {},
            series: [
                {
                    type: 'candlestick',
                    data: [
                        [20, 34, 10, 38],
                        [40, 35, 30, 50],
                        [31, 38, 33, 44],
                        [38, 15, 5, 42]
                    ]
                }
            ]
        };
        // 将配置文件赋予实例对象
        firstecharts.setOption(option)


    </script>
</body>

</html>

效果如图

693

需要生成不同的图,去官网实例中,复制不同的option配置代码即可。

echarts相关配置

694

例如

695

grid配置

696

注意:option是一个对象,里面的内容,你添加其他属性的话,记得用逗号隔开。

1-其中我们设置的box大小是粉色框区域,grid网格区域是红色框,设置left等就是设置两个盒子的距离。

2-containlable是刻度标签,如上图的500,1000,1500等,设置为true的话,即使left设置为0%,这些数字也是会显示的

3-grid也是一个封装好的对象,left,right等是它的属性

4-echarts.js中有很多个对象,也有很多个属性,我们记住常用的就行,具体细节作用需要看开发文档,熟能生巧,即查即用。

5-修改上述图表的数据线的颜色就可以用color:[]来设置

6-xAxis和yAxis就是x/y轴的意思

7-tooltip配置中的trigger属性就是什么情况下触发显示出tip。

series

series英文是系列连续的意思

它是一个数组,里面有若干对象,对象就是图表中的数据,如上图中,删去一个数组内容,就会少一条线。

697

1-series中name属性和legend中的data属性,数据要能对上,否则legend不会显示此name

stack堆叠属性

698

1-当stack属性设置为相同的值,那么就会数据堆叠,如上图,第二行的数据是220,但是线段却在340,因为堆叠加上了第一条线的120

2-当不需要堆叠,设置不同的属性值即可,或者直接删了这个属性。

我们一般在echarts官网中找到需要的实例,在网站在线修改option后,复制到编辑器中。

数据可视化项目开发

响应式适配

1-适配我们可以用媒体查询,也可以用2022最新的vw,vh,但是视频中是2019年,所以用的rem,因为现在各大项目也还有很多rem写法,所以这里我也就跟着视频写了。

2-cssrem是一个把px自动计算出rem的插件罢了,自己算也可以。

699

flexible不一定把屏幕分为10等分,就像bootstrap默认分为12等分,这些都是默认值,可以修改的(去flexible.js的源码中改)

700

!important是防止此css被其他的css层叠掉,屏幕宽度在1024以下,字体全部42.66大小,因为害怕再小,图片文字就显示的不清楚了。

701

项目准备

702

核心思路就是先盒子布局,然后把echarts的图表填入

盒子即可。

703

这里一个低等错误,引入js,用的link去引入,应该用script,真是愚蠢至极,还纳闷flexible不生效

边框图片

704

这里可以看到,每个小盒子上面两个角有一个都有一个边框,它们是相同样式,我们可以统一加一个背景图片吗? 不行因为每个盒子大小不同,所以就需要用到边框图片。

705

怎么生成的?

因为就四个角不同,所以需要把四个角切出来,其余部分让它拉伸即可。

706

边框图片的语法

707

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框图片</title>
    <style>
        div {
            width: 400px;
            height: 300px;
            border: 15px solid pink;
            border-image-source: url(images/border.png);
            /* 不要跟单位 */
            border-image-slice: 30 30 30 30;
            /* border-image-slice: 30; */
            /* 这个属性默认的是 border的宽度 但是 有区别,  这个是 边框图片的宽度 不会挤压文字 */
            border-image-width: 30px;
            border-image-repeat: round;

        }
    </style>
</head>

<body>
    <div>加油</div>
</body>

</html>

注意border-image-slice: 必须上右下左顺序,如果只写一个值,则四边都一样的值。

写公共面板样式与概览区域

注意每个写了数据的地方,必须单独写标签,因为我们前端需要接收数据然后改变数据,有标签才能进行此改变操作。

即上面的边框图片等,写公共样式,哪个盒子用到了,就给它加上这个样式的类名。

708

注意

1-border-width 也有上右下左四个值

2-border-image-slice是没有单位的,它底层的机制就是这样,你在本电脑切好四个角记住像素值即可。

3-上图的51,38,20,132就是需要的部分,设置为边框宽度转为rem,因为是响应式网页,这个宽度是变化的。

4-边框宽度和图片设置好了后,边框长度就会跟着内容的大小去自动改变(我们设置的是边框宽度,长度并没有设置)

5-注意border-image-source:url(),这里是需要写一个url的

.panel {
    /* 先设置一个边框15px,下面的border-width会覆盖它 */
    border: 15px solid pink;
    border-width: 0.6375rem 0.475rem 0.25rem 1.65rem;
    border-image-source: url(../images/border.png);
    border-image-slice: 51 38 20 132;
    margin-bottom: 0.25rem;
}

概览区域效果如下

709

1-问题一:我的内容上图p标签1,为什么往下面挪了那么多?

答:因为我们设置的border-width就有那么宽,而且边框图片被切割下来的部分是透明的,所以就感觉那部分没内容,我们的真正内容也无法占据它(因为它是有一个边框存在的)

解决:用子绝父相,把所有内容再写入一个子盒子,然后left 和right 和bottom和top写负值,把子盒子拉伸,从而盖住边框图片的透明部分。

注意:绝对定位后,内容脱标,那么内容变多,盒子也不会变大,边框长度也就不变,所以后续还要设置或者指定一个高度。

2-问题二:当图片地址万一失效,border的颜色会变成我们设置的颜色,所以最好提前设置transparent透明

3-里面的内容用flex布局排列即可,使用ul加4个li。

710

监控区域

711

1-这里布局也很简单,重点在tab栏切换,在原生js已经学过了,tab栏与内容数量对应上,然后默认隐藏一个,点击按钮再通过js显示即可。

2-文字上下滚动动画,用animation和transform移动即可,注意无缝动画移动需要在后面追加一些元素,否则留白。

自我问题:我这个盒子移动上去了?下面的盒子不挤上来?

答:这里只是子盒子内容移动,外面还有父盒子占位呢。

3-鼠标移入动画停止,用hover和animation-play-state:paused即可


文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 瑾年 !
评论
  目录