阅读数:605 评论数:0

官网上信息更全更实时：https://echarts.apache.org/zh/option.html#title

一、配置项

1、标题（title）

title: {
  id: string, // 组件id,指定则可用于在option或者API中引用组件
  show: boolean, // 是否显示标题组件
  text: string, // 主标题文本，支持使用\n换行
  link: string , // 主标题文本超链接
  target: string, // 主标题超链接的打开方式，可选'blank'（新窗口）或'self'(当前窗口打开)
  textStyle: {  // 主标题文本样式
    color: Color, // 文本颜色
    fontStyle: string, // 字体风格，可选'normal', 'italic','oblique'
    fontWeight: string/number, // 字体的粗细
    fontFamily: string,
    fontSize: number,
    lineHeight: number,   // 行高
    width: number, //文本显示宽度
    height: number, // 文本显示高度
    textBorderColor: Color,  // 文字本身的描边颜色
    textBorderWidth: number,  // 描边宽度
    textBorderType: string/number/array, // 描边类型
    textBorderDashOffset: number, //设置虚线的偏移量
    textShadowColor: Color, // 文字本身的阴影颜色
    textShadowBlue: number, // 文字本身的阴影长度
    textShadowOffsetX: number, // 文字本身的阴影x偏移
    textShadowOffsetY: number, // 文字本身的阴影y偏移
    overflow: string, // 文字超出宽度时是否截断或换行，'truncate','break','breakAll'
    ellipsis: string, // 当overflow为'truncate'时，末尾显示的文本
    rich: {  //富文本样式
      <style_name>:  {
        color: Color,
        fontStyle: string,
        fontWeight: string/number,
        fontFamily: string,
        fontSize: number,
        align: string,  // 水平对齐方式，默认自动，‘left’,'center','right'
        verticalAlign: string, // 垂直对齐方式，默认自动，‘top’,'middle','bottom'
        lineHeight: number,
        backgroundColor: Color,
        borderColor: Color,   // 文字块
        borderWidth: number,
        borderType: string/number/array,
        borderDashOffset: number,
        borderRadius: number/array,
        padding: number/array, // 文字块的内边距，文字块的width和height不包含padding
        shadowColor: color,
        shadowBlur: number,
        shadowOffsetX: number,
        shadowOffsetY: number,
        width: number/string,
        height: number/string,
        textBorderColor: color,
        textBorderWidth: number,
        textBorderType: string/number/Array,
        textBorderDashOffset: number,
        textShadowColor: color,
        textShadowBlur: number,
        textShadowOffsetX: number,
        textShadowOffsetY: number,
      }
    }
    subtext: string, // 副标题
    sublink: string, // 副标题文本超链接
    subtarget: string, // 超链接打开方式
    subtextStyle: {...} ,
    textAligh: string, // 整体（包括text和subtext）的水平对齐，‘auto’,'left','right','center'
    textVerticalAligh: string,
    triggerEvent: boolean,是否触发事件
    padding: number/array,
    itemGap: number, // 主副标题之间的间距
    zlevel: number, 
    z: number, // 组件的所有图形的z值
    left: string/number, // 组件离容器左侧的距离
    top: string/number,
    right: string/number,
    bottom: string/number,
    backgroundColor: color, // 标题背景色，默认透明 
    borderColor: color, 
    borderWidth: number,
    borderRadius: number/array, // 支持传入数组分别指定4个圆角半径
    shadowBlur: number,
    shadowColor: color,
    shadowOffsetX: number,
    shadowOffsetY: number,
  }
}

（1）可以同时设置多个标题，通过指定位置，同时显示。

（2）Italic是使用了文字本身的斜体属性，oblique是让没有斜体属性的文字做倾斜处理。因为有少量的不常用字体没有斜体的属性，如果我们使用Italic就会没有效果，只能Oblique使用才能使文字倾斜。

（3）rich中如果没有设置lineHeight，则会取父层级的lineHeight

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}

（4）textBorderType可选'solid'、‘dashed’、‘dotted’，也可以是number或者number数组，用于指定线条的dash array，配置textBorderDashOffset可以实现更灵活的虚线效果。

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}

（5）breakAll与break都是换行，不同的是breakAll在英语等拉丁文中，会强制单词内换行。

（6）zlevel用于Canvas分层，不同level值的图形会放置在不同的Canvas中，Canvas分层是一种常见的优化手段。我们常把一些图形变化频繁的组件设置成一个单独的zlevel。

（7）z相比zlevel优先级更低，而且不会创建新的Canvas。

