注释

const option = { ... }

全图背景

backgroundColor: 'rgba(0,0,0,0)',

色板

color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
          '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
          '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],

图表标题

// 图表标题
title: {
  x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
  // 'center' ¦ 'left' ¦ 'right'
  // ¦ {number}（x坐标，单位px）
  y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
  // 'top' ¦ 'bottom' ¦ 'center'
  // ¦ {number}（y坐标，单位px）
  //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
  backgroundColor: 'rgba(0,0,0,0)',
  borderColor: '#ccc',       // 标题边框颜色
  borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
  padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
  // 接受数组分别设定上右下左边距，同css
  itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，
  textStyle: {
    fontSize: 18,
    fontWeight: 'bolder',
    color: '#333'          // 主标题文字颜色
  },
  subtextStyle: {
    color: '#aaa'          // 副标题文字颜色
  }
},

图例

// 图例
legend: {
  orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
  // 'horizontal' ¦ 'vertical'
  x: 'center',               // 水平安放位置，默认为全图居中，可选为：
  // 'center' ¦ 'left' ¦ 'right'
  // ¦ {number}（x坐标，单位px）
  y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
  // 'top' ¦ 'bottom' ¦ 'center'
  // ¦ {number}（y坐标，单位px）
  backgroundColor: 'rgba(0,0,0,0)',
  borderColor: '#ccc',       // 图例边框颜色
  borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
  padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
  // 接受数组分别设定上右下左边距，同css
  itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
  // 横向布局时为水平间隔，纵向布局时为纵向间隔
  itemWidth: 20,             // 图例图形宽度
  itemHeight: 14,            // 图例图形高度
  textStyle: {
    color: '#333'          // 图例文字颜色
  }
},

值域

// 值域
dataRange: {
  orient: 'vertical',        // 布局方式，默认为垂直布局，可选为：
  // 'horizontal' ¦ 'vertical'
  x: 'left',                 // 水平安放位置，默认为全图左对齐，可选为：
  // 'center' ¦ 'left' ¦ 'right'
  // ¦ {number}（x坐标，单位px）
  y: 'bottom',               // 垂直安放位置，默认为全图底部，可选为：
  // 'top' ¦ 'bottom' ¦ 'center'
  // ¦ {number}（y坐标，单位px）
  backgroundColor: 'rgba(0,0,0,0)',
  borderColor: '#ccc',       // 值域边框颜色
  borderWidth: 0,            // 值域边框线宽，单位px，默认为0（无边框）
  padding: 5,                // 值域内边距，单位px，默认各方向内边距为5，
  // 接受数组分别设定上右下左边距，同css
  itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
  // 横向布局时为水平间隔，纵向布局时为纵向间隔
  itemWidth: 20,             // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
  itemHeight: 14,            // 值域图形高度，线性渐变垂直布局高度为该值 * 10
  splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变
  color:['#1e90ff','#f0ffff'],//颜色
  //text:['高','低'],         // 文本，默认为数值文本
  textStyle: {
    color: '#333'          // 值域文字颜色
  }
},

工具箱

// 工具箱
toolbox: {
  orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
  // 'horizontal' ¦ 'vertical'
  x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
  // 'center' ¦ 'left' ¦ 'right'
  // ¦ {number}（x坐标，单位px）
  y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
  // 'top' ¦ 'bottom' ¦ 'center'
  // ¦ {number}（y坐标，单位px）
  color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
  backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
  borderColor: '#ccc',       // 工具箱边框颜色
  borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
  padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
  // 接受数组分别设定上右下左边距，同css
  itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
  // 横向布局时为水平间隔，纵向布局时为纵向间隔
  itemSize: 16,              // 工具箱图形宽度
  featureImageIcon : {},     // 自定义图片icon
  featureTitle : {
    mark : '辅助线开关',
    markUndo : '删除辅助线',
    markClear : '清空辅助线',
    dataZoom : '区域缩放',
    dataZoomReset : '区域缩放后退',
    dataView : '数据视图',
    lineChart : '折线图切换',
    barChart : '柱形图切换',
    restore : '还原',
    saveAsImage : '保存为图片'
  }
},

提示框

// 提示框
tooltip: {
  trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
  showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
  hideDelay: 100,            // 隐藏延迟，单位ms
  transitionDuration : 0.4,  // 动画变换时间，单位s
  backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
  borderColor: '#333',       // 提示边框颜色
  borderRadius: 4,           // 提示边框圆角，单位px，默认为4
  borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
  padding: 5,                // 提示内边距，单位px，默认各方向内边距为5，
  // 接受数组分别设定上右下左边距，同css
  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
    lineStyle : {          // 直线指示器样式设置
      color: '#48b',
      width: 2,
      type: 'solid'
    },
    shadowStyle : {                       // 阴影指示器样式设置
      width: 'auto',                   // 阴影大小
      color: 'rgba(150,150,150,0.3)'  // 阴影颜色
    }
  },
  textStyle: {
    color: '#fff'
  }
},

区域缩放控制器

// 区域缩放控制器
dataZoom: {
  orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
  // 'horizontal' ¦ 'vertical'
  // x: {number},            // 水平安放位置，默认为根据grid参数适配，可选为：
  // {number}（x坐标，单位px）
  // y: {number},            // 垂直安放位置，默认为根据grid参数适配，可选为：
  // {number}（y坐标，单位px）
  // width: {number},        // 指定宽度，横向布局时默认为根据grid参数适配
  // height: {number},       // 指定高度，纵向布局时默认为根据grid参数适配
  backgroundColor: 'rgba(0,0,0,0)',       // 背景颜色
  dataBackgroundColor: '#eee',            // 数据背景颜色
  fillerColor: 'rgba(144,197,237,0.2)',   // 填充颜色
  handleColor: 'rgba(70,130,180,0.8)'     // 手柄颜色
},

网格

// 网格
  grid: {
    x: 80,
    y: 60,
    x2: 80,
    y2: 60,
    // width: {totalWidth} - x - x2,
    // height: {totalHeight} - y - y2,
    backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 1,
    borderColor: '#ccc'
  },