echarts详细配置title、yAxis/xAxis、tooltip、grid、legend

title: {show:"true", //是否显示标题，默认显示，可以不设置text:"echarts实例", //图表标题文本内容link:"http://echarts.baidu.com/", //点击标题内容要跳转的链接target:"blank",//跳转链接打开方式，blank是新窗口打开，self是自身窗口打开，跟a标签一样textStyle:{ //标题内容的样式color:'#e4393c',//京东红fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...fontFamily:"san-serif",//主题文字字体，默认微软雅黑fontSize:18//主题文字字体大小，默认为18px},textAlign:'left',//标题文本对齐方式textBaseline:"top",//默认垂直对齐方式subtext:"作者:xxx",//主标题的副标题文本内容sublink:"http://blog.csdn.net/zhaoxiang66",//点击副标题内容要跳转的链接subtarget:"blank",//同主标题，blank是新窗口打开，self是自身窗口打开subtextStyle:{//副标题内容的样式color:'green',//绿色fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...fontFamily:"san-serif",//主题文字字体，默认微软雅黑fontSize:12//主题文字字体大小，默认为12px},padding:5,//各个方向的内边距，默认是5，可以自行设置itemGap:10,//主标题和副标题之间的距离，可自行设置left:"center",//left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。top:"center",//left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。right:"auto",//right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。bottom:"auto",//bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。//left设置center标题会自动水平居中//top设置center标题会自动垂直居中backgroundColor:"#ccc",//标题背景色，默认透明，颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'borderColor:"red",//标题的边框颜色，颜色格式支持同backgroundColorborderWidth:2,//标题边框线宽，默认为0，可自行设置shadowBlur: 10,//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。shadowColor: "black",shadowOffsetX: 0,shadowOffsetY: 0,
}，yAxis: {show: true,    // 是否显示 y 轴position: 'top',    // y 轴的位置（'top'，'bottom'） type: 'category',    // 坐标轴类型nameLocation: 'end',     // 坐标轴名称显示位置nameGap: 15,     // 坐标轴名称与轴线之间的距离nameRotate: 10,    // 坐标轴名字旋转，角度值inverse: false,    // 是否是反向坐标轴nameTextStyle: {color: '#333',     // 坐标轴名称的颜色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)'},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'],    // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色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)'],    // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色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)'},},
},tooltip: {show: true,    // 是否显示提示框组件trigger: 'axis',    // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）axisPointer: {type: 'cross',    // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）snap: false,    // 坐标轴指示器是否自动吸附到点上。默认自动判断。label: {margin: 10,    // label 距离轴的距离color: '#FFF',     // 文字的颜色fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）fontSize: '20',    // 文字字体大小lineHeight: '50',    // 行高 padding = [5, 7, 5, 7],    // 内边距，单位px backgroundColor = 'auto',    // 文本标签的背景颜色},animation: true,     // 是否开启动画animationDuration: 1000,     // 初始动画时长animationDurationUpdate: 200,    // 数据更新动画的时长}showContent: true,     // 是否显示提示框浮层，默认显示alwaysShowContent: true,     // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏triggerOn: 'mousemove|click',    // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）confine: true,    // 是否将 tooltip 框限制在图表的区域内backgroundColor: 'rgba(50,50,50,0.7)',    // 提示框浮层的背景颜色padding: 5,    // 提示框浮层内边距，单位pxtextStyle: {color: '#FFF',     // 文字的颜色fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）fontSize: '20',    // 文字字体大小lineHeight: '50',    // 行高 },formatter: function (params) {var result = ''var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#F1E67F"></span>'    // 定义第一个数据前的圆点颜色var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#2BA8F1"></span>'    // 定义第二个数据前的圆点颜色result += params[0].axisValue + "</br>" + dotHtml + ' 数据名称 ' + params[0].data + "</br>" + dotHtml2 + ' 数据名称 ' + params[1].data;return result}
},grid: {// 间距是 根据x、y轴计算的；假如都是0，x、y轴的label汉字就隐藏掉了。left: 24, // 默认10%，给24就挺合适的。top: 24, // 默认60right: 24, // 默认10%bottom: 24, // 默认60width:'100%', // grid 组件的宽度。默认自适应。height:'100%',containLabel:true, // grid区域是否包含坐标轴的刻度标签。(如果true的时候，上下左右可以为0了)show:true, // 是否显示直角坐标系网格。是否显示grid，grid:show后，下面的一些参数生效backgroundColor:'#ccac62',borderColor:"#000",
},legend: {type: 'plain',  //图例类型，plain/scrollshow: true,  //是否显示x轴，布尔值zlevel: 2,  //控制图形的前后顺序z: 2,  //控制图形的前后顺序left: '',  //图例离容器左侧的距离，20/'20%'/'left'/'atuo'等top: '',right: '',bottom: '',width: 'auto',  //宽度，默认自适应height: 'auto',  //高度，默认自适应orient: 'horizontal',  //布局朝向，horizontal/verticalalign: 'auto',  //图例标记和文本的对齐，默认自动，auto/left/rightpadding: 5,  //内边距，默认各方向内边距为5pxitemGap: 10,  //图例间隔。横向时为水平间隔，纵向时为纵向间隔itemWidth: 25,  //图形宽度itemHeight: 14,  //图形高度itemStyle: {  color: '',  /颜色，参考下面的文章/borderColor: '',  //描边颜色，支持格式同color，不支持回调函数borderWidth: auto,  //描边宽度，可以为数字默认单位为pxborderType: solid,  //描边类型，值：solid默认/dashed/dotted/number/arrayborderDashOffset: 0,  //虚线偏移量，搭配borderType指定dashed、array实现灵活的虚线效果borderCap: round  //线段末端的绘制，butt方形/round圆形/square也是方形效果与butt不同},lineStyle: {color: '',  /颜色，参考下面的文章/width: auto,  //线宽type: solid,  //线的类型，solid默认/dashed/dotted/number/arraydashOffset: 0,  //虚线的偏移量，type指定dashed、array实现灵活的虚线效果cap: round,  //指定线段末端的绘制方式，参考上面的'borderCap'join: auto,  //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性，bevel默认/round/mitermiterLimit: 10,  //设置斜接面限制比例，只有当join为miter才有效，属性值：10默认值/number//阴影模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果shadowBlur: 10,shadowColor: '',  //阴影颜色，格式同colorshadowOffsetX: 0,  //阴影水平方向上偏移距离shadowOffsetY: 0,  //阴影垂直方向上的偏移距离opacity: auto  //透明度，支持从 0 到 1 的数字，为 0 时不绘制该图形},symbolRotate: inherit,  //旋转角度，类型为number|inherit。若为inherit，表示取系列symbolRotateformatter: 'Legend {name}',  //用来格式化图例文本，支持字符串模板和回调函数两种形式，name为图例名称selectedMode: true,  //图例选择模式，true/false/single/multipleinactiveColor: '#ccc',  //图例关闭时的颜色inactiveBorderColor: '#ccc',  //图例关闭时的描边颜色inactiveBorderWidth: 'auto',  //关闭时的描边粗细，属性值：auto取2/不存在描边取0/inherit始终取系列描边粗细selected: {'系列1': true,  // 选中'系列1''系列2': false  // 不选中'系列2'},textStyle: {color: #333,  //文字颜色fontStyle: '',  //字体风格fontWeight: '',  //字体粗细fontFamily: '',  //字体系列fontSize: 12,  //字体大小lineHeight: 16,  //行高backgroundColor: '',  //背景色，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'borderColor: '',  //边框颜色borderWidth: 0,  //边框宽度borderType: 'solid',  //边框描边类型，属性值：solid/dashed/dotted/number/arrayborderDashOffset: 0,  //虚线偏移量，可搭配borderType指定dashed/array实现灵活的虚线效果borderRadius: 0,  //文字块圆角padding: 0,  //文字块内边距shadowColor: 'transparent',  //文字块背景阴影颜色shadowBlur: 0,  //文字块背景阴影长度shadowOffsetX: 0,  //文字块背景阴影 X 偏移shadowOffsetY: 0,  //文字块背景阴影 Y 偏移width: 0,  //文本显示宽度height: 0,  //文本显示高度textBorderColor: '',  //文字本身描边颜色textBorderWidth: '',  //文字本身描边宽度textBorderType: 'solid',  //文字本身描边类型，属性值：solid/dashed/dotted/number/arraytextBorderDashOffset: 0,//虚线偏移量，可搭配textBorderType指定dashed/array实现灵活的虚线效果textShadowColor: 'transparent',  //文字本身阴影颜色textShadowBlur: 0,  //文字本身阴影长度textShadowOffsetX: 0,  //文字本身阴影 X 偏移textShadowOffsetY: 0,  //文字本身阴影 Y 偏移overflow: 'none',  //文字超出宽度是否截断或者换行，配置width时有效，属性值：truncate/break/breakAllellipsis: '',  //在overflow配置为'truncate'的时，该属性配置末尾显示文本rich: {},  //自定义富文本样式},tooltip: {  //配置项同tooltip。默认不显示show: true},//图例项icon，用来修改默认的图形样式icon: '',  //属性值：circle/rect/roundRect/triangle/diamond/pin/arrow/none/'image:'/'path:'data: [{name: '',//图例项的iconicon: 'circle',  itemStyle: {  //图例项的图形样式color: 'red',borderColor: ''borderWidth: auto,borderType: '',borderDashOffset: 0,borderCap: inherit,borderJoin: inherit,borderMiterLimit: inherit,shadowBlur: 0,shadowColor: '',shadowOffsetX: 0,shadowOffsetY: 0,opacity: inherit,decal: inherit},lineStyle: {},  //同上面的itemStylesymbolRotate: 'inherit',  //图形旋转角度textStyle: {}  //图例项的文本样式}],backgroundColor: 'transparent',  //图例背景色，默认透明borderColor: '#ccc',  //边框颜色borderWidth: 1,  //边框线宽borderRadius: 0,  //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径//图形阴影的模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果shadowBlur: 10,  shadowColor: '',  //阴影颜色。支持的格式同colorshadowOffsetX: 0,  shadowOffsetY: 0,  scrollDataIndex: 0,  //type为'scroll'时有效，图例当前最左上显示项的dataIndexpageButtonItemGap: 5,  //type为'scroll'时有效，图例控制块中，按钮和页信息之间的间隔pageButtonGap: '',  //type为'scroll'时有效，图例控制块和图例项之间的间隔pageButtonPosition: 'end',  //type为'scroll'时有效，图例控制块的位置pageFormatter: '{current}/{total}',  //type为'scroll'时有效，图例控制块中，页信息的显示格式pageIcons: {  //type为'scroll'时有效，图例控制块的图标horizontal: '',vertical: ''},pageIconColor: '#2f4554',  //type为'scroll'时有效，翻页按钮的颜色pageIconInactiveColor: '#aaa',  //type为'scroll'时有效，翻页按钮不激活时（即翻页到头时）的颜色pageIconSize: 15,  //type为'scroll'时有效，翻页按钮的大小pageTextStyle: {},  //type为'scroll'时有效，图例页信息的文字样式，属性值参考textStyle写法animation: true,  //图例翻页是否使用动画animationDurationUpdate: 800,  //图例翻页时动画时长emphasis: {selectorLabel: {}  //内容参考textStyle},selector: false,  //图例组件中选择器按钮，默认不显示selectorLabel: {},  //选择器按钮的文本标签样式，内容参考textStyleselectorPosition: 'auto',  //选择器位置selectorItemGap: 7,  //选择器按钮之间间隔selectorButtonGap: 10  //选择器按钮与图例组件之间间隔
}