2、图例legend

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
  type: string, // 'plain'普通图例，‘scroll’可滚动翻页的图例
  id: string,
  show: boolean,
  zlevel: number,
  z: number,
  left: string/number,
  top: string/number,
  right: string/number,
  bottom: string/number,
  width: string/number, //默认自适应
  height: string/number,
  orient: string, // 布局朝向，‘horizontal’，‘vertical’
  align: string,
  padding: number/array,
  itemGap: number, // 图像每项之间的间隔
  itemWidth: number,
  itemHeight: number,
  itemStyle:{
    color:color,
    borderColor: color,
    borderWidth:  number,
    borderType: string/number/array,
    borderDashOffset: number,
    borderCap: string, // 线段末段的绘制方式，‘butt’,'round','square'
    borderJoin: string, 
    borderMiterLimit: number, // 用于设置斜接面限制比例
    shadowBlur: number,
    shadowColor: color,
    shadowOffsetX: number,
    shadowOffsetY: number,
    opacity: number, // 0到1,0时不绘制图形
    decal: object, // 图形的贴花图案
  }
  lineStyle: {
    color: color,
    width: number,
    type: string/number/array,
    dashOffset: number,
    cap: string,
    join: string,
    miterLmit: number,
    shadowBlur: number,
    shadowColor: color,
    shadowOffsetX: number,
    shadowOffsetY: number,
    opacity: number,
  }
  symbolRotate: number/string, //旋转角度
  formatter: string/function, // 格式化图例文本
  selectedMode: string/boolean, //默认开启选择，还可以设用为‘single’或'multiple'使用单选或多选
  inactiveColor: color, //图例关闭时的颜色
  inactiveBorderColor: color,
  inactiveBorderWidth: number,
  selected: object, 
  textStyle: {...}
  tooltip: object,
  icon: string,
  data: [{
      name: string,  // 图例项的名称
      icon: string,
      itemStyle: {...},
      lineStyle: {...},
      symbolRotate: number/string,
      textStyle: {...}
    }...
  ],
  backgroundColor: color,
  borderColor: color,
  borderWidth: number,
  borderRadius: number/array,
  shadowBlur: number,
  shadowColor: color,
  shadowOffsetX: number,
  shadowOffsetY: number,
  scrollDataIndex: 图例当前最左上显示项的dataIndex
  pageButtonItemGap: number, //按钮和页信息之间的间隔
  pageButtonGap: number, // 控制块和图例项之间的间隔
  pageButtonPosition: string, // 控制块的位置
  pageFormatter: string/function, // 页信息的显示格式。
  pageIcons: { //控制块图标
    horizontal: array, 
    vertical: array,
  },
  pageIconColor: color,
  pageIncoInactiveColor: color,
  pageIconSize: number/array,
  pageTextStyle: {
    ...
  },
  animation: boolean, // 翻页时是否使用动画
  animationDurationUpdate: number, // 动画时长
  emphasis: {
    selectorLabel: {
      show: boolean, // 是否显示标签
      distance: number, // 距离图形元素的距离
      rotate: number, //-90到90,正值是逆时针
      offset: array, // 文字偏移，
      ...// 其它内容和textStyle类似
    }
  },
  selector: boolean/array, 
  selectorLabel: {..},
  selectorPosition: string,
  selectorItemGap: number,
  selectorButtonGap: number,
}

（1）当使用滚动翻页图例时，可以调整以下配置

scrollDataIndex
pageButtonItemGap
pageButtonGap
pageButtonPostion
pageFormatter
pageIcons
pageIconColor
pageIconInactiveColor
pageIconSize
pageTextStyle
animation
animationDurationUpdate

（2）borderJoin

用于设置2个长度不为0的相连部分（线段、圆弧、曲线）如何连接在一起的属性。

（3）formatter

用来格式化图例文本，支持字符串模板和回调函数两种形式

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

（4）selected

图例选中状态表。

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

（5）icon

图例项的icon。echarts提供的标记类型包括'circle' 'rect' 'roundRect' 'triangle' 'diamond' 'pin' 'arrow' 'none'。

可以通过'image/url'设置图片

'image://http://example.website/a/b.png'

或者dataURI

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

还可以通过‘path://’使用svg 

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'

（6）pageFormatter

默认格式为‘{current}/total’，页号从1开始。

如果pageFormatter使用函数，必须返回字符串，参数为

{
    current: number
    total: number
}

（7）selector

图例中的选择器按钮，目前包括”全选“和”反选“两种功能，默认不显示。

selector: [
    {
        // 全选
        type: 'all',
        // 可以是任意你喜欢的标题
        title: '全选'
    },
    {
        // 反选
        type: 'inverse',
        // 可以是任意你喜欢的标题
        title: '反选'
    }
]

// 或
selector: true

// 或
selector: ['all', 'inverse']

3、直角坐标系中的网格（grid）

单个grid内最多可以放置上下两个x轴，左右两个Y轴。可以在网格上绘制折线图、柱状图和散点图。

一个echarts实例中可以放多个grid。

grid: {
  id: string,
  show: boolean, // 是否显示直角坐标系统网格
  zlevel: number,
  z: number,
  left: string/number, // 为'left','center','right'，组件会根据相应的位置自动对齐
  top: string/number,
  right: string/number,
  bottom: string/number,
  width: string/number,
  height: string/number,
  containLabel: boolean,
  backgroundColor: color,
  borderColor: color,
  borderWidth: number,
  shadowBlur: number,
  shadowColor: color,
  shadowOffsetX: number,
  shadowOffsetY: number,
  tooltip: { 
    ...
  }
}

（1）containLabel

grid区域是否包含坐标轴的刻度标签。

4、tooltip

提示框组件可以设置在多种地方

