Echarts学习之路2（基本配置项）

title:标题组件，包含主标题和副标题。

title:{
      text:"",//主标题
      link:"",//主标题文本超链接
      target:"",//指定窗口打开主标题超链接。'self' 当前窗口打开,blank' 新窗口打开
      textStyle:{//主标题样式
         color:"#333",
         ......
     }，
　　subtext:'',//副标题文本，支持使用\n换行
      sublink:""//副标题文本超链接
      subtarget:'blank/self'
      subtextStyle:{}//副标题样式
      textAlign:"auto/left/right/center",//整体（包括text和subtext）的水平对齐
      textVerticalAlign:"auto/top/bottom/middle",//整体（包括text和subtext）的垂直对齐
      padding:[default:5],//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
      itemGap:[default:10],//主副标题之间的间距
      zlevel:[default:0],//所有图形的 zlevel 值,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
      z:[default:2],//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
      left:'auto'/20%/'right'/'center',//grid 组件离容器左侧的距离。
      right:'',
      top:"",
      bottom:"",
      backgroundColor:'transparent',//标题背景色，默认透明。
      borderColor:[default:'#ccc'],//标题的边框颜色。支持的颜色格式同 backgroundColor。
      borderWidth:[default:0],
      borderRadius:[default:0],
      ....
}

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

legend:{
         type:"plain/scroll",//'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
         id:"",//组件ID，指定则可用于在 option 或者 API 中引用组件。
         show:true/false,
         zlevel:[default:0],
         z:[default:2],
         left:'',
         top:'',
         right:'',
         bottom:'',
         width:'',//图例组件的宽度。默认自适应。
         height:'',
         orient:'horizontal/vertical',//图例列表的布局朝向。
         align:'',//图例标记和文本的对齐。默认自动
         padding:[default:5],//图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
         itemGap:[ default: 10 ],//图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
         itemWidth:[ default: 25 ],//图例标记的图形宽度。
         itemHeight:[ default: 14 ],
         symbolKeepAspect:[default:true],//如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。
         formatter:[default:null],//用来格式化图例文本，支持字符串模板和回调函数两种形式,
                                               示例：// 使用字符串模板，模板变量为图例名称 {name}
                                                       formatter: 'Legend {name}'
                                                        // 使用回调函数
                                                        formatter: function (name) {
                                                                     return 'Legend ' + name;
                                                        }
        selectedMode:[default:true],//图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
        inactiveColor:[default:'#ccc'],//图例关闭时的颜色。
        textStyle:{},//图例的公用文本样式。
        tooltip:{show:true},//图例的 tooltip 配置，配置项同 tooltip。默认不显示，可以在 legend 文字
                                      很多的时候对文字做裁剪并且开启 tooltip,
                                       legend: {
                                                     formatter: function (name) {
                                                                    return echarts.format.truncateText(name, 40,
                                                                          '14px Microsoft Yahei', '…');
                                                     },
                                                      tooltip: {
                                                                    show: true
                                                       }
                                       }
         data:[{                  //图例的数据数组。
               name:"系列1"，
               icon:"circle",// 强制设置图形为圆。
               textStyle:{color:'red'},//// 设置文本为红色
          }],
      ......

}

　　grid:直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。

grid:{
       id:"",
       show:[default:false],//是否显示直角坐标系网格。
       zlevel:[default:0],
       z:[default:2],
       left:'10%',
       right:"",
       top:60,
       bottom:60,
       width:[default:auto],
       height:[default:auto],
      containLabel:[default:false],//grid 区域是否包含坐标轴的刻度标签。
      backgroundColor:"#ccc",
      ....
     tooltip:{
                show:true,//是否显示提示框组件，包括提示框浮层和 axisPointer。
                trigger:'item',//触发类型。item/axis,item:数据项图形触发，主要在散点图，饼图等无类目轴的
                图表中使用。axis:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                position:,// // 绝对位置，相对于容器左侧 10px, 上侧 10 pxposition: [10, 10]// 相对位置，放
                置在容器正中间position: ['50%', '50%']
                formatter:,//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
                padding:5
                textStyle:{},
                   .....
     }
}

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

