Data visualization display case

1. Display

Insert picture description here

2. Knowledge reserve

2.1 Border image properties

effect
```
为盒子设置边框图片效果
```

Property introduction

border-image-source

作用:  设置边框图片路径

例如: border-image-source: url('border.jpg');

border-image-slice

作用: 裁切边框图片

裁切方式: 按照  上  右  下  左 顺序裁切

例如:  border-image-slice: 165 165 165 165;

注意事项: 
1. 裁剪时候不需要设置单位
2. 如果裁切的尺寸大小一样则可以设置一个值

border-image-repeat

作用: 设置边框图片默认平铺方式

例如:  border-image-repeat: round;

注意事项:
1. border-image-repeat的默认值是: stretch 拉伸
2. repeat 平铺
3. round 铺满

border-image-width

作用: 设置边框图片宽度

例如:  border-image-width: 20px;

注意事项:
1. border-image-width 只能改变边框图片大小
2. border-image-width 不会影响盒子大小

Attribute co-writing

border-image: border-image-source border-image-slice / border-image-width  border-image-repeat

例如:
border-image: url('border.png') 50 38 20 127 / 50px 38px 20px 127px round;

注意:
1. 如果没有设置border-image-width, '/' 可以省略
2. 如果设置border-image-width,则必须使用  '/' 隔开,且必须放到 border-image-repeat之前

2.2 rem adaptation

the reason

1. 当前设计稿件的尺寸是 1920px
2. 在不同的设备中都能够正常完整预览  [1024 - 1920]

Mobile rem adaptation process

Dynamically calculate the text size of the root label in each device by means of media queries

☞ 先约定要将设计稿件分为多少等份
☞ 当前设备宽度 / 等比例的份数 = 根标签文字大小

例如:
@media only screen and (max-width: 1366px) {
      
      
  html {
      
      
     /* 1366px / 20 */
     font-size: 68px;
  }
}
@media only screen and (max-width: 767px) {
      
      
   html {
      
      
       /* 767px / 20 */
       font-size: 38px;
   }
}
div {
      
      
   width: 2rem;
   height: 2rem;
   background-color: red;
}

Use JS to achieve rem adaptation

Get the width of the current device dynamically through js
```
document.querySelector('html').offsetWidth;
```

Dynamically set the text size of the root label through js

document.querySelector('html').style.fontSize = 设备宽度 / 基准值(份数)

Complete writing

(function(){
        
        
   function setFont() {
        
        
        //基准值
        var baseNum = 80;
        var client = document.querySelector('html');
        //获取当前设备宽度
        var width = client.offsetWidth;
        //设置当前根标签文字大小
        if(width >= 1920) {
        
        
           width = 1920;
        }else if(width <= 1024) {
        
         
           width=1024; 
        } 
        client.style.fontSize=width / baseNum + 'px';
      }
      setFont();
      //当窗口发生改变的时候触发的一个事件
      window.onresize = function() {
        
        
        setFont();
     }
})();

2.3 Plug-in dynamic conversion rem value

Why use plugins to convert rem values?

原因: 在进行rem适配的过程中,需要不断的将测量元素的大小设置为rem,所以需要vscode中插件帮助实现

step

First search for the plugin in vscode cssremand install it

Configure after successful installation

Insert picture description here

"cssrem.rootFontSize": 24, //【计算时的基准值, 最大尺寸 1920 / 80 】 
"cssrem.fixedDigits": 3, // 【取三位小数, 计算除不尽的时候,保留3位小数】
"cssrem.autoRemovePrefixZero": false//【是否去除0  例如: 0.5 不能写成 .5】

2.4 Introduction to Echarts Library

What is Echarts?

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11XQ，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

https://echarts.apache.org/zh/index.html

How to use Echarts?

Download the EchartsJs file first

https://github.com/apache/incubator-echarts/tree/4.8.0

Introduce Echarts files in the web page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

备注: echarts.min.js 文件在解压缩文件后 dist 文件夹中

First Experience

