前端学习之JavaScript echarts库的使用

边框图片

组合写法：

border-image: url("images/border.jpg") 167/20px round;

拆分写法：

border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;

解释：

边框图片资源地址
裁剪尺寸（上右下左）单位默认px，可使用百分百。
边框图片的宽度，默认边框的宽度。
平铺方式：
- stretch 拉伸（默认）
- repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
- round 环绕，是完整的使用切割后的图片进行平铺。

DEMO代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框图片</title><style>ul{margin: 0;padding: 0;list-style: none;}li{width: 350px;height: 160px;border: 20px solid #ccc;margin-top: 20px;}li:nth-child(1){/*border-image: url("images/border.jpg") 167/20px round;*/border-image-source: url("images/border.jpg");border-image-slice: 167 167 167 167;border-image-width: 20px;/*环绕  是完整的使用切割后的图片进行平铺*/                    border-image-repeat: round; }li:nth-child(2){/*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/                                         border-image: url("images/border.jpg") 167/20px repeat;}li:nth-child(3){/*默认的平铺方式*/border-image: url("images/border.jpg") 167/20px stretch;}</style>
</head>
<body>
<ul><li></li><li></li><li></li>
</ul>
</body>
</html>

Echarts-介绍

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

04-Echarts-体验

官方教程：[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)

自己步骤：

下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
引入echarts dist/echarts.min.js
准备一个具备大小的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'));

指定配置项和数据(option)

var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]
};

将配置项设置给echarts实例对象

myChart.setOption(option);

Echarts-基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

演示代码：

var option = {color: ['pink', 'blue', 'green', 'skyblue', 'red'],title: {text: '我的折线图'},tooltip: {trigger: 'axis'},legend: {data: ['直播营销', '联盟广告', '视频广告', '直接访问']},grid: {left: '3%',right: '3%',bottom: '3%',// 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签// 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',// 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。boundaryGap: false,data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']},yAxis: {type: 'value'},series: [{name: '直播营销',// 图表类型是线形图type: 'line',data: [120, 132, 101, 134, 90, 230, 210]},{name: '联盟广告',type: 'line',data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频广告',type: 'line',data: [150, 232, 201, 154, 190, 330, 410]},{name: '直接访问',type: 'line',data: [320, 332, 301, 334, 390, 330, 320]}]};

REM适配

设计稿是1920px
PC端适配：宽度在 1024~1920之间页面元素宽高自适应
1. flexible.js 把屏幕分为 24 等份
2. cssrem 插件的基准值是 80px
  
  插件-配置按钮—配置扩展设置–Root Font Size 里面设置。
  
  但是别忘记重启vscode软件保证生效
3. 要把屏幕宽度约束在1024~1920之间有适配，实现代码：

// 实现rem适配
@media screen and (max-width: 1024px) {html {font-size: 42.66px !important;}}@media screen and (min-width: 1920px) {html {font-size: 80px !important;}}

总结：echarts库是专用于可视化的插件，样式丰富，但功能较为单一。

前端学习之JavaScript echarts库的使用相关推荐

零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...
前端学习记录 —— JavaScript（一）
前端学习记录 -- JavaScript(一) 前言一.初识 JavaScript JavaScript 的特点 JavaScript的作用编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...
前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
前端学习之JavaScript学习-2021-09-2029
JavaScript学习 1.什么是JavaScript 1.1.概述 Javascript是一门世界上最流行的脚本语言一个合格的后端人员,必须要精通JavaScript 1.2.历史 JavaSc ...
重学前端-学习笔记-JavaScript对象
说明重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记.如有侵权,请联系我,谢谢. javascript对象特征对象具有唯一标识性:完全相同的两个对象,也不是同一个对 ...
前端学习－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。
介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性. 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点. Leaflet设计的非常简单易懂, 同时具有 ...
前端学习之 JavaScript 之 JSON
一．JSON的简介 1.什么是JSON JSON 英文全称 JavaScript Object Notation JSON 是一种轻量级的数据交换格式. JSON是独立的语言 * JSON 易于理解. ...
前端学习之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
Web前端学习笔记——JavaScript之数组、函数、作用域
数组为什么要学习数组之前学习的数据类型,只能存储一个值(比如:Number/String.我们想存储班级中所有学生的姓名,此时该如何存储? 数组的概念所谓数组,就是将多个元素(通常是同一类型)按 ...

前端学习之JavaScript echarts库的使用

边框图片

Echarts-介绍

04-Echarts-体验

初始化echarts实例对象

Echarts-基础配置

REM适配

前端学习之JavaScript echarts库的使用相关推荐

最新文章

热门文章