首页 > 其他分享 >echarts常用属性记录

echarts常用属性记录

时间:2024-04-16 14:57:19浏览次数:108  
标签:center 记录 color 坐标轴 刻度 left true echarts 属性

title:标题相关

show:true, //true(显示) | false(隐藏)
text: '主标题', subtext: '副标题', x:'center' //水平位置 'center' | 'left' | 'right' | {number}(x坐标,单位px)
y: 'top', //垂直位置'top' | 'bottom' | 'center' | {number}(y坐标,单位px) textAlign: null ,//水平对齐方式,默认自动, left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色
borderColor: '#ccc', //标题边框颜色
borderWidth: 0, //标题边框线宽
padding: 5, //标题内边距
itemGap: 10, //主副标题纵向间隔  

legand:图例相关

show:是否显示 orient: 'vertical'‘horizontal ’ x:'center' //水平位置,'center' | 'left' | 'right' | {number}(x坐标,单位px)
y: 'top', //垂直位置,'top' | 'bottom' | 'center' | {number}(y坐标,单位px) itemGap: 40 //图例之间的距离 name: '搜索引擎', icon: 'circle', textStyle: { color: 'red', fontSize: '20px', fontWeight: 700 } //图例文字样式  

tooltip:提示相关

trigger: 'item'/'axis'  触发方式 triggerOn: 'click'  触发条件 formatter: `{a}<br>{b}月: {c}` // 格式化 {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比) formatter: function(arg) { console.log(arg) return 'xxx' }  //回调函数格式  

xAxis:x轴相关

show: true, //是否显示
gridIndex: 0, //轴所在grid索引,默认位于第一个grid
alignTicks: false, //在多个轴为数值轴的时候,可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效
position: 'top', //轴的位置(top/bottom)
offset: 0, //轴相对于默认位置的偏移,在相同的position上有多个轴时有用
type: 'category', //坐标轴类型,值category/value,与y轴呼应,若x轴配置category则y轴配置value
name: '', //坐标轴名称
nameLocation: 'end', //坐标轴名称显示位置,可选值start/middle[或者center]/end
nameGap: 15, //坐标轴名称与轴线间距离
nameRotate: 10, //坐标轴名字旋转,角度值
inverse: false, //是否是反向坐标轴
boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略,也可以使用布尔值,true居中
min: '', //刻度最小值
max: '', //刻度最大值
scale: false, //只在数值轴中type: 'value'有效, 设置min和max后无效。是否是脱离 0 值比例。设置成true后坐标刻度不会强制包含零刻度。在双数值轴的散点图中较有用
splitNumber: 5, //坐标轴的分割段数(预估值)
minInterval: 0, //自动计算坐标轴最小间隔,例:设置成1,刻度没有小数
maxInterval: '', //自动计算坐标轴最大间隔
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头,两个值,none表示没有箭头,arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小,数值一表示宽度,数值二表示高度
lineStyle: {
color: '#333', // 坐标轴线线的颜色
width: '5', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型(solid实线类型;dashed虚线类型;dotted点状类型)
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内,默认朝外
length: 5, //坐标轴刻度的长度
lineStyle: {
color: '#FFF', //刻度线的颜色
width: 10, //坐标轴刻度线宽
type: 'solid', //坐标轴线线的类型(solid实线类型;dashed虚线类型;dotted点状类型)
},
},
axisLabel: {
show: true, //是否显示刻度标签
interval: '0', //坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有
inside: true, //刻度标签是否朝内,默认朝外
rotate: 90, //刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从-90度到90度
margin: 10, //刻度标签与轴线之间的距离
// formatter 刻度标签的内容格式器,支持字符串模板和回调函数两种形式
color: '#FFF', // 刻度标签文字的颜色
fontStyle: 'normal', // 字体的风格(normal无样式;italic斜体;oblique倾斜字体)
fontWeight: 'normal', // 字体的粗细(normal无样式;bold加粗;bolder加粗再加粗;lighter变细;数字定义粗细也可以取值范围100至700)
fontSize: '20', //文字字体大小
align: 'left', // 文字水平对齐方式,默认自动(left/center/right)
verticalAlign: 'left', // 文字垂直对齐方式,默认自动(top/middle/bottom)
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色,例:#123234, red, rgba(0,23,11,0.3)
},
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有
color: ['#ccc'], //color分隔线颜色,可设置单个颜色,也可设置颜色数组,分隔线会按数组中颜色顺序依次循环设置颜色
width: 3, // 分隔线线宽
type: 'solid', // 坐标轴线线的类型(solid实线类型;dashed虚线类型;dotted点状类型)
},
splitArea: {
show: true, // 是否显示分隔区域
interval: '0', // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], //color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
opacity: 1, // 图形透明度。支持从0到1的数字,为0时不绘制该图形
},
},
data: {
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格(normal无样式;italic斜体;oblique倾斜字体)
fontWeight: 'normal', //字体的粗细(normal无样式;bold加粗;bolder加粗再加粗;lighter变细;数字定义粗细也可以取值范围100至700)
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式,默认自动(left/center/right)
verticalAlign: 'left', // 文字垂直对齐方式,默认自动(top/middle/bottom)
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色,例:#123234, red, rgba(0,23,11,0.3)
}
}

 

