Echart图表常用配置项（更新ing）

series配置

 series: [
        {
          // 提示文字的内容
          name: "销量",
          // 图表的类型，line 折线图 bar 柱形图 pie饼图 scatter:散点图
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
          // 是否显示每一个柱状图的数据
          label: {
            show: true, // 是否显示每一个柱状图的数据
            color: '#000', // 数据颜色
            fontWeigth: 'bloder',
            position: 'top', //文字位置
            // 数据格式化 {a}：系列名。{b}：数据名(x轴的数据名){c}：数据值。
            formatter: '{b}\n{c}%',
          },
          /* 柱状图相关配置 */
          colorBy: 'data', // series 同一系列的一个颜色 data 每个数据都使用不同颜色
          barWidth: 30, //柱状图的宽度
          /* 折线相关配置 */
          // 线条是否光滑
          smooth: true,
          // 折线上小圆点的大小
          symbolSize: 6,
          // 折线下方区域的设置
          areaStyle: {
            opacity: 0.4,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#2666e6" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]

xAxis与yAxis中的配置项

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)
    }
  }
}

dataZoom配置：用于区域缩放，一般用于数据过多

     // 用于区域缩放，一般用于数据过多
	  dataZoom: {
	    // 数据窗口范围的起始数值 可以是数组下标，也可以是数组本身的值
	    startValue: 0,
	    // 数据窗口范围的结束数值 可以是数组下标，也可以是数组本身的值
	    endValue: 5,
	    // 缩放类型 inside slider select
	    type: 'inside'
	  },

title

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

legend

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

tooltip

    // 提示框
    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'
        }
    },

// 网格
grid

    grid: {
        // 是否显示直角坐标系网格的边框，默认是false
        show: true,
        // grid 区域是否包含坐标轴的刻度标签。
        containLabel: false,
        // 网格背景色，默认是透明色，使用此属性，show必须为true
        backgroundColor: "rgba(128, 128, 128, 0.5)",
        // 网格的边框色
        borderColor: "red",
        // 整个canvas 距离四周的边距
        top: '25',
        left: "3%",
        right: "4%",
        bottom: "1%",
      },
    },

toolbox 主要用于对已生成的图表做一些数据调整，保存为图片等功能。

toolbox:{
		    show:true,//显示工具箱
			feature:{
					dataZoom:{
						yAxisIndex:'none'
					},//数据缩放
					dataView:{readOnly:false},//数据视图只读
					magicType:{type:['line','bar']},//魔法类型
					restore:{},//重置
					saveAsImage:{}//保存图片
				}
		}