Echart图表 之 X轴(xAxis)与 Y轴(yAxis)配置项大全

06-01 1364阅读

原博主链接

xAxis与yAxis中的配置项

  • nameTextStyle:坐标轴名称的文字样式

  • axisLine:坐标轴轴线相关设置。

  • axisTick:坐标轴刻度相关设置。

  • axisLabel:坐标轴刻度标签的相关设置。

  • splitLine: 坐标轴在 grid 区域中的分隔线设置。

  • splitArea :坐标轴在 grid 区域中的分隔区域,默认不显示

    xAxis: {
      id: '',
      show: true, //是否显示x轴
      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
      nameTextStyle: {}, //一般样式也很少直接修改且内容过多待更新... ...
      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)
        }
      }
    }
    
    • title:标题

    • legend: 图例组件,颜色标注示例,可通过点击图例控制哪些系列不显示

    • grid:气泡,鼠标进入绘制图形中提示信息

    • tooltip:提示框组件

    • series:图形类型及各区域数据(饼图pie、折线图line、柱状图bar、地图map、散点(气泡)图scatter、雷达图radar)

      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",//标题的边框颜色,颜色格式支持同backgroundColor
      	borderWidth: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,    // 提示框浮层内边距,单位px
          textStyle: {
              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 = ''    // 定义第一个数据前的圆点颜色
              var dotHtml2 = ''    // 定义第二个数据前的圆点颜色
              result += params[0].axisValue + "" + dotHtml + ' 数据名称 ' + params[0].data + "" + dotHtml2 + ' 数据名称 ' + params[1].data;
              return result
          }
      },
       
       
      grid: {
        // 间距是 根据x、y轴计算的;假如都是0,x、y轴的label汉字就隐藏掉了。
        left: 24, // 默认10%,给24就挺合适的。
        top: 24, // 默认60
        right: 24, // 默认10%
        bottom: 24, // 默认60
        width:'100%', // grid 组件的宽度。默认自适应。
        height:'100%',
        containLabel:true, // grid区域是否包含坐标轴的刻度标签。(如果true的时候,上下左右可以为0了)
        show:true, // 是否显示直角坐标系网格。是否显示grid,grid:show后,下面的一些参数生效
        backgroundColor:'#ccac62',
        borderColor:"#000",
      },
       
       
      legend: {
          type: 'plain',  //图例类型,plain/scroll
          show: true,  //是否显示x轴,布尔值
          zlevel: 2,  //控制图形的前后顺序
          z: 2,  //控制图形的前后顺序
          left: '',  //图例离容器左侧的距离,20/'20%'/'left'/'atuo'等
          top: '',
          right: '',
          bottom: '',
          width: 'auto',  //宽度,默认自适应
          height: 'auto',  //高度,默认自适应
          orient: 'horizontal',  //布局朝向,horizontal/vertical
          align: 'auto',  //图例标记和文本的对齐,默认自动,auto/left/right
          padding: 5,  //内边距,默认各方向内边距为5px
          itemGap: 10,  //图例间隔。横向时为水平间隔,纵向时为纵向间隔
          itemWidth: 25,  //图形宽度
          itemHeight: 14,  //图形高度
          itemStyle: {  
              color: '',  /颜色,参考下面的文章/
              borderColor: '',  //描边颜色,支持格式同color,不支持回调函数
              borderWidth: auto,  //描边宽度,可以为数字默认单位为px
              borderType: solid,  //描边类型,值:solid默认/dashed/dotted/number/array
              borderDashOffset: 0,  //虚线偏移量,搭配borderType指定dashed、array实现灵活的虚线效果
              borderCap: round  //线段末端的绘制,butt方形/round圆形/square也是方形效果与butt不同
          },
          lineStyle: {
              color: '',  /颜色,参考下面的文章/
              width: auto,  //线宽
              type: solid,  //线的类型,solid默认/dashed/dotted/number/array
              dashOffset: 0,  //虚线的偏移量,type指定dashed、array实现灵活的虚线效果
              cap: round,  //指定线段末端的绘制方式,参考上面的'borderCap'
              join: auto,  //设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性,bevel默认/round/miter
              miterLimit: 10,  //设置斜接面限制比例,只有当join为miter才有效,属性值:10默认值/number
              //阴影模糊大小,该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
              shadowBlur: 10,
              shadowColor: '',  //阴影颜色,格式同color
              shadowOffsetX: 0,  //阴影水平方向上偏移距离
              shadowOffsetY: 0,  //阴影垂直方向上的偏移距离
              opacity: auto  //透明度,支持从 0 到 1 的数字,为 0 时不绘制该图形
          },
          symbolRotate: inherit,  //旋转角度,类型为number|inherit。若为inherit,表示取系列symbolRotate
          formatter: 'Legend {name}',  //用来格式化图例文本,支持字符串模板和回调函数两种形式,name为图例名称
          selectedMode: true,  //图例选择模式,true/false/single/multiple
          inactiveColor: '#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/array
              borderDashOffset: 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/array
              textBorderDashOffset: 0,//虚线偏移量,可搭配textBorderType指定dashed/array实现灵活的虚线效果
              textShadowColor: 'transparent',  //文字本身阴影颜色
              textShadowBlur: 0,  //文字本身阴影长度
              textShadowOffsetX: 0,  //文字本身阴影 X 偏移
              textShadowOffsetY: 0,  //文字本身阴影 Y 偏移
              overflow: 'none',  //文字超出宽度是否截断或者换行,配置width时有效,属性值:truncate/break/breakAll
              ellipsis: '',  //在overflow配置为'truncate'的时,该属性配置末尾显示文本
              rich: {},  //自定义富文本样式
          },
          tooltip: {  //配置项同tooltip。默认不显示
              show: true
          },
          //图例项icon,用来修改默认的图形样式
          icon: '',  //属性值:circle/rect/roundRect/triangle/diamond/pin/arrow/none/'image:'/'path:'
          data: [{
              name: '',
              //图例项的icon
              icon: '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: {},  //同上面的itemStyle
              symbolRotate: 'inherit',  //图形旋转角度
              textStyle: {}  //图例项的文本样式
          }],
          backgroundColor: 'transparent',  //图例背景色,默认透明
          borderColor: '#ccc',  //边框颜色
          borderWidth: 1,  //边框线宽
          borderRadius: 0,  //圆角半径,单位px,支持传入数组分别指定 4 个圆角半径
          //图形阴影的模糊大小,该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
          shadowBlur: 10,  
          shadowColor: '',  //阴影颜色。支持的格式同color
          shadowOffsetX: 0,  
          shadowOffsetY: 0,  
          scrollDataIndex: 0,  //type为'scroll'时有效,图例当前最左上显示项的dataIndex
          pageButtonItemGap: 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: {},  //选择器按钮的文本标签样式,内容参考textStyle
          selectorPosition: 'auto',  //选择器位置
          selectorItemGap: 7,  //选择器按钮之间间隔
          selectorButtonGap: 10  //选择器按钮与图例组件之间间隔
      }
      
      Echart图表 之 X轴(xAxis)与 Y轴(yAxis)配置项大全
      (图片来源网络,侵删)
      Echart图表 之 X轴(xAxis)与 Y轴(yAxis)配置项大全
      (图片来源网络,侵删)
      Echart图表 之 X轴(xAxis)与 Y轴(yAxis)配置项大全
      (图片来源网络,侵删)
免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们。

相关阅读

目录[+]

取消
微信二维码
微信二维码
支付宝二维码