- 博客(813)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 012_图例
1. 图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列, 通过点击对应数据列的标记, 可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。2. 图例布局2.1. 图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致, 可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。2.2. legend.type, 图例的类型。可选值: 'plain'普通图例, 缺省就是普通图例; 'scroll'可滚动翻页
2022-03-17 20:35:04
12722
1
原创 011_坐标轴
1. x轴和y轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据。2. 普通的二维数据坐标系都有x轴和y轴, 通常情况下, x轴显示在图表的底部, y轴显示在左侧, 一般配置如下:option = { xAxis: { // ... }, yAxis: { // ... }};3. x轴常用来标示数据的维度, 维度一般用来指数据的类别, 是观察数据的角度, 例如"销售时间"、"销售地点"、"产品名称"等。y轴常常用来
2022-03-17 12:42:32
1673
原创 010_数据集
1. 数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在series.data中设置数据, 但是从ECharts4支持数据集开始, 更推荐使用数据集来管理数据。因为这样, 数据可以被多个组件复用, 也方便进行"数据和其他配置"分离的配置风格。毕竟, 在运行时, 数据是最常改变的, 而其他配置大多并不会改变。2. 最简单数据集2.1. 代码<!DOCTYPE html><html> <head> <meta charset="
2022-03-16 17:52:22
1396
原创 008_直接的样式设置
1. 直接的样式设置是比较常用设置方式。纵观ECharts的option中, 很多地方可以设置itemStyle、lineStyle、areaStyle、label等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。2. 一般来说, ECharts的各个系列和组件, 都遵从这些命名习惯, 虽然不同图表和组件中, itemStyle、label等可能出现在不同的地方。3. 图形样式series-type.itemStyle3.1. series-type.ite
2022-03-16 10:13:40
1511
原创 009_调色盘和高亮样式
1. color调色盘1.1. 调色盘, 可以在option中设置。它给定了一组颜色, 图例、系列会自动从其中选择颜色。可以设置全局的调色盘, 也可以设置系列自己专属的调色盘。option = { // 全局调色盘。 color: [ '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7
2022-03-16 09:45:24
599
原创 007_散点图
1. 散点图, 也是一种常见的图表类型。散点图由许多"点"组成, 有时, 这些点用来表示数据在坐标系中的位置(比如: 在笛卡尔坐标系下, 表示数据在x轴和y轴上的坐标; 在地图坐标系下, 表示数据在地图上的某个位置等); 有时, 这些点的大小、颜色等属性也可以映射到数据值, 用以表现高维数据。2. 最简单的散点图2.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> &
2022-03-15 18:14:44
2617
原创 005_折线图
1. 折线图主要用来展示数据项随着时间推移的趋势或变化。2. 最简单的折线图2.1. 我们通过xAxis将横坐标设为类目型, 并指定了对应的值; 将yAxis的类型设定为数值型。在series中, 我们将系列类型设为line, 并且通过data指定了折线图点的取值。这样, 就能得到一个最简单的折线图了。2.2. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <
2022-03-15 16:45:13
1337
原创 004_柱状图
1. 柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。2. 设置柱状图的方式, 是将series的type设为'bar'。3. 最简单的柱状图3.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>最简单的柱状图</title> <!-- 引入echarts.js --> <s
2022-03-15 16:12:38
923
原创 006_饼图
1. 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比, 它的数据格式比柱状图更简单, 只有一维的数值, 不需要给类目。因为不在直角坐标系上, 所以也不需要xAxis和yAxis。2. 例子2.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>ECharts饼图</title> <!-- 引入echarts.js
2022-03-15 09:23:54
547
原创 003_颜色主题
1. 最简单的更改全局样式的方式, 是直接采用颜色主题(theme)。2. ECharts5除了一贯的默认主题外, 还内置了'dark'主题。3. dark主题例子3.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>dark主题</title> <!-- 引入echarts.js --> <scri
2022-03-15 09:20:12
332
原创 002_图表容器及大小
1. 在Html中定义有宽度和高度的父容器(推荐)1.1. 通常来说, 需要在Html中先定义一个<div>节点, 并且通过CSS使得该节点具有宽度和高度。初始化的时候, 传入该节点, 图表的大小默认即为该节点的大小, 除非声明了opts.width或opts.height将其覆盖。<div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript"
2022-03-14 19:42:58
611
原创 001_ECharts入门
1. ECharts介绍1.1. ECharts是一个使用JavaScript实现的开源可视化库, 涵盖各行业图表, 满足各种需求。1.2. ECharts遵循Apache-2.0开源协议, 免费商用。1.3. ECharts兼容当前绝大部分浏览器(IE8/9/10/11, Chrome, Firefox, Safari等)及兼容多种设备, 可随时随地任性展示。1.4. ECharts官网链接:https://echarts.apache.org/zh/index.html。2. .
2022-03-14 16:47:43
1159
原创 057_Skeleton骨架屏
1. Skeleton骨架屏1.1. 在需要等待加载内容的位置设置一个骨架屏, 某些场景下比Loading的视觉效果更好。1.2. Skeleton Attributes 参数 说明 类型 可选值 默认值 animated 是否使用动画 boolean true / false false
2022-03-06 00:44:52
3000
1
原创 056_Avatar头像
1. Avatar头像1.1. 用图标、图片或者字符的形式展示用户或事物信息。1.2. Attributes 参数 说明 类型 可选值 默认值 icon 设置头像的图标类型, 参考Icon组件 string 无 无 size 设置头像的大小
2022-03-05 23:57:38
1248
原创 055_Descriptions描述列表
1. Descriptions描述列表1.1. 列表形式展示多个字段。1.2. Descriptions Attributes 参数 说明 类型 可选值 默认值 border 是否带有边框 boolean 无 false column 一行Descript
2022-03-05 23:51:35
7444
5
原创 054_Empty空状态
1. Empty空状态1.1. 空状态时的占位提示。1.2. Empty Attributes 参数 说明 类型 可选值 默认值 image 图片地址 string 无 无 image-size 图片大小(宽度) number
2022-03-05 12:46:22
1328
原创 053_Result结果
1. Result结果1.1. Result结果用于对用户的操作结果或者异常状态做反馈。1.2. Result Attributes 参数 说明 类型 可选值 默认值 title 标题 string 无 无 sub-title 二级标题
2022-03-05 12:39:51
753
原创 052_Drawer抽屉
1. Drawer抽屉1.1. 有些时候, Dialog组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer拥有和Dialog几乎相同的API, 在UI上带来不一样的体验。1.2. Drawer Attributes 参数 说明 类型 可选值 默认值 append-to-body Drawer自身是否插入至body元素上。嵌
2022-03-04 20:57:20
1644
原创 051_InfiniteScroll无限滚动
1. InfiniteScroll无限滚动1.1. InfiniteScroll无限滚动滚动至底部时, 加载更多数据。1.2. Attributes 参数 说明 类型 默认值 infinite-scroll-disabled 是否禁用 boolean false infinite-scroll-delay
2022-03-04 15:34:17
1704
原创 049_Image图片
1. Image图片1.1. Image图片容器, 在保留原生img的特性下, 支持懒加载, 自定义占位、加载失败等。1.2. Attributes 参数 说明 类型 可选值 默认值 src 图片源, 同原生 string 无 无 fit 确定图片如何适应
2022-03-04 14:53:03
867
原创 050_Backtop回到顶部
1. Backtop回到顶部1.1. Backtop返回页面顶部的操作按钮。1.2. Attributes 参数 说明 类型 可选值 默认值 target 触发滚动的对象 string 无 无 visibility-height 滚动高度达到此参数值才出现
2022-03-04 13:02:58
670
原创 048_Calendar日历
1. Calendar日历1.1. Calendar日历显示日期。1.2. Attributes 参数 说明 类型 可选值 默认值 value / v-model 绑定值 Date/string/number 无 无 range 时间范围, 包括开始时间与
2022-03-03 22:30:10
717
原创 047_Divider分割线
1. Divider分割线1.1. Divider分割线区隔内容的分割线。1.2. Divider Attributes 参数 说明 类型 可选值 默认值 direction 设置分割线方向 string horizontal / vertical horizontal con
2022-03-03 18:14:43
744
原创 046_Timeline时间线
1. Timeline时间线1.1. Timeline时间线可视化地呈现时间流信息。1.2. Timeline Attributes 参数 说明 类型 可选值 默认值 reverse 指定节点排序方向, 默认为正序 boolean 无 false 1.3. Timeline-item
2022-03-03 16:44:53
3215
原创 045_Collapse折叠面板
1. Collapse折叠面板1.1. Collapse折叠面板通过折叠面板收纳内容区域。1.2. Collapse Attributes 参数 说明 类型 可选值 默认值 value / v-model 当前激活的面板(如果是手风琴模式, 绑定值类型需要为string, 否则为array) string / array
2022-03-03 15:52:49
1475
原创 044_Carousel走马灯
1. Carousel走马灯1.1. Carousel走马灯在有限空间内, 循环播放同一类型的图片、文字等内容。1.2. Carousel Attributes 参数 说明 类型 可选值 默认值 height 走马灯的高度 string 无 无 initial-index
2022-03-03 13:07:02
1955
原创 043_Card卡片
1. Card卡片1.1. Card卡片将信息聚合在卡片容器中展示。1.2. Attributes 参数 说明 类型 可选值 默认值 header 设置header, 也可以通过slot#header传入DOM string 无 无 body-style
2022-03-03 12:02:25
384
原创 042_Popconfirm气泡确认框
1. Popconfirm气泡确认框1.1. 点击元素, 弹出气泡确认框。Popconfirm的属性与Popover很类似, 因此对于重复属性, 请参考Popover的文档。1.2. Attributes 参数 说明 类型 可选值 默认值 title 标题 String 无 无
2022-03-02 23:25:29
2520
原创 041_Popover弹出框
1. Popover弹出框1.1. Popover的属性与Tooltip很类似, 它们都是基于Vue-popper开发的, 因此对于重复属性, 请参考Tooltip的文档。1.2. Attributes 参数 说明 类型 可选值 默认值 trigger 触发方式 String click/focus/hover/man
2022-03-02 22:59:31
1196
原创 040_Tooltip文字提示
1. Tooltip文字提示1.1. Tooltip文字提示常用于展示鼠标hover时的提示信息。1.2. Attributes 参数 说明 类型 可选值 默认值 effect 默认提供的主题 String dark/light dark content
2022-03-02 18:21:44
1066
原创 038_Steps步骤条
1. Steps步骤条1.1. Steps步骤条引导用户按照流程完成任务的分步导航条, 可根据实际应用场景设定步骤, 步骤不得少于2步。1.2. Steps Attributes 参数 说明 类型 可选值 默认值 space 每个step的间距, 不填写将自适应间距。支持百分比。 number / string 无
2022-03-02 17:08:45
2498
原创 039_Dialog对话框
1. Dialog对话框1.1. Dialog对话框在保留当前页面状态的情况下, 告知用户并承载相关操作。1.2. Attributes 参数 说明 类型 可选值 默认值 visible 是否显示Dialog, 支持.sync修饰符 boolean 无 false title
2022-03-02 17:03:31
1357
1
原创 037_Dropdown下拉菜单
1. Dropdown下拉菜单1.1. Dropdown下拉菜单将动作或菜单折叠到下拉菜单中。1.2. Dropdown Attributes 参数 说明 类型 可选值 默认值 type 菜单按钮类型, 同Button组件(只在split-button为true的情况下有效) string 无 无
2022-03-01 17:52:57
2902
原创 035_Breadcrumb面包屑
1. Breadcrumb面包屑1.1. Breadcrumb面包屑显示当前页面的路径, 快速返回之前的任意页面。1.2. Breadcrumb Attributes 参数 说明 类型 默认值 separator 分隔符 string 斜杠'/' separator-class 图标分隔符class
2022-03-01 16:43:08
1571
原创 034_Tabs标签页
1. Tabs标签页1.1. Tabs标签页分隔内容上有关联但属于不同类别的数据集合。1.2. Tabs Attributes 参数 说明 类型 可选值 默认值 value / v-model 绑定值, 选中选项卡的name string 无 第一个选项卡的name type
2022-03-01 12:28:58
1677
原创 036_PageHeader页头
1. PageHeader页头1.1. 如果页面的路径比较简单, 推荐使用页头组件而非面包屑组件。1.2. Attributes 参数 说明 类型 可选值 默认值 title 标题 string 无 返回 content 内容 str
2022-03-01 11:13:46
1391
原创 033_NavMenu导航菜单
1. NavMenu导航菜单1.1. NavMenu导航菜单为网站提供导航功能的菜单。1.2. Menu Attribute 参数 说明 类型 可选值 默认值 mode 模式 string horizontal / vertical vertical collapse
2022-03-01 10:55:36
2984
原创 032_Notification通知
1. Notification通知1.1. Notification通知, 悬浮出现在页面角落, 显示全局的通知提醒消息。1.2. Options 参数 说明 类型 可选值 默认值 title 标题 string 无 无 message 说明文字
2022-02-28 13:15:53
3659
1
原创 031_MessageBox弹框
1. MessageBox弹框1.1. MessageBox弹框, 模拟系统的消息提示框而实现的一套模态对话框组件, 用于消息提示、确认消息和提交内容。1.2. 从场景上说, MessageBox的作用是美化系统自带的alert、confirm和prompt, 因此适合展示较为简单的内容。如果需要弹出较为复杂的内容, 请使用Dialog。1.3. Options 参数 说明 类型 可选值 默认值
2022-02-28 11:13:30
4283
原创 030_Message消息提示
1. Message消息提示1.1. Message消息提示常用于主动操作后的反馈提示。与Notification的区别是后者更多用于系统级通知的被动提醒。1.2. Options 参数 说明 类型 可选值 默认值 message 消息文字 string / VNode 无 无
2022-02-27 22:56:48
2868
麻将消除源码
2016-09-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人