tooltip: {
  show: boolean,
  trigger: string,
  axisPointer: { 
  // 坐标轴指示器配置项
    type: string, // 指示器类型
    axis: string, // 指示器的坐标轴
    snap: boolean, // 坐标轴指示器是否自动吸附到点上，默认是自动判断
    z: number, 
  
     label: {
      // 坐标轴指示器的文本标签
      show: boolean,
      precision: number/string, // 文本标签的小数点精度
      formatter: string/function, // 文本标签的格式化器
      margin: number, // label距离轴的距离
      color: color,
      fontStyle: string,
      fontWeight: string/number,
      fontFamily: string,
      fontSize: number,
      lineHeight: number,
      width: number,
      height: number,
      textBorderColor: color,
      textBorderWidth: number,
      textBorderType: string/number/array,
      textBorderDashOffset: number,
      textShadowColor: color,
      textShadowBlur: number,
      textShadowOffsetX: number,
      textShadowOffsetY: number,
      overflow: string,
      ellipsis: string,
    },
    lineStyle: {...},
    shadowStyle: {
      color: color,
      shadowBlur: number,
      shadowColor: color,
      shadowOffsetX: number,
      shadowOffsetY: number,
      opacity: number,
    },
    crossStyle: { // axisPointer.type为‘cross’有效
      color: color, // 线的颜色
      width: number,
      type: string/number,array, // 线的类型
      dashOffset: number,
      cap: string, // 线末段的绘制方式
      join: string,
      miterLimit: number, // 斜接面限制比
      shadowBlur: number,
      shadowColor: color,
      shadowOffsetX: number,
      shadowOffsetY: number,
      opacity: number,
    },
    animation: boolean, // 是否开启动画
    animationThreshold: number, // 当单个系列显示的图形数量数量大于这个阈值时会关闭动画
    animationDuration: number/function, // 初始动画的时长，支持回调函数
    animationEasing: string, // 初始动画的缓动效果
    animationDelay: number/function, // 初始化动画延迟，支持回调函数
    animationDurationUpdate: number/function, // 数据更新动画的时长
    animationEasingUpdate: string, // 数据更新动画的缓动效果
    animationDelayUpdate: string/function, // 数据更新动画的延迟
  }，
  position: string/array/function, // 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置
  formatter: string/function, // 提示框层内的格式器
  valueFormatter: string, // 数据显示部分的格式化回调函数
  backgroundColor: color, // 提示浮层的背景颜色
  borderColor: color, // 提示浮层的边框颜色
  borderWidth: number, 
  textStyle: {...},
  extraCssText: string, // 额外附加的浮层的css样式
}

（1）trigger

5、xAxis

直接坐标系grid中的x轴，一般情况下单个grid组件最多只能放上下两个x轴，多于两个x轴需要通过配置offset属性防止同上位置多个x轴的重叠。