<div id="main" style="width: 600px;height:400px;"></div>
<script src="echarts.min.js"></script>
<script>
		 // 基于准备好的dom，初始化echarts实例
		 var myChart = echarts.init(document.getElementById('main'));
		 // 指定图表的配置项和数据
		 var option = {
       
       
			title: {
       
       
			   text: 'ECharts 入门示例'
			},
			tooltip: {
       
       },
			legend: {
       
       
			data:['销量']
			},
			xAxis: {
       
       
			data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {
       
       },
			series: [{
       
       
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20]
			}]
		 };
		 // 使用刚指定的配置项和数据显示图表。
		 myChart.setOption(option);
</script>

Introduction to Echarts configuration options

series

设置当前图表类型的
例如:
series : [
    {
      
        
        //代表当前是折线图
        type: 'line',
        //与图例配合使用
        name: '',
        //图表要显示的数据
        data: []
    }
]

title

设置当前图表标题
title : {
        
        
    title: '标题'
}

legend

设置图表图例

legend: {
        
        
	data:['这是图例']
}

注意:
1. 要显示图例,series中必须设置 name 属性
2. legend 中的值必须和 series中 name 属性值一样

tooltip

设置鼠标悬停到图表上的提示
tooltip: {
	 trigger : 'axis'
	 //默认值是 item
}

xAxis

设置图表X轴相关信息

xAxis: {
	name: 'X轴显示的名称',
	//设置名称位置
	nameLocation: 'end',
	//设置X轴显示数据
	data: []
}

yAxis

设置图表Y轴相关信息,与X轴配置类似

yAxis: {
        
        
    name: 'X轴显示的名称',
	//设置名称位置
	nameLocation: 'end',
	//设置X轴显示数据
	data: []
}

grid

设置网格

grid: {
	show: true,
	borderColor: '#999',
}

color
```
//设置图例颜色
color: ['yellow']
```

3. Data visualization implementation steps

3.1 Preparation

Build case directory structure

Prepare style initialization

body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,p {
      
      
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.583rem;
    font-family: '微软雅黑';
    color: #fff;
}
a {
      
      
    text-decoration: none;
}

Set the background image for the entire page

html {
      
      
    background: url('../img/bg.jpg') no-repeat;
    background-size: cover;
}

Prepare page adaptation js file

(function(){
      
      
   function setFont() {
      
      
        //基准值
        var baseNum = 80;
        var client = document.querySelector('html');
        //获取当前设备宽度
        var width = client.offsetWidth;
        //设置当前根标签文字大小
        if(width >= 1920) {
      
      
           width = 1920;
        }else if(width <= 1024) {
      
       
           width=1024; 
        } 
        client.style.fontSize=width / baseNum + 'px';
      }
      setFont();
      //当窗口发生改变的时候触发的一个事件
      window.onresize = function() {
      
      
        setFont();
     }
})();

Introduce CSS file of icon font library
Import the index.css file corresponding to the current page
Introduce Echarts library js file
Introduce Jquery file

3.2 Web page layout

Box division

1. 整个页面是一个大盒子
2. 大盒子中分为 左侧盒子(leftBox)    中间盒子(middleBox)   右侧盒子(rightBox)
3. 使用伸缩布局实现盒子一行显示

Initialize the basic style of the box

Set a background image and other basic styles for the current big box

.main_body {
        
        
    //伸缩盒子,让子元素一行显示
    display: flex;
    min-width: 42.667rem;
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
    //给当前元素设置一个logo背景图
    background: url('../img/logo.png') no-repeat top center;
    background-size: contain;
    padding: 3.583rem 0.833rem 0.833rem;
    box-sizing: border-box;
}

Set the public style in the webpage-the public style of the
border image

.borderImage() {
        
        
    width: 100%;
    border: 1px solid transparent;
    //设置边框图片
    border-image-source: url('../img/border.png');
    // 分割边框
    border-image-slice: 50 38 58 127;
    // 设置边框的平铺方式
    border-image-repeat: round;
    // 设置边框宽度
    border-image-width: 2.083rem  1.583rem 2.417rem  5.292rem;
    box-sizing: border-box;
}

For specific operations,
download resource packs and case codes

If there are any shortcomings, please advise, to
be continued, continue to update!
Make progress together!

Front-end and mobile development-data visualization-border image attributes, rem adaptation, Echarts library