yAxis:y轴相关

 

series:数据相关

 

标签:center,记录,color,坐标轴,刻度,left,true,echarts,属性
From: https://www.cnblogs.com/DL6526/p/18137650

相关文章

  • Python- pyecharts 制作示例可视化图表
    1、开发可视化图表使用的技术栈:Echarts框架的Python包——pyecharts2、官方网站:pyecharts-APythonEchartsPlottingLibrarybuiltwithlove.3、官方画廊:中文简介-Document(pyecharts.org)安装pyecharts包:pipinstallpyecharts一、构建各类图表所创建的对象......
  • 新手大白话 [LitCTF 2023]刷题记录1
    我Flag呢直接看源码PHP是世界上最好的语言!进入页面查看源码发现为RCE漏洞。直接system('cat/flag');点击Runcode导弹迷踪js源码问题,f12点开调试器查看game.js代码点击查看代码varMessages={START:{title:getLevelString,text:......
  • 信管 英文题目记录
    2024-4-16Whyis---(programming)---fun?编程为什么有趣?Whatkindofhappinessdoitspractitionersexpectinreturn?作为回报,其从业者期望得到什么样的快乐?Thefirstisthesheerjoyofbuildingthings.首先是一种创建事物的纯粹快乐。Justaschildrenenjoypla......
  • CodeForces Round #939(Div. 2) 补题记录(A~D)
    ABCD首先考虑:对于\(a\)数组的任意一段区间\([l,r]\),都总有一种办法可以让这些数字全部变成\(0\)。构造:若\([l,r]\)一段区间全部为\(0\),则已经达成条件。否则,将所有\(x\in[l,r]\cap\textbf{N}_+\)的\(a_x\neq0\),都让\([x,x]\)这一段区间取\(\text{mex}\)。......
  • 使用ollama本地部署gemma记录
    1.官网https://ollama.com/安装ollama2.先配置一下环境变量不然下载的东西会默认丢在C盘里3.cmd执行ollamarungemma:2b(使用后推荐直接下7b,2b有点不够用 后续解决:打开debug,读一下server.log,自己排错,我这里是GPU的问题,最后把GPU选项关闭就好了......
  • 附图标记录入小工具
    附图标记录入小工具这是一个使用ahk2.0脚本写的从csv文件选择零件名与附图标记的小工具。制作这个小工具的本意主要是方便撰写专利申请文件时正确地插入附图标记。这是其github仓库,您可以从该仓库下载程序文件。使用说明运行与退出只需要在进行文字录入时,打开GenTag.exe,......
  • antd 的ProTable 的列加上ellipsis属性后,react-resizable会无法拖动列
    1、我尝试在列中加入ellipsis为true后,让内容超出后,用省略号表示。{title:displayName,dataIndex:propName,key:newPropName,width:widthIndex//,ellipsis:true}但是这引发了另外的问题。react-resizable配置的列可拖动无效了。额外的情况:obj.fixed='......
  • pyecharts实现点击省跳转省地图
    诶呀我去太感谢了终于找到实现点击地图省份实现跳转了。参考:利用pyecharts实现中国省与市之间的跳转_pyecharts点击地图跳转-CSDN博客 需要注意的问题:1.如果想在全国地图显示数据,data数据中要用如:北京市、广东省、香港特别行政区、内蒙古自治区,这种带有后缀的。(可能有些不需......
  • 向量数据库之Lancedb学习记录
    简介Lancedb是一个用于人工智能的开源矢量数据库,旨在存储、管理、查询和检索大规模多模式数据的嵌入。Lancedb的核心是用Rust编写的,并构建在Lance之上,专为高性能ML工作负载和快速随机访问而设计。快速开始安装pipinstalllancedb目前0.6.8需要pyarrow-12.0.0及以上,亲测15......
  • Java使用javacv处理视频文件过程记录
    最近接到一个需求是将.mp4/.m4v文件体积进行压缩,我使用javacv中的FFmpegFrameGrabber、FFmpegFrameFilter、FFmpegFrameRecorder简单的实现视频帧的抓取、过滤、录制与输出。性能暂未验证。文章对这次的过程进行记录。1.jdk的选择mcr.microsoft.com/java/jdk:8u222-zulu-cento......