xAxis: {
  id: string,
  show: boolean, // 是否显示x轴
  gridIndex: number, // x轴所在的grid索引，默认位于第一个grid
  alignTicks: boolean, // 在多个x轴为数值轴时，可以开启该配置项自动对齐刻度，只对value和log类型的轴有效
  position: string, // x轴的位置
  offset: number, // x轴相对于默认位置的偏移
  type: string, // 坐标轴类型  
  name: string // 坐标轴名称
  nameLocation: string, // 坐标轴名称显示位置
  nameTextStyle: {...} ,// 参考textStyle
  nameGap: number, // 坐标轴名称与轴线之间的距离
  nameRotate: number, // 坐标轴名字旋转角度值
  inverse: boolean, // 是否为反向坐标轴
  boundaryGap: boolean/array, // 坐标两边留白策略
  min: number/string/function, // 坐标轴刻度最小值
  max: number/string/function, // 坐标轴刻度最大值
  scale: boolean, // 只在数据轴中有效，是否是脱离0值比例
  splitNumber: number, // 坐标轴的分割段数，在类目轴中无效
  minInterval: number, // 自动计算的坐标轴最小间隔，只在数值轴或时间轴中有效
  maxInterval: number, // 自动计算的坐标轴最大间隔
  interval: number, // 强制设置坐标轴分隔间隔
  logBase: number , // 对数据轴的底数
  silent: boolean, // 坐标轴是否是静态无法交互
  triggerEvent: boolean, // 坐标轴的标签是否响应和触发鼠标事件 ，默认不响应
  axisLine: {
    // 坐标轴轴线相关设置
    show: boolean, // 是否显示坐标轴承线
    onZero: boolean, // x轴或y轴的轴线是否在另一个轴的0刻度上
    onZeroAxisIndex: number, // 当有双轴时，可以指定在哪个轴的0刻度上
    symbol: string/array, // 轴线两边的箭头
    symbolSize: array, // 轴线两边的箭头大小
    symbolOffset: array/number, // 轴线两边的箭头偏移
    lineStyle: {...},
  },
  axisTick ： {
    // 坐标轴刻度相关设置 
    show: boolean, // 是否显示坐标轴的刻度
    alignWidthLabel, // 在类目轴中在boundaryGap为true时，保证刻度线和标签对齐
    interval: number/function, // 刻度的显示间隔
    inside: boolean, // 刻度是否朝内，默认朝外
    length: number, // 刻度的长度
    lineStyle: {...},
  }，
  minorTick: {
    // 次刻度的相关设置
    show: boolean,
    splitNumber: number, // 次刻度线分割数
    length: number,
    lineStyle: {...},
  },
  axisLabel: {
    //刻度标签相关设置
    show: boolean,
    interval: number/function, // 刻度标签的显示间隔
    inside: boolean,
    rotate: number, // 刻度标签旋转角度
    margin: number, // 标签与轴线之间的距离
    formatter: string/function,
    showMinLabel: boolean,
    showMaxLabeL: boolean,
    hideOverlap: boolean, // 是否隐藏重叠的标签
    color: color/function,
    fontStyle: string,
    fontWeight: string/number,
    fontFamily: string,
    fontSize: number,
    align: string, // 文字水平对齐方式
    verticalAlign: string, // 文字垂直对齐方式
    lineHeight: number, 
    backgroundColor: string/object,
    borderColor: color,
    borderWidth: number,
    borderType: string/number/array,
    borderDashOffset: number,
    borderRadius: number/array,
    padding: number/array,
    shadowColor: color,
    shadowBlur: number,
    shadowOffsetX: number,
    shadowOffsetY: number,
    width: number,
    height: number,
    textBorderColor: color,
    textBorderWidth: number,
    textBorderType: string/number/array,
    textBorderDashOffset: number,
    textShadowColor: color,
    textShadowBlur: number,
    textShadowOffsetX: number,
    textShadowOffsetY: number,
    overflow: string,
    ellipsis: string,
    rich:{...}
  },
  splitLine: {
    show: boolean, // 是否显示分隔线
    interval: number/function,
    lineStyle: {...},
  },
  minorSplitLine: {
     // 次分隔线
    show: boolean,
    lineStyle: {...},
  },
  splitArea: {
    // 坐标轴在grid区域中的分隔区域，默认不显示
    interval: number/function,
    show: boolean,
    areaStyle: {
      color: array, // 分隔区域颜色
      shadowBlur: number,
      shadowColor: color,
      shadowOffsetX: number,
      shadowOffsetY: number,
      opacity: number, // 图形的透明度
    },
  }，
  data: [ // 只对类目轴有效
    {
      value: string, //单个类目名称
      textStyle:{...},
    },...
  ],
  axisPointer: {
    // 坐标轴指示器
    show: boolean,
    type: string, // 指示器类型
    snap: boolean, // 是否自动吸附到点上
    z: number,
    label:{
      // 指示器的文本标签
      ...
    },
    lineStyle: {...},
    shadowStyle: {...},
    triggerTooltip: boolean, // 是否触发tooltip
    value: number, // 决定axisPointer的位置
    status: boolean, // 当前的状态
    handle: {
      // 拖拽手柄，适用触屏的环境
      ...
    },
  },
  animation: boolean, // 是否开启动画
  animationThreshold: number, // 是否开启动画的阈值
  animationDuration: number/function,
  animationEasing: string, // 初始动画的缓动效果
  animationDelay: number/function, // 初始动画的延迟
  animationDurationUpdate: number/function, // 数据更新的时长
  animationEasingUpdate: string, // 数据更新动画的缓动效果
  animationDelayUpdate: number/function, // 数据更新动画的延迟
  zlevel: number,
  z: number,
}

（1）type 坐标轴类型

（2）position

x轴的位置

默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。
注：若未将 xAxis.axisLine.onZero 设为 false , 则该项无法生效

6、yAxis

{
  id: string ,
  show: boolean, // 是否显示y轴
  gridIndex: number, // y轴所在的grid的索引，默认位于第一个grid
  alignTicks: boolean, 
  position: string, //y轴的位置
  offset: number, // y轴相对于默认位置的偏移
  type: string, // 坐标轴类型
  name: string, // 坐标轴名称 
  nameLocation: string, // 坐标轴名称显示位置
  nameTextStyle: {...},
  nameGap: number, // 坐标轴名称与轴线之间的距离
  nameRotate: number, // 坐标轴名字旋转
  inverse: boolean, // 是否反向坐标轴
  boundaryGap: boolean/array, // 坐标轴两边留白策略
  min: number/string/function,
  max: number/string/function,
  scale: boolean,
  splitNumber: number,
  minInterval: number,
  maxInterval: number,
  interval: number,
  logBase: number,
  silent: boolean, // 坐标轴是否是静态无法交互
  triggerEvent: boolean,
  axisLine: {...}, 
  axisTick: {...},
  minorTick: {...},
  axisLabel: {...},
  splitLine: {...},
  minorSplitLine: {...},
  splitArea: {...},
  data: [
    ...
  ], 
  axisPointer: {...},
  animation: boolean,
  animationThreshold: number,
  animationDuration: number/function,
  animationEasing: string,
  animationDelay: number/function,
  animationDurationUpdate: number/function,
  animationEasingUpdate: string,
  animationDelayUpdate: number/function,
  zlevel: number,
  z: number,
}

7、polar

{// 极坐标系
  id: string,
  zlevel: number,
  z: number,
  center: array, // 极坐标系的中心坐标，第一项是横坐标，第二项是纵坐标
  radius: number/string/array, // 极坐标的半径，
  tooltip: {...}
}

8、radiusAxis

