ECharts——相关命令

本文详细介绍了ECharts中title、legend和grid的配置选项,包括title的richText样式和zlevel属性,legend的formatter和selected功能,以及grid在直角坐标系内的作用。通过这些配置,可以实现更丰富的图表定制。
摘要由CSDN通过智能技术生成

1、title(文本标题)

option = {
  title: {
    text: "主标题",//主标题
 	show: true,//是否显示标题标题
	link: "www.baidu.com",//主标题文本超链接
	sublink: "jd.com",//副标题文本超链接
	target: "blank"//指定窗口打开主标题超链接,self 为当前窗口,blank 为新窗口
	subtarget: "blank"//指定窗口打开副标题超链接,self 为当前窗口,blank 为新窗口
    left: "20%",//title 组件离容器左侧的距离。
    top: "41%",//title 组件离容器上侧的距离。
 	right: "35%",//title 组件离容器右侧的距离。
    bottom: "49%",//title 组件离容器下侧的距离。
    textStyle: {
	  width: "100%",//文字块的宽度。一般不用指定,不指定则自动是文字的宽度。如果不定义 rich 属性,则不能指定 width 和 height
	  height: "100%",//文字块的高度。一般不用指定,不指定则自动是文字的宽度。如果不定义 rich 属性,则不能指定 width 和 height
      fontSize: 25,//主标题文字的字体大小。
      color: "rgba(42, 255, 0, 1)",//主标题文字颜色
      fontStyle: "italic",//主标题文字字体风格,可选:'normal'、'italic'、'oblique'
      fontWeight: "bolder",//主标题文字字体的粗细,可选: 'normal'、'bold'、 'bolder'、'lighter'
      、100 | 200 | 300 | 400...
      fontFamily: "monospace",//主标题文字的字体系列
      lineHeight: 25,//行高,rich 中如果没有设置 lineHeight,则会取父层级lineHeight
      textBorderColor: "rgba(255, 0, 0, 0.82)",//文字本身的描边颜色。
      textBorderWidth: 12,//文字本身的描边宽度。
      textShadowColor: "rgba(146, 15, 15, 1)",//文字本身的阴影颜色。
      textShadowBlur: 12,//文字本身的阴影长度。
      textShadowOffsetX: 12,//文字本身的阴影 X 偏移。
      textShadowOffsetY: 12//文字本身的阴影 Y 偏移。
	  rich: {
        "<style_name>": {
          width: "100%",//文字块的宽度。一般不用指定,不指定则自动是文字的宽度。如果不定义 rich 属性,则不能指定 width 和 height
	      height: "100%",//文字块的高度。一般不用指定,不指定则自动是文字的宽度。如果不定义 rich 属性,则不能指定 width 和 height
          color: "rgba(255, 0, 200, 1)",//文字的颜色。
          fontStyle: "italic",//文字字体风格,可选:'normal'、'italic'、'oblique'
          fontWeight: "bold",//文字字体粗细,可选: 'normal'、'bold'、 'bolder'、'lighter'
      、100 | 200 | 300 | 400...
          fontFamily: "Arial",//文字的字体系列。
          fontSize: 20,//文字的字体大小。
          align: "center",//文字水平对齐方式,默认自动。
          verticalAlign: "middle",//文字垂直对齐方式,可选:'top'、'middle'、'bottom'
          lineHeight: 25,//行高
          backgroundColor: "rgba(255, 255, 255, 1)",//文字块背景色
          backgroundColor: {image: 'xxx/xxx.png'}  //也可使用图片,可以使用 width 或 height 指定高宽,也可以不指定自适应
          borderColor: "rgba(255, 255, 255, 1)",//文字块边框颜色
          borderWidth: 12,//文字块边框宽度。
          borderRadius: [6, 6, 6, 6],//文字块的圆角。
          padding: [3, 3, 3, 3],//文字块的内边距
          shadowColor: "rgba(0, 255, 170, 1)",//文字块的背景阴影颜色
          shadowBlur: 34,//文字块的背景阴影长度。
          shadowOffsetX: 12,//文字块的背景阴影 X 偏移。
          shadowOffsetY: 23,//文字块的背景阴影 Y 偏移。
          textBorderColor: "rgba(255, 0, 17, 1)",//文字本身的描边颜色。
          textBorderWidth: 2,//文字本身的描边宽度。
          textShadowColor: "rgba(153, 67, 67, 1)",//文字本身的阴影颜色。
          textShadowBlur: 3,//文字本身的阴影长度。
          textShadowOffsetX: 4,//文字本身的阴影 X 偏移。
          textShadowOffsetY: 4//文字本身的阴影 Y 偏移。
        }
      }
    },
 	subtext: "副标题",//副标题
    subtextStyle: {
      fontSize: 25,//副标题文字的字体大小。
      color: "rgba(255, 0, 0, 0.94)",//副标题文字的颜色。
      fontStyle: "italic",//副标题文字字体风格,可选:'normal'、'italic'、'
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值