xAaxis:{

        id:,
        show:true,
        gridIndex:0,//x 轴所在的 grid 的索引，默认位于第一个 grid。
        position:'top/bottom',//x 轴的位置。
        offset:0,//X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
        type:"category".//,坐标轴类型,'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
         name:"",//坐标轴名称。
         nameLocation:'start/middle/center/end',//坐标轴名称显示位置。
         nameTextStyle:{}//坐标轴名称的文字样式。
         nameGap:15,坐标轴名称与轴线之间的距离。
         nameRotate:null,//坐标轴名字旋转，角度值。
         inverse:false,//是否是反向坐标轴
         boundaryGap: ['20%', '20%'],//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
         min:null.,//坐标轴刻度最小值,可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
         max:null,//   坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
         scale:false,//只在数值轴中（type: 'value'）有效,是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用
         splitNumber:5,//坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在类目轴中无效
         minInterval:0,//自动计算的坐标轴最小间隔大小。可以设置成1保证坐标轴分割刻度显示成整数,只在数值轴或时间轴中（type: 'value' 或 'time'）有效。
         maxInterval:,//自动计算的坐标轴最大间隔大小。在时间轴（（type: 'time'））可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。只在数值轴或时间轴中（type: 'value' 或 'time'）有效。
         interval:,//强制设置坐标轴分割间隔。
         logBase:10,//对数轴的底数，只在对数轴中（type: 'log'）有效。
         axisLine:{//坐标轴轴线相关设置。
                   show:true,
                   onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴
                  且包含 0 刻度时有效。
                   symbol:'none',//轴线两边的箭头,
                   lineStyle:{},//坐标线样式
         }，
        axisTick:{//坐标轴刻度相关设置。
                    show:true,
                    length:5,
                    inside:false,
                    lineStyle:{},
                    .....
        },
        axisLabel:{//坐标轴刻度标签的相关设置。
           ....
        }
        splitLine:{//坐标轴在 grid 区域中的分隔线。
                  show:true,
                  interval:'auto',//坐标轴分隔线的显示间隔，
                  lineStyle:{}
        },
        splitArea:{//坐标轴在 grid 区域中的分隔区域，默认不显示。
                 show:true,
                  areaStyle:{}
        },
        data:[{
               value:"",//单个类目名称。
               textStyle:{},//类目标签的文字样式。
          }],
        ......
}

　　

　yAxis:直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠.

与xAxis一致。

tooltip:提示框组件。

tooltip:{
        show:true,
        trigger:"item",//item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。axis:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
        axisPointer:{  //坐标轴指示器配置项。
          type:"line",   //line:直线指示器，shadow:阴影指示器，none:无指示器，cross:十字准星指示器
          axis:"auto",//指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 ，可以是x,y,radius,angle
          snap:false,//坐标轴指示器是否自动吸附到点上。默认自动判断。这个功能在数值轴和时间轴上比较有意
          义，可以自动寻找细小的数值点。
          z:,
           label:{//坐标轴指示器的文本标签。
             show:false,
             precision:"auto",//文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2
                                        表示保留两位小数
             formatter:null,//文本标签文字的格式化器。
             margin:3,//label 距离轴的距离。
             color:"#fff",//
             ......
            },
           lineStyle:{}//axisPointer.type 为 'line' 时有效。
           shadowStyle:{}//axisPointer.type 为 'shadow' 时有效。
           crossStyle:{},//axisPointer.type 为 'cross' 时有效。
           .......
        },
       .......
}

　　toolbox:工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

toolbox:{
           id:"",
           show:true,
           orient:"horizontal",//工具栏 icon 的布局朝向。
           itemSize:15,//工具栏 icon 的大小。
           itemGap:10,//工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
           showTitle:true;//是否在鼠标 hover 的时候显示每个工具 icon 的标题。
           ......
}

　　textStyle:全局的字体样式。

textStyle:{
        color:"#fff",
        fontStyle:"normal",
        fontWeight:"normal",
        fontFamily:"sans-serif",
        fontSize:12,
        lineHeight:,
        width:,
        height:,
        textBorderColor:"",
        textBorderWidth:"",
        textShadowColor:"transparent",
        textShadowBlur:0,//文字本身的阴影长度。
        textShadowOffsetX:0,//文字本身的阴影 X 偏移。
        textShadowOffsetY:0//文字本身的阴影 Y 偏移
}

series:系列列表。每个系列通过 type 决定自己的图表类型

series:[
   type:"line",//折线图
   name:"",//系列名称，
   coordinateSystem:"cartesian2d",//该系列使用的坐标系,'cartesian2d':二维直角坐标系，'polar'：使用极坐标系，通过 polarIndex 指定相应的极坐标组件
    xAxisIndex:0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
    yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
    polarIndex:0,//使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。
    symbol:"emptyCircle",//标记的图形。
                                ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
                                'pin', 'arrow', 'none',可以通过 'image://url' 设置为图片，其中 URL 为图片的链
                                 接，或者 dataURI。URL 为图片链接例如：
                                    'image://http://xxx.xxx.xxx/a/b.png'
    symbolSize:4,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
    symbolRotate:,//标记的旋转角度
    symbolKeeoAspect:false,//如果 symbol 是 path:// 的形式，是否在缩放时保持该图形的长宽比
    symbolOffset:[0,0],//标记相对于原本位置的偏移,例如 [0, '50%'] 就是把自己向上移动了一半的位置，在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
    showSymbol:true,//是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
    cursor:"poniter",
    step:false,//是否是阶梯线图
    label:{
        show:false,//默认不显示
        position:"top",   //标签的位置。
        distance:5,   //距离图形元素的距离,
        rotate:,   //标签旋转。从 -90 度到 90 度。正值是逆时针。
        offset:,   //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
        color:""
        ......
     },//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
     itemStyle:{  //折线拐点标志的样式。
      ......
     },
     lineStyle:{}//线条样式。
     areaStyle:{},//区域填充样式。
     emphasis:{},//图形的高亮样式。
     smooth:false,//是否平滑曲线显示。
     data:[{name:"",value:"",symbol:"circle",....}],//系列中的数据内容数组。数组项通常为具体的数据项。
    ......
]

　　type:"pie/bar/lines" ........

　animation:　是否开启动画。