{ // 极坐标系的径向轴
  id: string,
  polarIndex: number,
  type: string,
  name: string,
  nameLocation: string,
  nameTextStyle:{...},
  nameGap: number,
  nameRotate: number,
  inverse: boolean, // 是否反向坐标轴
  boundaryGap: boolean/array, // 坐标轴两边留白策略
  min: number/string/function,
  max: number/string/function,
  scale: boolean,
  splitNumber: number,
  minInterval: number,
  maxInterval: number,
  interval: number,
  logBase: number,
  silent: boolean,
  triggerEvent: boolean,
  axisLine: {...},
  axisTick: {..},
  minorTick: {...},
  axisLabel: {...},
  splitLine: {...},
  minorSplitLine: {...},
  splitArea: {...},
  data:[...],
  axisPointer: {...},
  animation: boolean,
  animationThreshold: number,
  animationDuration: number/function,
  animationEasing: string,
  animationDelay: number/function,
  animationDurationUpdate: number/function,
  animationEasingUpdate: string,
  animationDelayUpdate: number/function,
  zlevel: number,
  z: number,
}

9、angleAxis

{ // 极坐标系的角度轴
  id: string,
  polarIndex: number,
  type: string,
  startAngle: number, // 起始的角度 
  clockwise: boolean, // 是否按顺时针增长
  boundaryGap: boolean/array, // 坐标轴两边留白策略
  min: number/string/function,
  max: number/string/function,
  scale: boolean,
  splitNumber: number,
  minInterval: number,
  maxInterval: number,
  interval: number,
  logBase: number,
  silent: boolean,
  triggerEvent: boolean,
  axisLine: {...},
  axisTick: {..},
  minorTick: {...},
  axisLabel: {...},
  splitLine: {...},
  minorSplitLine: {...},
  splitArea: {...},
  data:[...],
  axisPointer: {...},
  animation: boolean,
  animationThreshold: number,
  animationDuration: number/function,
  animationEasing: string,
  animationDelay: number/function,
  animationDurationUpdate: number/function,
  animationEasingUpdate: string,
  animationDelayUpdate: number/function,
  zlevel: number,
  z: number,
}

10、radar

{ // 雷达图坐标
  id: string,
  zlevel: number,
  z: number,
  center: array,
  radius: number/string/array,
  startAngle: number,
  axisName:{
  // 每个指示器名称的配置
    ...
  },
  nameGap: number, // 名称和轴的距离
  splitNumber: number,
  shape: string, // 雷达图绘制类型
  scale: boolean,
  silent: boolean,
  triggerEvent: boolean,
  axisLine: {...},
  axisTick: {...},
  splitLine:{...},
  splitArea: {...},
  indicator: [
    // 雷达指示器
    {
      name:  指示器名称
      max: number,
      min: number,
      color: 标签的特定颜色
    },...
  ],
}

11、dataZoom

{// 用于区域缩放
  {
    type: 'inside', // 内置型
    id: string,
    disabled: boolean, // 是否停止组件的功能
    xAxisIndex: number/array, // 如果是number表示控制一个轴，如果是array表示控制多个轴
    yAxisIndex: number/array,
    radiusAxisIndex: number/array,
    angleAxisIndex: number/array,
    filterMode: string, 
    start: number, // 数据窗口范围的超始百分比
    end: number,
    startValue: number/string/Date, // 数据窗口范围的起始数值
    endValue: number/string/Date, 
    minSpan: number, // 限制窗口大小的最小值（百分比）
    maxSpan: number,
    minValueSpan: number/string/Date,
    maxValueSpan: number/string/Date,
    orient: string, // 布局方式是横还是坚
    zoomLock: boolean,// 如果锁定，只能平移不能缩放
    throttle: number, // 触发视图刷新的频率，单位ms
    rangeMode: array, //[rangeModeForStart, rangeModeForEnd]
    zoomOnMouseWheel: boolean/string, // 如何触发缩放
    moveOnMouseWhell: boolean/string,
    preventDefaultMouseMove: boolean, // 是否阻止mousemove事件的默认行为
  },
  {
    type: 'slider',
    id: string,
    show: boolean,
    backgroundColor: color,
    dataBackground: {
      lineStyle: {...},
      areaStyle: {...},
    },
    selectedDataBackground: {
        ...
    },
    fillerColor: color, // 选中范围的填充颜色
    borderColor: color,
    handleIcon: string, // 两侧缩放手柄的icon形状
    handleSize: number/string,
    handleStyle: {...},
    moveHandleIcon: string, // 移动手柄中间的icon
    moveHandleSize: number,
    moveHandleStyle: {...},
    labelPrecision: number/string, // 显示label的小数精度
    labelFormatter: string/function,
    showDetail: boolean, 
    showDataShadow: string,
    realtime: boolean, // 拖动时，是否实时更新系列的视图
    textStyle: {...},
    xAxisIndex: number/array,
    yAxisIndex: number/array,
    radiusAxisIndex: number/array,
    angleAxisIndex: number/array,
    filterModel: string,
    start: number,
    end: number,
    startValue: number/string/Date,
    endValue: number/string/Date,
    minSpan: number,
    maxSpan: number,
    minValueSpan: number/string/Date,
    maxValueSpan: number/string/Date,
    orient: string,
    zoomLock: boolean,
    throttle: number,
    rangeMode: array,
    zlevel: number,
    z: number,
    left: string/number,// slider离容器左侧的距离
    top: string/number,
    right: string/number,
    bottom: string/number,
    width: string/number, // 比left和right优先级高
    height: string/number,
    brushSelect: boolean, // 是否开启刷选功能
    brushStyle: {...},
    emphasis: {
      // 高亮样式设置
      handleStyle: {...},
      moveHandleStyle: {...},
    }
  }
}

