echarts常用配置属性大全
2024-07-02 19:39:31
title
tooltip: {show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）text: '主标题',//主标题文本，'\n'指定换行link:'',//主标题文本超链接,默认值truetarget: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）subtext: '副标题',//副标题文本，'\n'指定换行sublink: '',//副标题文本超链接subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）x:'center'//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'centerbackgroundColor: 'rgba(0,0,0,0)',//标题背景颜色(三原色加透明度)，默认'rgba(0,0,0,0)'透明borderColor: '#ccc',//标题边框颜色,默认'#ccc'borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框）padding: 5,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距itemGap: 10,//主副标题纵向间隔，单位px，默认为10textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}fontFamily: 'Arial, Verdana, sans...',fontSize: 12,fontStyle: 'normal',fontWeight: 'normal',},subtextStyle: {//副标题文本样式{"color": "#aaa"}fontFamily: 'Arial, Verdana, sans...',fontSize: 12,fontStyle: 'normal',fontWeight: 'normal',},zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
},
legend
legend: {show: true, //是否显示type: "plain", // 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例zlevel: 1, // 所有图形的 zlevel 值。icon: "circle",top: "5%", // bottom:"20%" // 组件离容器的距离right: "5%", //left:"10%" // // 组件离容器的距离width: "auto", // 图例组件的宽度height: "auto", // 图例组件的高度orient: "horizontal", // 图例列表的布局朝向。 'horizontal' 'vertical'align: "auto", // 图例标记和文本的对齐padding: 5, // 图例内边距itemWidth: 6, // 图例标记的图形宽度。itemGap: 20, // 图例每项之间的间隔。itemHeight: 14, // 图例标记的图形高度。symbolKeepAspect: true, // 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。formatter: function (name) {return '{a|text}{a| }{b|' + name + '}'},selectedMode: true, // 图例选择的模式，inactiveColor: "#ccc", // 图例关闭时的颜色。textStyle: {color: "#556677", // 文字的颜色。fontStyle: "normal", // 文字字体的风格。fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...fontFamily: "sans-serif", // 文字的字体系列。fontSize: 12, // 文字的字体大小。lineHeight: 20, // 行高。backgroundColor: "transparent", // 文字块背景色。borderColor: "transparent", // 文字块边框颜色。borderWidth: 0, // 文字块边框宽度。borderRadius: 0, // 文字块的圆角。padding: 0, // 文字块的内边距shadowColor: "transparent", // 文字块的背景阴影颜色shadowBlur: 0, // 文字块的背景阴影长度。shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。// width: 50, // 文字块的宽度。 默认// height: 40, // 文字块的高度 默认textBorderColor: "transparent", // 文字本身的描边颜色。textBorderWidth: 0, // 文字本身的描边宽度。textShadowColor: "transparent", // 文字本身的阴影颜色。textShadowBlur: 0, // 文字本身的阴影长度。textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。rich: {a: {color: "red",lineHeight: 10,},b: {color: "#fff",lineHeight: 10,},}, // 自定富文本样式},
},
grid
官网
grid:{id:'id' ,// 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。show: false ,// 是否显示直角坐标系网格。zlevel: 0 ,// 所有图形的 zlevel 值。z: 2 ,// 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。left: '10%' ,// grid 组件离容器左侧的距离。top: 60 ,// grid 组件离容器上侧的距离。right: '10%' ,// grid 组件离容器右侧的距离。bottom: 60 ,// grid 组件离容器下侧的距离。width: 'auto' ,// grid 组件的宽度。默认自适应。height: 'auto' ,// grid 组件的高度。默认自适应。containLabel: false ,// 详情请去看官网backgroundColor: 'transparent' ,// 网格背景色，默认透明。borderColor: '#ccc' ,// 网格的边框颜色。支持的颜色格式同 backgroundColor。borderWidth: 1 ,// 网格的边框线宽。shadowBlur: 10 ,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。shadowColor:'#ccc' ,// 阴影颜色。支持的格式同color。shadowOffsetX: 0 ,// 阴影水平方向上的偏移距离。shadowOffsetY: 0 ,// 阴影垂直方向上的偏移距离。tooltip: {} ,// 组件
}
title
// An highlighted block
var foo = 'bar';
title
// An highlighted block
var foo = 'bar';
title
// An highlighted block
var foo = 'bar';
title
// An highlighted block
var foo = 'bar';
title
// An highlighted block
var foo = 'bar';
title
// An highlighted block
var foo = 'bar';
title
// An highlighted block
var foo = 'bar';
太多了累死我了 抽空再写吧
echarts常用配置属性大全相关推荐
- Echarts图的属性大全，学会绝对可以把Echarts吃的透透的
Echarts图的属性大全,学会绝对可以把Echarts吃的透透的! 文章目录 Echarts图的属性大全,学会绝对可以把Echarts吃的透透的! backgroundColor背景色: toolt ...
- WdatePicker常用配置属性
一.WdatePicker常用配置属性(可以在WdatePicker方法是配置) 属性 类型 默认值 说明 el Element 或 String null 指定一个控件或控件的ID,必须具有valu ...
- echarts使用中过程中的常用配置属性常见问题及绘制地图
echarts使用中的常见的问题 1.给折线图画一条水准线 2.图表自适应容器 3.x轴文字过长显示不全的问题 4.echarts的点击事件 5.数据中如果有空值时 如何实现连接空值或者显示断开 6. ...
- H3C交换机、路由器常用配置命令大全
H3C交换机配置命令大全 1.system-view 进入系统视图模式 2.sysname 为设备命名 3.display current-configuration 当前配置情况 4. langua ...
- 华三路由交换配置命令_H3C交换机、路由器常用配置命令大全
H3C 交换机配置命令大全 1 . system-view 进入系统视图模式 2 . sysname 为设备命名 3 . display current-configuration 当前配置情况 4 ...
- vue echarts常用配置: label 换行、词云图、数据差距过大
一.使用柱状图时,因为数据差距过大,导致图表不好看 修改: a. 将y轴改为对数轴, b. 数组中值不能为0,需要将值修改为undefined, c. tooltip中将数值为undefined重置为 ...
- echarts 之饼形图配置属性
目录 echarts 之配置属性 饼形图 echarts 之配置属性 南丁格尔图 roseType: "radius", 双层饼形图 饼形图 配置属性,也就是再 option 里面 ...
- ECharts常用配置项
ECharts常用配置 setOption()绘制图表 使用 echarts 实例的 setOption() 可以设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOpti ...
- springboot核心配置文件 application.properties 或者 yml 常用配置详解
properties 文件: properties文件 是以KV格式存在的, 字符集 默认为 iso-8859-1 如何需要输入中文 需更改字符集utf-8 备注以 # 开头. 常 ...
最新文章
- 关于 $'\r': 未找到命令的解决(bad interpreter )
- supmap java_SuperMap iServerJava安装与出图必读之Windows操作系统篇
- 198道K8sDocker面试真题大汇总，全网最全八股！
- python的字符编码叙述_Python: 熟悉又陌生的字符编码
- 贵州农信凭证打印小程序_我的医保凭证小程序入口
- php 目录文件大小,利用php怎么对目录文件的大小进行统计
- Python之数据分析（numpy中的多项式拟合）
- Nodejs内存控制详解（上篇）
- C++ map()和pair()用法
- 关于VMware无法输入许可证密钥的方法
- Android实现NCM转MP3格式
- Java实现自动映射原生JDBC查询出的数据库字段
- 环境试验之模拟运输试验
- linux wav 转mp3,linux下wav转换为mp3
- Word如何转换成PDF格式
- latex 小白 algorithmic already defined的原因
- 拆分一个链表为偶数链表和奇数链表
- 查看 Linux 进程 巧用ps|grep命令
- 雷军创业十年演讲全文！创业艰辛、乘风破浪、一往无前
- MTK Secure Boot 2.1详细配置方案-终极版