echarts详细配置title、yAxis/xAxis、tooltip、grid、legend相关推荐

ECharts中setOption的title、tooltip、xAxis、yAxis、series、legend等参数的含义。
ECharts中setOption的title.tooltip.xAxis.yAxis.series.legend等参数的含义. title //标题设置 legend //图例控制 grid //图 ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
【Echarts】Vue项目使用echarts详细教程，暗色系柱状图，折线图，环形图等详细配置代码
文章目录一.引入 echarts 二.效果图及其详细代码 2.1.双柱柱状图 2.2.折柱混合图 2.3.堆叠柱状图 2.4.嵌套环形图 2.5.普通环形图一.引入 echarts echarts ...
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置 1.认识使用可以参考之前文章,会使用直接跳过1 引入官网的南丁格尔玫瑰图效果如下: 使用函数配置分为三个部分:初始化=> 设置 ...
❤echarts桑葚图的使用以及桑葚图详细配置
❤echarts桑葚图的使用以及桑葚图详细配置 series: [{type: 'sankey',data: data.nodes,links: data.links,label :{fontSize ...
Echarts数据可视化title标题，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
HighCharts结构及详细配置(中文对比)
HighCharts结构及详细配置: 一.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档链接在文章下面提供) var chart = new Hi ...
Echarts饼图配置、样式详解二、图形中间文字、图形旁边文字上下显示等
效果图: 图形中间文字详细配置: https://www.echartsjs.com/option.html#graphic.elements-text 图形两边文字详细配置:https://www. ...
Window VNC远程控制LINUX：VNC详细配置介绍
Window VNC远程控制LINUX:VNC详细配置介绍 //---------------------------------------vnc linux下的详细配置 1.VNC的启动/停止/重 ...

echarts详细配置title、yAxis/xAxis、tooltip、grid、legend

echarts详细配置title、yAxis/xAxis、tooltip、grid、legend相关推荐

最新文章

热门文章