devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts详细配置title、yAxis/xAxis、tooltip、grid、legend_echars yaxis 字体加粗

作者：羊村懒王 | 2024-03-25 09:57:34

赞

踩

echars yaxis 字体加粗
  1. title: {
  2. 	show:"true", //是否显示标题，默认显示，可以不设置
  3. 	text:"echarts实例", //图表标题文本内容
  4. 	link:"http://echarts.baidu.com/", //点击标题内容要跳转的链接
  5. 	target:"blank",//跳转链接打开方式，blank是新窗口打开，self是自身窗口打开，跟a标签一样
  6. 	textStyle:{ //标题内容的样式
  7. 		color:'#e4393c',//京东红
  8. 		fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
  9. 		fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
  10. 		fontFamily:"san-serif",//主题文字字体，默认微软雅黑
  11. 		fontSize:18//主题文字字体大小，默认为18px
  12. 	},
  13. 	textAlign:'left',//标题文本对齐方式
  14. 	textBaseline:"top",//默认垂直对齐方式
  15. 	subtext:"作者:xxx",//主标题的副标题文本内容
  16. 	sublink:"http://blog.csdn.net/zhaoxiang66",//点击副标题内容要跳转的链接
  17. 	subtarget:"blank",//同主标题，blank是新窗口打开，self是自身窗口打开
  18. 	subtextStyle:{//副标题内容的样式
  19. 		color:'green',//绿色
  20. 		fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
  21. 		fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
  22. 		fontFamily:"san-serif",//主题文字字体，默认微软雅黑
  23. 		fontSize:12//主题文字字体大小，默认为12px
  24. 	},
  25. 	padding:5,//各个方向的内边距，默认是5，可以自行设置
  26. 	itemGap:10,//主标题和副标题之间的距离，可自行设置
  27. 	left:"center",//left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
  28. 	top:"center",//left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
  29. 	right:"auto",//right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
  30. 	bottom:"auto",//bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
  31. 	//left设置center标题会自动水平居中
  32. 	//top设置center标题会自动垂直居中
  33. 	backgroundColor:"#ccc",//标题背景色，默认透明，颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'
  34. 	borderColor:"red",//标题的边框颜色，颜色格式支持同backgroundColor
  35. 	borderWidth:2,//标题边框线宽，默认为0，可自行设置
  36. 	shadowBlur: 10,//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
  37. 	shadowColor: "black",
  38. 	shadowOffsetX: 0,
  39. 	shadowOffsetY: 0,
  40. }，
  41.  
  42.  
  43. yAxis: {
  44.     show: true,    // 是否显示 y 轴
  45.     position: 'top',    // y 轴的位置（'top'，'bottom'） 
  46.     type: 'category',    // 坐标轴类型
  47.     nameLocation: 'end',     // 坐标轴名称显示位置
  48.     nameGap: 15,     // 坐标轴名称与轴线之间的距离
  49.     nameRotate: 10,    // 坐标轴名字旋转，角度值
  50.     inverse: false,    // 是否是反向坐标轴
  51.     nameTextStyle: {
  52.         color: '#333',     // 坐标轴名称的颜色
  53.         fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
  54.         fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
  55.         fontSize: '20',    // 文字字体大小
  56.         align: 'left',     // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
  57.         verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
  58.         lineHeight: '50',    // 行高 ）
  59.         backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
  60.     },
  61.     axisLine: {
  62.         show: true,    // 是否显示坐标轴轴线
  63.         symbol: ['none', 'arrow'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
  64.         symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
  65.         lineStyle: {
  66.             color: '#333',    // 坐标轴线线的颜色
  67.             width: '5',    // 坐标轴线线宽
  68.             type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
  69.         },
  70.     },
  71.     axisTick: {
  72.         show: true,    // 是否显示坐标轴刻度
  73.         inside: true,     // 坐标轴刻度是否朝内，默认朝外
  74.         length: 5,    // 坐标轴刻度的长度
  75.         lineStyle: {
  76.             color: '#FFF',     // 刻度线的颜色
  77.             width: 10,    // 坐标轴刻度线宽
  78.             type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
  79.         },
  80.     },
  81.     axisLabel: {
  82.         show: true,     // 是否显示刻度标签
  83.         interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
  84.         inside: true,    // 刻度标签是否朝内，默认朝外
  85.         rotate: 90,    // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
  86.         margin: 10,    // 刻度标签与轴线之间的距离
  87.         // formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
  88.         color: '#FFF',     // 刻度标签文字的颜色
  89.         fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
  90.         fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
  91.         fontSize: '20',    // 文字字体大小
  92.         align: 'left',     // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
  93.         verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
  94.         lineHeight: '50',    // 行高 ）
  95.         backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
  96.     },
  97.     splitLine: {
  98.         show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
  99.         interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
  100.         color: ['#ccc'],    // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
  101.         width: 3,    // 分隔线线宽
  102.         type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
  103.     },
  104.     splitArea: {
  105.         show: true,    // 是否显示分隔区域
  106.         interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
  107.         areaStyle: {
  108.             color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],    // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
  109.             opacity: 1,    // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
  110.         },
  111.     },
  112.     data: {
  113.         textStyle: {
  114.             color: '#FFF',     // 文字的颜色
  115.             fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
  116.             fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
  117.             fontSize: '20',    // 文字字体大小
  118.             align: 'left',     // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
  119.             verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
  120.             lineHeight: '50',    // 行高 ）
  121.             backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
  122.         },
  123.     },
  124. },
  125.  
  126.  
  127. tooltip: {
  128.     show: true,    // 是否显示提示框组件
  129.     trigger: 'axis',    // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）
  130.     axisPointer: {
  131.         type: 'cross',    // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
  132.         snap: false,    // 坐标轴指示器是否自动吸附到点上。默认自动判断。
  133.         label: {
  134.             margin: 10,    // label 距离轴的距离
  135.             color: '#FFF',     // 文字的颜色
  136.             fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
  137.             fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
  138.             fontSize: '20',    // 文字字体大小
  139.             lineHeight: '50',    // 行高 
  140.             padding = [5, 7, 5, 7],    // 内边距，单位px 
  141.             backgroundColor = 'auto',    // 文本标签的背景颜色
  142.         },
  143.         animation: true,     // 是否开启动画
  144.         animationDuration: 1000,     // 初始动画时长
  145.         animationDurationUpdate: 200,    // 数据更新动画的时长
  146.     }
  147.     showContent: true,     // 是否显示提示框浮层，默认显示
  148.     alwaysShowContent: true,     // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
  149.     triggerOn: 'mousemove|click',    // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
  150.     confine: true,    // 是否将 tooltip 框限制在图表的区域内
  151.     backgroundColor: 'rgba(50,50,50,0.7)',    // 提示框浮层的背景颜色
  152.     padding: 5,    // 提示框浮层内边距，单位px
  153.     textStyle: {
  154.         color: '#FFF',     // 文字的颜色
  155.         fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
  156.         fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
  157.         fontSize: '20',    // 文字字体大小
  158.         lineHeight: '50',    // 行高 
  159.     },
  160.     formatter: function (params) {
  161.         var result = ''
  162.         var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#F1E67F"></span>'    // 定义第一个数据前的圆点颜色
  163.         var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#2BA8F1"></span>'    // 定义第二个数据前的圆点颜色
  164.         result += params[0].axisValue + "</br>" + dotHtml + ' 数据名称 ' + params[0].data + "</br>" + dotHtml2 + ' 数据名称 ' + params[1].data;
  165.         return result
  166.     }
  167. },
  168.  
  169.  
  170. grid: {
  171.   // 间距是 根据x、y轴计算的；假如都是0，x、y轴的label汉字就隐藏掉了。
  172.   left: 24, // 默认10%，给24就挺合适的。
  173.   top: 24, // 默认60
  174.   right: 24, // 默认10%
  175.   bottom: 24, // 默认60
  176.   width:'100%', // grid 组件的宽度。默认自适应。
  177.   height:'100%',
  178.   containLabel:true, // grid区域是否包含坐标轴的刻度标签。(如果true的时候，上下左右可以为0了)
  179.   show:true, // 是否显示直角坐标系网格。是否显示grid，grid:show后，下面的一些参数生效
  180.   backgroundColor:'#ccac62',
  181.   borderColor:"#000",
  182. },
  183.  
  184.  
  185. legend: {
  186.     type: 'plain',  //图例类型，plain/scroll
  187.     show: true,  //是否显示x轴，布尔值
  188.     zlevel: 2,  //控制图形的前后顺序
  189.     z: 2,  //控制图形的前后顺序
  190.     left: '',  //图例离容器左侧的距离，20/'20%'/'left'/'atuo'等
  191.     top: '',
  192.     right: '',
  193.     bottom: '',
  194.     width: 'auto',  //宽度，默认自适应
  195.     height: 'auto',  //高度，默认自适应
  196.     orient: 'horizontal',  //布局朝向，horizontal/vertical
  197.     align: 'auto',  //图例标记和文本的对齐，默认自动，auto/left/right
  198.     padding: 5,  //内边距，默认各方向内边距为5px
  199.     itemGap: 10,  //图例间隔。横向时为水平间隔，纵向时为纵向间隔
  200.     itemWidth: 25,  //图形宽度
  201.     itemHeight: 14,  //图形高度
  202.     itemStyle: {  
  203.         color: '',  /颜色，参考下面的文章/
  204.         borderColor: '',  //描边颜色，支持格式同color，不支持回调函数
  205.         borderWidth: auto,  //描边宽度，可以为数字默认单位为px
  206.         borderType: solid,  //描边类型，值：solid默认/dashed/dotted/number/array
  207.         borderDashOffset: 0,  //虚线偏移量，搭配borderType指定dashed、array实现灵活的虚线效果
  208.         borderCap: round  //线段末端的绘制，butt方形/round圆形/square也是方形效果与butt不同
  209.     },
  210.     lineStyle: {
  211.         color: '',  /颜色，参考下面的文章/
  212.         width: auto,  //线宽
  213.         type: solid,  //线的类型，solid默认/dashed/dotted/number/array
  214.         dashOffset: 0,  //虚线的偏移量，type指定dashed、array实现灵活的虚线效果
  215.         cap: round,  //指定线段末端的绘制方式，参考上面的'borderCap'
  216.         join: auto,  //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性，bevel默认/round/miter
  217.         miterLimit: 10,  //设置斜接面限制比例，只有当join为miter才有效，属性值：10默认值/number
  218.         //阴影模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
  219.         shadowBlur: 10,
  220.         shadowColor: '',  //阴影颜色，格式同color
  221.         shadowOffsetX: 0,  //阴影水平方向上偏移距离
  222.         shadowOffsetY: 0,  //阴影垂直方向上的偏移距离
  223.         opacity: auto  //透明度，支持从 0 到 1 的数字，为 0 时不绘制该图形
  224.     },
  225.     symbolRotate: inherit,  //旋转角度，类型为number|inherit。若为inherit，表示取系列symbolRotate
  226.     formatter: 'Legend {name}',  //用来格式化图例文本，支持字符串模板和回调函数两种形式，name为图例名称
  227.     selectedMode: true,  //图例选择模式，true/false/single/multiple
  228.     inactiveColor: '#ccc',  //图例关闭时的颜色
  229.     inactiveBorderColor: '#ccc',  //图例关闭时的描边颜色
  230.     inactiveBorderWidth: 'auto',  //关闭时的描边粗细，属性值：auto取2/不存在描边取0/inherit始终取系列描边粗细
  231.     selected: {
  232.         '系列1': true,  // 选中'系列1'
  233.         '系列2': false  // 不选中'系列2'
  234.     },
  235.     textStyle: {
  236.         color: #333,  //文字颜色
  237.         fontStyle: '',  //字体风格
  238.         fontWeight: '',  //字体粗细
  239.         fontFamily: '',  //字体系列
  240.         fontSize: 12,  //字体大小
  241.         lineHeight: 16,  //行高
  242.         backgroundColor: '',  //背景色，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'
  243.         borderColor: '',  //边框颜色
  244.         borderWidth: 0,  //边框宽度
  245.         borderType: 'solid',  //边框描边类型，属性值：solid/dashed/dotted/number/array
  246.         borderDashOffset: 0,  //虚线偏移量，可搭配borderType指定dashed/array实现灵活的虚线效果
  247.         borderRadius: 0,  //文字块圆角
  248.         padding: 0,  //文字块内边距
  249.         shadowColor: 'transparent',  //文字块背景阴影颜色
  250.         shadowBlur: 0,  //文字块背景阴影长度
  251.         shadowOffsetX: 0,  //文字块背景阴影 X 偏移
  252.         shadowOffsetY: 0,  //文字块背景阴影 Y 偏移
  253.         width: 0,  //文本显示宽度
  254.         height: 0,  //文本显示高度
  255.         textBorderColor: '',  //文字本身描边颜色
  256.         textBorderWidth: '',  //文字本身描边宽度
  257.         textBorderType: 'solid',  //文字本身描边类型，属性值：solid/dashed/dotted/number/array
  258.         textBorderDashOffset: 0,//虚线偏移量，可搭配textBorderType指定dashed/array实现灵活的虚线效果
  259.         textShadowColor: 'transparent',  //文字本身阴影颜色
  260.         textShadowBlur: 0,  //文字本身阴影长度
  261.         textShadowOffsetX: 0,  //文字本身阴影 X 偏移
  262.         textShadowOffsetY: 0,  //文字本身阴影 Y 偏移
  263.         overflow: 'none',  //文字超出宽度是否截断或者换行，配置width时有效，属性值：truncate/break/breakAll
  264.         ellipsis: '',  //在overflow配置为'truncate'的时，该属性配置末尾显示文本
  265.         rich: {},  //自定义富文本样式
  266.     },
  267.     tooltip: {  //配置项同tooltip。默认不显示
  268.         show: true
  269.     },
  270.     //图例项icon，用来修改默认的图形样式
  271.     icon: '',  //属性值：circle/rect/roundRect/triangle/diamond/pin/arrow/none/'image:'/'path:'
  272.     data: [{
  273.         name: '',
  274.         //图例项的icon
  275.         icon: 'circle',  
  276.         itemStyle: {  //图例项的图形样式
  277.             color: 'red',
  278.             borderColor: ''
  279.             borderWidth: auto,
  280.             borderType: '',
  281.             borderDashOffset: 0,
  282.             borderCap: inherit,
  283.             borderJoin: inherit,
  284.             borderMiterLimit: inherit,
  285.             shadowBlur: 0,
  286.             shadowColor: '',
  287.             shadowOffsetX: 0,
  288.             shadowOffsetY: 0,
  289.             opacity: inherit,
  290.             decal: inherit
  291.         },
  292.         lineStyle: {},  //同上面的itemStyle
  293.         symbolRotate: 'inherit',  //图形旋转角度
  294.         textStyle: {}  //图例项的文本样式
  295.     }],
  296.     backgroundColor: 'transparent',  //图例背景色，默认透明
  297.     borderColor: '#ccc',  //边框颜色
  298.     borderWidth: 1,  //边框线宽
  299.     borderRadius: 0,  //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
  300.     //图形阴影的模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
  301.     shadowBlur: 10,  
  302.     shadowColor: '',  //阴影颜色。支持的格式同color
  303.     shadowOffsetX: 0,  
  304.     shadowOffsetY: 0,  
  305.     scrollDataIndex: 0,  //type为'scroll'时有效，图例当前最左上显示项的dataIndex
  306.     pageButtonItemGap: 5,  //type为'scroll'时有效，图例控制块中，按钮和页信息之间的间隔
  307.     pageButtonGap: '',  //type为'scroll'时有效，图例控制块和图例项之间的间隔
  308.     pageButtonPosition: 'end',  //type为'scroll'时有效，图例控制块的位置
  309.     pageFormatter: '{current}/{total}',  //type为'scroll'时有效，图例控制块中，页信息的显示格式
  310.     pageIcons: {  //type为'scroll'时有效，图例控制块的图标
  311.         horizontal: '',
  312.         vertical: ''
  313.     },
  314.     pageIconColor: '#2f4554',  //type为'scroll'时有效，翻页按钮的颜色
  315.     pageIconInactiveColor: '#aaa',  //type为'scroll'时有效，翻页按钮不激活时（即翻页到头时）的颜色
  316.     pageIconSize: 15,  //type为'scroll'时有效，翻页按钮的大小
  317.     pageTextStyle: {},  //type为'scroll'时有效，图例页信息的文字样式，属性值参考textStyle写法
  318.     animation: true,  //图例翻页是否使用动画
  319.     animationDurationUpdate: 800,  //图例翻页时动画时长
  320.     emphasis: {
  321.         selectorLabel: {}  //内容参考textStyle
  322.     },
  323.     selector: false,  //图例组件中选择器按钮，默认不显示
  324.     selectorLabel: {},  //选择器按钮的文本标签样式，内容参考textStyle
  325.     selectorPosition: 'auto',  //选择器位置
  326.     selectorItemGap: 7,  //选择器按钮之间间隔
  327.     selectorButtonGap: 10  //选择器按钮与图例组件之间间隔
  328. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/308784
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号