12、visualMap

{// 将数据映射到视觉元素
  {
    type: continuous, // 连续型
    id: string,
    min: number, // 必须用户指定
    max: number, 
    range: array, //应在min max范围内
    calculable: boolean, // 是否显示拖拽用的手柄（手柄能调整选中范围）
    realtime: boolean, // 是否实时更新
    inverse: boolean, // 是否反转visualMap组件
    precision: number,
    itemWidth: number, // 长条的宽度
    itemHeight: number, // 长条的高度
    align: string,
    text: array, // 两端的文本
    textGap: number, //两端文字主体之间的距离
    show: boolean, // 是否显示visualMap-continuous组件
    dimension: number, // 指定用数据的哪个维度映射到视觉元素上，
    seriesIndex: number/array, // 指定取哪个系列的数据，
    hoverLink: boolean, // 鼠标悬浮到visualMap组件是时，鼠标位置对应的数值在图表中对的图形元素会高亮
    inRange: { ...},// 定在选中范围中的视觉元素
    outRange: {...},
    controller: {
      inRange:{...},
      outRange: {...},
    },
    zlevel: number,
    z: number,
    left: string/number,
    top: string/number,
    right: string/number,
    bottom: string/number,
    orient: string,
    padding: number/array,
    backgroundColor: color,
    borderColor: color,
    borderWidth: number,
    color: array,
    textStyle: {...},
    formatter: string/function,
    handleIcon: string,
    handleSize: number/string,
    handleStyle: {...},
    indicatorIcon: string,
    indicatorSize: number/string,
    indicatorStyle: {...},
  },
  {
    type: piecewise, // 分段型 
    id: string,
    splitNumber: number,
    pieces: array, // 自定义每一段的范围以每一段的文字
    categories: array, // 用于表示离散型数据的全集
    min: number, 
    max: number,
    minOpen: boolean,
    maxOpen: boolean,
    selectedMode: string/boolean//选择模式
    inverse: boolean,
    precision: number,
    itemWidth: number,
    itemHeight: number,
    align: string,
    text: array,
    textGap: number,
    showLabel: true,
    itemGap: number,
    itemSymbol: string,
    show: boolean, 
    dimension: number,
    seriesIndex: number/array,
    hoverLink: boolean,
    inRange:{...},
    outOfRange:{..},
    controller:{...},
    zlevel: number,
    z: number,
    left: string/number,
    top: string/number,
    right: string/number,
    bottom: string/number,
    orient: string,
    padding: number/array,
    backgroundColor: color,
    borderColor: color,
    borderWidth: number,
    color: array,
    textStyle: {...},
    formatter: string/function,
  },
}

13、tooltip

{ // 提示框组件
  show: boolean, 
  trigger: string, // 触发类型
  axisPointer: {
    // 坐标轴指示器配置项
    ...
  }, 
  showContent: boolean, // 是否显示提示框浮层
  alwaysShowContent: boolean, // 是否一直显示提示框
  triggerOn: string, // 提示框触发的条件
  showDelay:  number, // 浮层显示的延迟
  hideDalay: number,
  enterable: boolean, // 鼠标是否可进入提示框浮层中
  renderMode: string, // 浮层的渲染模式
  confie: boolean, // 是否将tooltip框限制在图表的区域内
  appendToBody: boolean, //是否将tooltip的dom节点添加为<body>的子节点
  className: string, // 指定tooltip的dom节点的css类
  transitionDuration: number, // 浮层移动动画的过渡时间，单位s
  position: string/array/function, // 浮层的位置
  formatter: string/function, 
  valueFormatter: string, // 数据显示部分的格式化回调函数
  backgroundColor: color,
  borderColor: color,
  borderWidth: number,
  padding: number,
  textStyle: {...},
  extraCssText: string, // 额外附加到浮层的css样式
  order: string, // 多系列浮层排列顺序
}

14、toolbox

{// 工具栏
  id: string,
  show: boolean,
  orient: string,
  itemSize: number, // 工具栏icon的大小
  itemGap: number, // icon之间的间隔
  showTitle: boolean, // hover时是否显示icon的标题
  feature: {
    // 工具配置项，还可自定义工具按钮
    saveAsImage: {
      type: string, // 保存的图片格式
      name: string, // 保存的文件名称
      backgroundColor: color,
      connectedBackgroundColor: color, //如果图表使用echarts.connect对多图表进行联动，则在导出图片时会导出这些联动的图表，该配置项决定了图表与图表之间间隙的填充色
      excludeComponents: array, // 保存为图片时忽略的组件列表
      show: boolean, // 是否显示该工具
      title: string,
      icon: string,
      iconStyle: {....},
      emphasis: {...},
      pixelRatio: number, // 保存图片的分辨率比例，发唱歌需要保存更高分辨率的，可以设置为大于1的值
    },
    restore:{ // 配置项还原
      show: boolean,
      title: string,
      icon: string,
      iconStyle: {...},
      emphasis: {...} 
    },
    dataView:{ // 数据视图工具
      show: boolean,
      title: string,
      icon: string,
      iconStyle: {...},
      emphasis: {...},
      readOnly: boolean, // 是否不可编辑
      optionToContent: function, // 自定义dataView展现函数
      contentToOption: function, // 在使用optionToContent情况下，如果支持数据编辑后的刷新，需要通过该属性
      lang: array, 
      backgroundColor: string,
      textareaColor: string,
      textareaBorderColor: string,
      textColor: string,
      buttonColor: string,
      buttonTextColor: string,
    },
    dataZoom:{ // 数据区域的缩放，只支持直角坐标系
      show: boolean,
      title:{
        zoom: string,
        back: string,
      },
      icon:{...},
      iconStyle: {...},
      emphasis:{...},
      filterMode: string,
      xAsisIndex: number/array/boolean,
      yAxisIndex: number/array/boolean,
      brushStyle:{..}, // 刷选框样式
    },
    magicType:{ // 动态类型切换
      show: boolean,
      type: array,
      title: {...},
      icon:{...},
      iconStyle: {...},
      emphasis:{...},
      option: {// 各个类型的专有配置项
        line: {},
        bar:{},
        stack:{},
      },
      seriesIndex: {// 各个类型对应的系列的列表
        line: array,
        bar: array,
      }      
    },
    brush:{// 选框组件的控制按钮
      type: array,
      icon: {...},
      title:{...},
    },
  },
  iconStyle:{...},
  emphasis:{..},
  zlevel: number,
  z: number,
  left: string/number,
  top: string/number,
  right: string/number,
  bottom: string/number,
  width: string/number,
  height: string/number,
  tooltip:{...},
}

 15、brush

{ // 区域选择组件
  id: string,
  toolbox: array, // 使用在toolbox中的按钮
  brushLink: array/string, //不同系列间，选中的项可以联动
  seriesIndex: array/number/string, // 哪些series可以被刷选
  geoIndex: array/number/string, //哪些geo可以被刷选
  xAxisIndex: array/number/string, //哪些xAxisIndex可以被刷选
  yAxisIndex: array/number/string, //哪些yAxisIndex可以被刷选
  brushType: string, // 刷子的类型
  brushMode: string, // 刷子的模式
  transformable: boolean, // 已经选好的选框是否可以被调整形状或平移
  throttleType: string, // 用于控制触发事件的频率
  throttleDelay: number,
  removeOnClick:  boolean, // brushMode为single时，是否支持“单击清除所有选框”
  inBrush: {...}, // 定义在选中范围内的视觉元素
  outOfBrush: {...},
  z: number,
}

16、geo

{// 地理坐标系组件
  id: string,
  show: boolean,
  map: string, // 地图名称
  roam: string/string, // 是否开启鼠标缩放和平移漫游
  projection: {// 自定义地图投影
    project: function, // 将经纬度坐标投影为其它坐标
    unproject: function, // 根据投影后坐标计算投影前的经纬度坐标
    stream: function, // 主要用于适配d3-geo中的使用的stream接口
  },
  center: array, // 当前视角的中心点
  aspectScale: number, // 用于地图的长宽比
  boundingCoords: 定义定位的左上角及右下角分别所对应的经纬度
  zoom: number, // 当前视角的缩放比例，
  scaleLimit: {
    min: number,
    max: number,
  },
  nameMap: {...}, // 自定义地区的名称映射
  nameProperty: string,
  selectedMode: boolean/string, //是否支持多选
  label: {...}, // 图形上的文本
  itemStyle: {...}, // 多边形图形样式
  emphasis: {...}, // 高亮状态下的多边形和标签样式
  select: {...}, // 选中状态下的多边形和标签样式
  blur: {...},
  zlevel: number,
  z: number:
  left: string/number,
  top: string/number,
  right: string/number,
  bottom: string/number,
  layoutCenter: array, // 定义地图中已主在屏幕中的位置
  layoutSize: number/string, //地图的大小
  region: [], // 在地图中对特定的区域的配置样式
  silent: boolean, 
  tooltip: {...},
}

17、parallel

{// 平行坐标系
  id: string,
  zlevel: number,
  z: number,
  left: string/number,
  top: string/number,
  right: string/number,
  bottom: string/number,
  width: string/number,
  height: string/number,
  layout: string, //布局方式
  axisExpanable: boolean, // 是否允许折叠axis
  axisExpandCenter: number, // 以哪个轴为中心展开
  axisExpandCount: number, // 有多少个轴会处于展开状态
  axisExpandWidth: number, // 轴的间距是多少，单位为像素
  axisExpandTriggerOn: string, 
  parallelAxisDefault: {...}, // 会融合进paralelAxis
}

18、paralelAxis

{// 平行坐标系中的坐标轴
  id: string,
  dim: number, // 坐标轴的维度序号
  parallelIndex: number, // 用于定义坐标轴对应到哪个坐标系中
  realtime: boolean,
  areaSelectStyle: {
     ... // 框选的一些设置
  },
  type: string, // 坐标轴类型
  name: string, 
  nameLocation: string,
  nameTextStyle: {...}, 
  nameGap: number,
  inverse: boolean,
  boundaryGap: boolean/array,
  min: number/string/function,
  max: number/string/function,
  scale: boolean,
  splitNumber: number,
  minInterval: number,
  maxInterval: number,
  interval: number,
  logBase: number,
  silent: boolean,
  triggerEvent: boolean, // 坐标轴的标签是否触发鼠标事件
  axisLabel: {...},
  axisTick: {...},
  minorTick: {...},
  axisLabel: {...},
  data:[],
  animation:  boolean,
  animationThreshold: number,
  animationDuration: number,
  animationEasing: string,
  animationDelay: number/function,
  animationDurationUpdate: number/function,
  animationEasingUpdate: string,
  animationDelayUpdate: number/string
}

19、timeline

{// 用于在多个echarts option间进行切换、播放的功能
  show: boolean,
  type: string, // 目前只支持‘slider’
  axisType: string,
  currentIndex: number, // 当前选中项是哪项
  autoPlay: boolean, //是否自动播放
  rewind: boolean, // 是否反向播放
  loop: boolean, // 是否循环播放
  playInterval: number, // 播放的速度
  realtime: boolean,
  replaceMerge: array/string,
  controlPosition: string, // 播放按钮的位置
  zlevel: number,
  z: number,
  left: string/number,
  right: string/number,
  bottom: string/number,
  padding: number/array,
  orient: string,
  inverse: boolean,
  symbol: string, // timeline标记的图形
  symbolSize: number/array,
  symbolRotate: number,
  symbolKeepAspect: boolean, // 是否保持长宽比
  symbolOffset: array,
  lineStyle: {...},
  label: {...},
  itemStyle:{...},
  checkpointStyle: {...},
  controlStyle: {...},
  progress: {...},
  emphasis:{...},
  data: array, // timeline数据
}

20、series-line

{
  ...
  symbol: string/function, // 标记点的图形
  showSymbol: boolean, // 如果是false，则只有在tooltip hover的时候显示
  connectNulls: boolean, // 是否连接空数据
  smooth: boolean/number, // 是否平滑曲线显示
  sampling: string, // 折线图在数据量大于像素点时的降采样策略
  markPoint: {}, // 图表的标注
  markLine: {}, // 图表的标线
  markArea: {}, // 图表的标域
}

二、API

1、echarts对象

（1）init

用于创建echart对象，返回echartsInstance对象。

(dom?: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number,
    renderer?: string,
    useDirtyRect?: boolean,     // 从 `5.0.0` 开始支持
    useCoarsePointer?: boolean, // 从 `5.4.0` 开始支持
    pointerSize?: number,       // 从 `5.4.0` 开始支持
    ssr?: boolean,              // 从 `5.3.0` 开始支持
    width?: number|string,
    height?: number|string,
    locale?: string             // 从 `5.0.0` 开始支持
}) => ECharts

（2）connect

多个图表实例实现联动。

// 分别设置每个实例的 group id
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接传入需要联动的实例数组
echarts.connect([chart1, chart2]);

（3）disconnect

解除图表实例的联动，如果只需要移除单个实例，可以将通过将该图表实例 group 设为空。

（4）dispose

销毁实例，实例销毁后无法再被使用。

（5）getInstanceByDom

获取 dom 容器上的实例。

（6）use

使用组件，配合新的按需引入的接口使用。

注意：该方法必须在echarts.init之前使用。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart
} from 'echarts/charts';
// 引入直角坐标系组件，组件后缀都为 Component
import {
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
    [GridComponent, BarChart, CanvasRenderer]
);

（7）registerMap

注册可用的地图，只在 geo组件或者 map 图表类型中使用。

（8）getMap

获取已注册的地图

（9）registerTheme

注册主题

（10）registerLocale

注册语言包

2、echartsInstance

（1）group

图表的分组，用于联运。

（2）setOption

设置实例的配置项和数据。

（3）getWidth/getHeight

获取实例容器的宽度和高度。

（4）getDom

获取容器的dom

（5）getOption

获取当前实例中维护的 option 对象，返回的 option 对象中包含了用户多次 setOption 合并得到的配置项和数据，也记录了用户交互的状态，例如图例的开关，数据区域缩放选择的范围等等。

（6）resize

改变图表尺寸，在容器大小发生改变时需要手动调用。

（7）dispatchAction

触发图表行为，例如图例开关legendToggleSelect, 数据区域缩放dataZoom，显示提示框showTip等等。

myChart.dispatchAction({
    type: 'dataZoom',
    start: 20,
    end: 30
});
// 可以通过 batch 参数批量分发多个 action
myChart.dispatchAction({
    type: 'dataZoom',
    batch: [{
        // 第一个 dataZoom 组件
        start: 20,
        end: 30
    }, {
        // 第二个 dataZoom 组件
        dataZoomIndex: 1,
        start: 10,
        end: 20
    }]
})

（8）on/off

绑定或解绑定事件处理函数。

（9）showLoading / hideLoading

加载动画的显示与隐藏。

（10）getDataURL

导出图表图片，返回一个 base64 的 URL，可以设置为Image的src。

var img = new Image();
img.src = myChart.getDataURL({
    pixelRatio: 2,
    backgroundColor: '#fff'
});

（11）getConnectedDataURL

导出联动的图表图片，返回一个 base64 的 url，可以设置为Image的src。

（12）appendData

此接口用于，在大数据量（百万以上）的渲染场景，分片加载数据和增量渲染。在大数据量的场景下（例如地理数的打点），就算数据使用二进制格式，也会有几十或上百兆，在互联网环境下，往往需要分片加载。appendData 接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分。

（13）clear

清空当前实例，会移除实例中所有的组件和图表。

（14）isDisposed

当前实例是否已经被释放。

（15）dispose

销毁实例，销毁后实例无法再被使用。