2023-01-03 Echarts学习笔记(二) 常见Option配置项介绍:xAxis,yAxis,series,grid,toolbox,legend,tooltip,title,color等

Echarts的基础配置

1.color:调色盘颜色列表
2.title:标题组件
- 2.1.设置图表的标题
- 2.2.同时主标题和副标题(了解)
3.tooltip:提示框组件
- 触发类型
4.legend:图例组件
5.toolbox:工具箱组件
- 5.1.saveAsImage:可以另存为图片等功能,即下载按钮
- 5.2.dataZoom:区域缩放
- 5.3.dataView:数据视图,转化为本文格式
- 5.4.restore:还原
- 5.5.综上,以上都是feature的方法
6.grid:网格配置
7.xAxis:直角坐标系grid中的x轴(常用)
- 7.1.type:坐标轴类型
- 7.2.boundaryGap:是否让我们的线条和坐标轴有缝隙
- 7.3. data:x轴上的数据名称
8.yAxis:同上(常用)
9.series:系列列表(常用)
- 9.1.name:系列名称
- 9.2.data:数据数组
- 9.3.type:图表类型
- 9.4.stack:数据堆叠

1.color:调色盘颜色列表

color设置线条的颜色,它是一个数组

color:['pink','red','green','blue'];

2.title:标题组件

title设置图表的标题,包含主标题和副标题

2.1.设置图表的标题

title{text:"折线图堆叠"
}

2.2.同时主标题和副标题(了解)

title: {//显示策略，默认值true,可选为：true（显示） | false（隐藏）show: true,//主标题文本，'\n'指定换行      text: "主标题",//主标题文本超链接,默认值truelink: 'http://www.baidu.com',//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）target: "self",//副标题文本，'\n'指定换行subtext: '副标题',//副标题文本超链接sublink: '',//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）subtarget: null,//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）x: 'center',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）y: 'bottom',//标题背景颜色，默认'rgba(0,0,0,0)'透明backgroundColor: 'red',//标题边框线宽，单位px，默认为0（无边框）borderWidth: 5,//标题边框颜色,默认'#ccc'borderColor: '#ccffee',//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距padding: 5,//主副标题纵向间隔，单位px，默认为10itemGap: 10,textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}fontFamily: 'Arial, Verdana, sans...',fontSize: 12,fontStyle: 'normal',fontWeight: 'normal', //},subtextStyle: {color: "#a1b2c3", // 副标题文字的颜色。fontStyle: "normal", // 副标题文字字体的风格。 'normal'  'italic'  'oblique'fontWeight: "bold", // 副标题文字字体的粗细。 'normal' 'bold'  'bolder'  'lighter' 500|600。fontSize: 18, // 字体大小lineHeight: "130", // 行高textBorderColor: "red", // 文字本身的描边颜色。textBorderWidth: 5, // 文字本身的描边宽度。textShadowColor: "transparent", // 文字本身的阴影颜色。textShadowBlur: 0, // 文字本身的阴影长度。textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。textShadowOffsetY: 0, //  文字本身的阴影 Y 偏移。},
}

3.tooltip:提示框组件

tooltip用于设置图表的提示框组件,用于配置鼠标滑过或者点击图表时的显示框

tooltip:{trigger:"axis"
}

触发类型

trigger属性的属性值:

axis:坐标轴触发,主要在柱状图,折线图等等会使用到类目轴的图表中使用
item:数据项图形触发,主要是在散点图,饼图等没有使用到类目轴的图表中使用
none:什么都不触发

4.legend:图例组件

legend{data:["邮件","联盟","视频","直接访问","搜索"]
}

5.toolbox:工具箱组件

5.1.saveAsImage:可以另存为图片等功能,即下载按钮

toolbox:{feature:{saveAsImage:{}}
}

5.2.dataZoom:区域缩放

dataZoom:{yAxisIndex:"none"
}

5.3.dataView:数据视图,转化为本文格式

dataView:{readOnly:false;
}

5.4.restore:还原

restore:{}

5.5.综上,以上都是feature的方法

toolbox{show:true,feature:{dataZoom:{yAxisIndex:"none"},dataView:{readOnly:false},magicType:{type:["line","bar"]},restore:{},saveAsImage:{}}
}

6.grid:网格配置

grid可以控制线形图,柱状图,图表大小

grid:{left:"3%",right:"4%",bottom:"3%",containLabel:true
}

其中,left和right都是相当于当前的DOM容器左侧或右侧来计算的

7.xAxis:直角坐标系grid中的x轴(常用)

xAxis:{type:"category",boundaryGap:false,data:["周一","周二","...","周日"]
}

其中,

7.1.type:坐标轴类型

category:类目轴–适用于离散的类目数组,为该类型时类目数据可自动从
series.data或dataset.source中取,或者通过xAxis.data来设置类目数据
value:数值轴–适用于连续数据
time:时间轴–适用于连续的时序数据,与数值轴相比,时间轴带有事件的格式化,
在刻度计算上也有所不同,如会根据跨度的范围来决定用月,周,日,还是小时的范围的刻度
log:对数轴–适用于对数数据

7.2.boundaryGap:是否让我们的线条和坐标轴有缝隙

7.3. data:x轴上的数据名称

8.yAxis:同上(常用)

9.series:系列列表(常用)

series是个数组,每个数组元素是一个对象
每个series通过type决定自己的图表类型,即图表数据指定什么类型的图表,可以多个图表重叠
(series里有name值,则legend里面的data可以删掉)

// 系列图表配置 它决定着显示那种类型的图表
series: [{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]},{name: '联盟广告',type: 'line',stack: '总量',data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频广告',type: 'line',stack: '总量',data: [150, 232, 201, 154, 190, 330, 410]},{name: '直接访问',type: 'line',stack: '总量',data: [320, 332, 301, 334, 390, 330, 320]},{name: '搜索引擎',type: 'line',stack: '总量',data: [820, 932, 901, 934, 1290, 1330, 1320]}]

9.1.name:系列名称

用于tooltip的显示，series里面有了 name值则 legend里面的data可以删掉

9.2.data:数据数组

里面存放的是数组是数据

9.3.type:图表类型

line:折线图 - - 是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上
bar:柱状图(也叫条形图) - - 是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型
pie:饼图 - - 主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例

9.4.stack:数据堆叠

同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加
(一般不让它堆叠允许重复)

2023-01-03 Echarts学习笔记(二) 常见Option配置项介绍:xAxis,yAxis,series,grid,toolbox,legend,tooltip,title,color等相关推荐

TCP/IP协议学习笔记(二)TCP与UDP介绍
TCP/IP中有两个具有代表性的传输层协议,它们分别是TCP和UDP.TCP提供可靠的通信传输,而UDP则常被用于让广播和细节控制交给应用的通信传输. IP首部中有一个协议字段,用来标识网络层(IP) ...
Polyworks脚本开发学习笔记(二十)-补充几个常见操作指令的使用
Polyworks脚本开发学习笔记(二十)-补充几个常见操作指令的使用大概要写到结尾了,最后几篇就将手册的各常用命令再看一遍,组合一下,并列举出常见的一些有用的操作. DATA_COLOR_MAP数 ...
echarts学习笔记1
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...
Netty学习笔记二网络编程
Netty学习笔记二二. 网络编程 1. 阻塞模式阻塞主要表现为: 连接时阻塞读取数据时阻塞缺点: 阻塞单线程在没有连接时会阻塞等待连接的到达,连接到了以后,要进行读取数据,如果没有数据,还要 ...
[转载]dorado学习笔记(二)
原文地址:dorado学习笔记(二)作者:傻掛 ·isFirst, isLast在什么情况下使用?在遍历dataset的时候会用到 ·dorado执行的顺序,首先由jsp发送请求,调用相关的ViewM ...
PyTorch学习笔记(二)——回归
PyTorch学习笔记(二)--回归本文主要是用PyTorch来实现一个简单的回归任务. 编辑器:spyder 1.引入相应的包及生成伪数据 import torch import torch.nn ...
MATLAB学习笔记——二维和三维绘图
MATLAB学习笔记--二维和三维绘图近期练习matlab的二维和三维绘图,整理一下,以防忘记. 文章目录 MATLAB学习笔记--二维和三维绘图一.二维绘图 1.plot命令 2.fplot 命 ...
深度强化学习笔记(二)——Q-learning学习与二维寻路demo实现
深度强化学习笔记(二)--Q-learning学习与二维寻路demo实现文章目录深度强化学习笔记(二)--Q-learning学习与二维寻路demo实现前言理论什么是Q-Learning 算 ...
计算鬼成像学习笔记二：二阶关联函数探究
计算鬼成像学习笔记二:二阶关联函数探究 1 一阶关联函数 2 二阶关联函数 3 二阶关联如何重构物体 4 差分鬼成像关联公式 5 归一化鬼成像关联公式 1 一阶关联函数一阶关联函数是光场的电场强度之 ...