Echarts通用属性整理学习一（title与legend）

通用属性

• title

  说明：标题组件（主标题、副标题），ECharts 2.x单实例只能拥有一个标题组件，ECharts 3可以拥有多个。
  属性：
  • id：指定则可用于在 option 或者 API 中引用组件
  • show

  主标题

  • text：标题文本，支持\n换行
  • padding：number、array
  • left、top、right、bottom：距离容器的距离（像素值、auto、百分比）
  • textAlign：主标题与副标题的水平对齐方式，auto、left、right、center
  • textVerticalAlign：主标题与副标题的垂直对齐方式，auto、top、bottom、middle
  • itemGap：主副之间间距
  • backgroundColor
  • borderColor、borderWidth、borderRadius
  • textStyle：作用在字体本身对象
    • color：主标题颜色（字符串）
    • fontStyle（normal、italic、oblique）、fontWeight、fontFamily、fontSize、lineHeight
    • width、height：指定内容宽高（不指定rich则不能设置此项）
    • textBorderColor、textBorderWidth
    • textShadowColor、textShadowBlur（阴影长度）、textShadowOffsetX、textShadowOffsetY（偏移量）
    • rich：自定义富文本样式
  • shadowBlur：图形阴影模糊大小，配合shadowColor,shadowOffsetX, shadowOffsetY一起使用，生效前提：show: true 以及backgroundColor不为 tranparent
  • shadowColor、shadowOffsetX、shadowOffsetY
  • triggerEvent：是否触发事件
  • target：指定打开主标题超链接方式：self、blank
  • zlevel：不同值的图形放置在不同的 Canvas 中，Canvas 分层是优化手段，经常变化的设置统一zlevel，但注重多Canvas 会引起内存开销增大。
  • z：比zlevel的优先级低，且不会创建新的Canvas

  副标题

  • subtext：副标题文本，支持\n换行
  • sublink：副标题超链接
  • subtarget：打开方式
  • subtextStyle：与主标题一致对象
    • align：left、center、right
    • `verticalAlign：top、middle、bottom

• legend

  说明：图例组件，展示标记(symbol)、颜色、名字，点击控制系列的显示隐藏
  属性：
  • type：图例的类型，plain（默认）、scroll（图例过多时）
  • width、height：默认自适应
  • orient：图例列表的布局朝向，horizontal、vertical
  • align：图例与文本的对齐方式，auto、left、right
  • itemGap：图例每项之间的间隔
  • itemWidth、itemHeight：图例标记的图形宽高
  • symbolKeepAspect：图标形式是 path://时 ，缩放时是否保持图形长宽比。
  • formatter：格式化图例文本，支持字符串模板和回调函数

    // 使用字符串模板，模板变量为图例名称 {name}
    formatter: 'Legend {name}'
    // 使用回调函数
    formatter: function (name) {
        return 'Legend ' + name;
    }
    

  • selectedMode：图例选择的模式，single、multiple、true、false
  • inactiveColor：图例关闭时的颜色
  • selected：图例选中状态表

    selected: {
        // 选中'系列1'
        '系列1': true,
        // 不选中'系列2'
        '系列2': false
    }
    

  • textStyle：legend图标文字对象
    • color、backgroundColor（支持照片）
    • width、height：指定内容宽高（不指定rich则不能设置此项）、padding
    • fontStyle（normal、italic、oblique）、fontWeight、fontFamily、fontSize、lineHeight
    • borderColor、borderWidth、borderRadius
    • textBorderColor、textBorderWidth、textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY
    • shadowColor、shadowBlur（阴影长度）、shadowOffsetX、shadowOffsetY（偏移量）
    • rich：自定义富文本样式
  • tooltip：legend 文字很多的时候对文字做裁剪开启提示框
  • icon：circle，rect，roundRect，triangle，diamond，pin，arrow，none，image://url（图片的链接、dataURI）
  • data：图例的数据数组
    • name：图例项的名称，应等于某系列的name值（如果是饼图，也可以是饼图单个数据的 name）。
    • icon
    • textStyle
  • animation：图例翻页是否使用动画
  • animationDurationUpdate：翻页动画时长
  • emphasis：标签对象
    • selectorLabel对象
      • show
      • width , height , padding
      • distance（距离图形元素的距离）, rotate , offset
      • color , backgroundColor
      • fontStyle , fontWeight , fontFamily , fontSize
      • align , verticalAlign , lineHeight
      • borderColor , borderWidth , borderRadius
      • shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY
      • textBorderColor , textBorderWidth
      • textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY
      • rich
  • selector：选择器按钮，包括全选和反选功能

    selector: [{ type: 'all or inverse', title: '全选' }, { type: 'inverse',  title: '反选' }]
    // 或
    selector: true
    // 或
    selector: ['all', 'inverse']
    

  • selectorLabel：选择器按钮的文本标签样式，同emphasis
  • selectorPosition：选择器的位置，start、end
  • selectorItemGap：选择器按钮之间的间隔
  • selectorButtonGap：选择器按钮与图例组件之间的间隔

  与title相同属性

  • id、show
  • padding
  • left、top、right、bottom
  • backgroundColor
  • borderColor、borderWidth、borderRadius
  • shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY
  • zlevel、z
    以下type为'scroll'时生效
  • scrollDataIndex：可指定图例滚动到哪里

    示例：
    https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1
    

  • pageButtonItemGap：分页控制块中，按钮和页信息之间的间隔
  • pageButtonGap：分页控制块与图例之间的间隔
  • pageButtonPosition：分页控制块放置位置，'start'、 'end'
  • pageFormatter：分页控制块格式，{current}/{total}
  • pageIcons：分页控制块图标对象
    • horizontal
    • vertical
  • pageIconColor：翻页按钮的颜色
  • pageIconInactiveColor：翻页按钮不激活时的颜色
  • pageIconSize：翻页按钮的大小，数字或数组
  • pageTextStyle：图例页信息的文字样式对象
    • color
    • width、height：文字块宽高（不指定rich则不能设置此项）
    • fontStyle（normal、italic、oblique）、fontWeight、fontFamily、fontSize、lineHeight
    • textBorderColor、textBorderWidth、textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY