ECharts学习记录

一、ECharts在GitHub的地址以及需要引入文件地址：

　　1、Github地址：https://github.com/ecomfe/echarts

　　2、官网下载文件地址：http://echarts.baidu.com/download.html

二、各类配置参数：

　　1、tilte：（标题：详情见链接http://echarts.baidu.com/option.html#title）　

title: {
          show: true/false,    //控制是否显示标题，默认为true
          text: '标题内容',
          link: '主标题文本超链接',    //默认为''
          target: '指定窗口打开主标题超链接。' ,   //可选blank/self
          textStyle: {
             color: '',
             fontFamily: 'serif/'monospace/Arial/Courier New/Microsoft YaHei',
             fontSize: '',
             fontStyle: 'normal/italic/oblique',
             align: 'left/center/right'
             ...
         },
        subtext: '副文本标题'，    //可用\n换行  (sublink,subtarget等与text相同)
       ...
}

　　2、legend：（图例组件：详情见链接http://echarts.baidu.com/option.html#legend.type）

legend: {
    type: 'plain/scroll',      //默认为plain，当使用 'scroll' 时，需要细节配置
    show: true/false,
    zlevel: 5,    //所有图形的 zlevel 值。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    left: 'center/left/right' / 20% / 20px,    //图例组件离容器左侧的距离
    top: 'top/middle/bottom' / 20% / 20px,    //图例组件离容器顶部的距离
    width: 'auto' / 200px,    //图例组件的宽度。默认自适应
    height: 'auto' / 200px,    //图例组件的高度。默认自适应
    orient: 'horizontal/vertical',    //图例列表的布局朝向
    align: 'auto/left/right',     //图例标记和文本的对齐
    padding: [5]/[5, 10]/[2, 3, 4, 5],    //图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
    itemGap: 10,     //图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 25,    //图例标记的图形宽度。
    itemHeight: 14,    //图例标记的图形高度。
    formatter: 'Legend {name}' / function (name) {
        return 'Legend ' + name;
    }    //用来格式化图例文本，支持字符串模板和回调函数两种形式。
    selectedMode: true/false / 'single/multiple',    //图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭;或者设成 'single' 或者 'multiple' 使用单选或者多选模式。
    inactiveColor: '#CCC',    //图例关闭时的颜色
    selected: {
        // 选中'系列1'
        '系列1': true,
        // 不选中'系列2'
        '系列2': false
    },    //图例选中状态表。
    textStyle: {...}    //同title
    ...
}

3、xAxis：（横坐标：详情见链接http://echarts.baidu.com/option.html#xAxis）

xAxis: {
  show: true,
  gridIndex: 0,    //x 轴所在的 grid 的索引，默认位于第一个 grid。
  position: 'bottom',    //默认 grid 中的第一个 x 轴在 grid 的下方，第二个 x 轴视第一个 x 轴的位置放在另一侧。
  offset: 0,    //X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
  type: 'category/value/time/log',    //'value' 数值轴，适用于连续数据。
     //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
    //'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
    //'log' 对数轴。适用于对数数据。
  name: '坐标轴名称',
  nameLocation: 'start/middle/center/end',
  nameTextStyle: {...},   //同title
  nameGap: 15,    //坐标轴名称与轴线之间的距离
  nameRotate: 45,    //坐标轴名字旋转，角度值
  inverse: false,    //是否是反方向坐标轴
  boundaryGap: ['20%', '20%'] / true/false,     //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
  min: 'dataMin' / 1,    //坐标轴刻度最小值
  max: 'dataMax' / 20,    //坐标轴刻度最大值
  scale: false,    //只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。 在设置 min 和 max 之后该配置项无效。
  splitNumber: 5,    //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。 在类目轴中无效。
  minInterval: 0,    //自动计算的坐标轴最小间隔大小。只在数值轴或时间轴中（type: 'value' 或 'time'）有效
  maxInterval: ,    //自动计算的坐标轴最大间隔大小。 例如，在时间轴（（type: 'time'））可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。
  interval: number，    //强制设置坐标轴分割间隔
  logBase: 10,    //对数轴的底数，只在对数轴中（type: 'log'）有效。
  silent: false/true,     //坐标轴是否是静态无法交互。
  triggerEvent: false,    //坐标轴的标签是否响应和触发鼠标事件，默认不响应。
  axisLine: {
    show: true,    //是否显示坐标轴轴线。
    onZero: true,    //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
    onZeroAxisIndex: number,    //当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上。
    symbol: 'none/arrow / ['none, 'arrow'']',    //轴线两边的箭头。
    symbolSize: [10, 15],    //轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。
    lineStyle: {
      color: '#333',    //{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
            }, {
                offset: 1, color: 'blue' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        }
      width: 1,
      type: 'solid/dashed/dotted',
      shadowBlur: '',    //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。示例：
        {
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10
        }
      shadowColor: '#333',    //阴影颜色。支持的格式同color
      shadowOffsetX: 0,    //阴影水平方向上的偏移距离。
      shadowOffsetY: 0,    //阴影垂直方向上的偏移距离。
      opacity: 1,     //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
    }
  },
  axisTick: {
    show: true,    //是否显示坐标轴刻度
    alignWithLabel: false,    //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
    interval: ,    //坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
    inside: false,    //坐标轴刻度是否朝内，默认朝外。
    length: 5,    //坐标轴刻度的长度
    lineStyle: {同axisLine.lineStyle}
  },
  axisLabel: {
    show: true,    //是否显示刻度标签
    interval: auto/2,    //坐标轴刻度标签的显示间隔，在类目轴中有效。
    inside: false,    //刻度标签是否朝内，默认朝外。
    rotate: 40,    //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。 旋转的角度从 -90 度到 90 度。
    margin: 8,    //刻度标签与轴线之间的距离。
    formatter: '{value} kg' / function (value, index) {
        // 格式化成月/日，只在第一个刻度显示年份
        var date = new Date(value);
            var texts = [(date.getMonth() + 1), date.getDate()];
            if (index === 0) {
                texts.unshift(date.getYear());
            }
            return texts.join('/');
        },    //刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
    showMinLabel: 'null/true/false',    //是否显示最小 tick 的 label。
    showMaxLabel: 'null/true/false',    //是否显示最大 tick 的 label。
    color: '#333',
    fontSize: 14,
    fontStyle: 'normal/italic/oblique',
    fontWeight: 'bold/normal/600',
    fontFamily: 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...,
    align: 'center/left/right',
    verticalAlign: 'middle/top/bottom',
    lineHeight: 56,
    backgroundColor: '#333',
    borderColor: '#333',
    borderWidth: 2,
    borderRadius: 4,
    padding: 2,
    shadowColor: 'transparent',    //文字块的背景阴影颜色。
    shadowBlur: 0,     //文字块的背景阴影长度。
    shadowOffsetX: 0,    //文字块的背景阴影 X 偏移。
    shadowOffsetY: 0,    //文字块的背景阴影 Y 偏移
    textBorderColor: 'transparent',    //文字本身的描边颜色。
    textBorderWidth: 0,    //文字本身的描边宽度
    textShadowColor: transparent,    //文字本身的阴影颜色。
    textShadowBlur: 0,    //文字本身的阴影长度
    textShadowOffsetX: 0,    //文字本身的阴影 X 偏移
    textShadowOffsetY: 0,    //文字本身的阴影 Y 偏移
    rich: {        //在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
        color  ~  shadowOffsetY  ...    //样式同上color ~ shadowOffsetY
    }
  },
  splitLine: {
    show: true,
    interval: auto;    //坐标轴分隔线的显示间隔，在类目轴中有效。
    lineStyle: {
        width: 1,
        type: 'solid/dotted/dashed',    //分割线类型
        color: #CCC,
        shadowBlur: ,    //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果    //{ shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10 }
        shadowColor: '#CCC',    //阴影颜色。支持的格式同color。
        shadowOffsetX: 0,    //阴影水平方向上的偏移距离。
        shadowOffsetY: 0,    //阴影垂直方向上的偏移距离。
        opacity: 0    //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
    }
  },
  splitArea: {
    interval: auto,    //坐标轴分隔区域的显示间隔，在类目轴中有效。
    show: true,
    areaStyle: {
        color  ~  opacity    //同上
    }
  },
  data: [
    {
        value: string    //单个类目名称。    // 所有类目名称列表
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ]
}  

4、yAxis:  （纵坐标：详情见链接http://echarts.baidu.com/option.html#yAxis）

yAxis: {
    position: 'left/right',
    type: 'value',    //类型默认为value
    //其余参数都同xAxis
} 

5、tooltip:（提示框组件：详情见链接http://echarts.baidu.com/option.html#tooltip）

6、series:（系列列表：详情见链接http://echarts.baidu.com/option.html#series）