データ視覚化陳列ケース
1.ディスプレイ
2.ナレッジリザーブ
2.1ボーダー画像のプロパティ
-
効果
为盒子设置边框图片效果
-
物件紹介
-
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 不会影响盒子大小 -
属性の共同執筆
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レム適応
-
理由
1. 当前设计稿件的尺寸是 1920px 2. 在不同的设备中都能够正常完整预览 [1024 - 1920] -
モバイルレム適応プロセス
- メディアクエリを使用して、各デバイスのルートラベルのテキストサイズを動的に計算します
☞ 先约定要将设计稿件分为多少等份 ☞ 当前设备宽度 / 等比例的份数 = 根标签文字大小 例如: @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; }- JSを使用してレム適応を達成する
-
jsを介して動的に現在のデバイスの幅を取得します
document.querySelector('html').offsetWidth; -
jsを介してルートラベルのテキストサイズを動的に設定します
document.querySelector('html').style.fontSize = 设备宽度 / 基准值(份数) -
完全な執筆
(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プラグインの動的変換レム値
-
プラグインを使用してレム値を変換するのはなぜですか？
原因: 在进行rem适配的过程中,需要不断的将测量元素的大小设置为rem,所以需要vscode中插件帮助实现 -
ステップ
-
最初にvscode でプラグインを検索し、
cssremインストールします
-
インストールが成功した後に構成する
"cssrem.rootFontSize": 24, //【计算时的基准值, 最大尺寸 1920 / 80 】 "cssrem.fixedDigits": 3, // 【取三位小数, 计算除不尽的时候,保留3位小数】 "cssrem.autoRemovePrefixZero": false//【是否去除0 例如: 0.5 不能写成 .5】
-
2.4Echartsライブラリの概要
- Echartsとは何ですか？
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11XQ，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
https://echarts.apache.org/zh/index.html
- Echartsの使い方は？
-
最初に
EchartsJsファイルをダウンロードしますhttps://github.com/apache/incubator-echarts/tree/4.8.0 -
WebページにEchartsファイルを導入する
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html> 备注: echarts.min.js 文件在解压缩文件后 dist 文件夹中 -
初体験
<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>
-
Echarts構成オプションの概要
- シリーズ
设置当前图表类型的 例如: series : [ { //代表当前是折线图 type: 'line', //与图例配合使用 name: '', //图表要显示的数据 data: [] } ]-
題名
设置当前图表标题 title : { title: '标题' } -
伝説
设置图表图例 legend: { data:['这是图例'] } 注意: 1. 要显示图例,series中必须设置 name 属性 2. legend 中的值必须和 series中 name 属性值一样 -
ツールチップ
设置鼠标悬停到图表上的提示 tooltip: { trigger : 'axis' //默认值是 item } -
xAxis
设置图表X轴相关信息 xAxis: { name: 'X轴显示的名称', //设置名称位置 nameLocation: 'end', //设置X轴显示数据 data: [] } -
yAxis
设置图表Y轴相关信息,与X轴配置类似 yAxis: { name: 'X轴显示的名称', //设置名称位置 nameLocation: 'end', //设置X轴显示数据 data: [] } -
グリッド
设置网格 grid: { show: true, borderColor: '#999', } -
色
//设置图例颜色 color: ['yellow']
3.データ視覚化の実装手順
3.1準備
-
ケースディレクトリ構造を構築する
-
スタイルの初期化を準備する
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; } -
ページ全体の背景画像を設定する
html { background: url('../img/bg.jpg') no-repeat; background-size: cover; } -
ページ適応jsファイルを準備する
(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(); } })(); -
アイコンフォントライブラリのCSSファイルをご紹介します
-
現在のページに対応するindex.cssファイルをインポートします
-
Echartsライブラリのjsファイルを紹介します
-
Jqueryファイルを紹介します
3.2Webページのレイアウト
-
ボックス分割
1. 整个页面是一个大盒子 2. 大盒子中分为 左侧盒子(leftBox) 中间盒子(middleBox) 右侧盒子(rightBox) 3. 使用伸缩布局实现盒子一行显示 -
ボックスの基本的なスタイルを初期化します
-
現在の大きなボックスの背景画像とその他の基本的なスタイルを設定します
.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; } -
ウェブページでパブリックスタイルを設定します-
ボーダー画像のパブリックスタイル.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; } -
特定の操作については、
リソースパックとケースコードをダウンロードしてください
-
欠点がある場合
は、継続するようにアドバイスしてください。更新を続けてください。
一緒に進歩しましょう！