echarts笔记

1.使用步骤
    1)非按需引入
        <!-- 1.为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- 2.ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
        // 3.基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        // 4.设置配置项
        var option = {}
        // 5.为echarts对象加载数据 
        myChart.setOption(option); 
    2)按需引入
        <!-- 1.为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- 2.ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
        // 3.路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 4.按需引入图标
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 5.基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));     
                // 6.设置配置            
                var option = {};        
                // 7.为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
        
2.配置项名称解释
    1)echart:指的是完整的图表
    2)axis:坐标轴
    3)xAxis:x轴
    4)yAxis:y轴
    5)grid:定位坐标轴
    6)legend:图列
    7)dataRange:指的是直立控件(比如调整颜色让符合范围内的地图区域高亮)
    8)dataZoom:用于区域缩放，从而能自由关注细节的数据信息
    9)toolbox:工具栏
    10)tooltip:提示框组件，鼠标移到图表上的提示框
    11)timeline:时间轴
    12)series:系列，存放数据的数组
    
3.配置项
    1.直角系
        1)grid网格对象(图表是在网格内部的，网格的左下边框对应的是y和x轴，网格相当于一个标签，可以设置边框和背景色等)
            1.x/y:左上角距离容器边沿的距离
            2.x2/y2:右下角距离容器边沿的距离
            3.borderColor:网格边框颜色
            4.width/height:通过宽高直接定义图表的大小，定义width/height，x2/y2不起作用
            5.backageColor:背景色
            6.borderWidth:边框厚度
        2)axis坐标轴
            坐标轴有三种类型:类目型、数值型、时间型
            类目型:需要指定类目列表，坐标地方有且仅有指定类目坐标。
            数组型:需要指定数组区间，不指定时则自动计算数值范围，坐标轴内包含数值区间内容全部区间。
            时间型:时间型坐标轴用法同数值型，只是目标处理和格式化显示时会自动转变为时间，并且随着时间维度的不同自动切换需要显示的时间密度。
        3)xAxis/yAxis(数组里面放对象，每个对象代表一个x/y轴)(一般情况下单个 grid 组件最多只能放上下两个 x/y 轴，多于两个 x/y 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。)
            1.type
                'category' 类目型，为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
                'value' 数值型，自动去数值中最大和最小值作为轴的最大和最小值，然后自动分配刻度。
                'time' 时间型，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
            2.show
                true:坐标轴显示
                false:坐标轴隐藏
            3.position
                top:x轴在网格上面
                bottom:x轴在网格下面
            4.name
                数组型和时间型独有的，用来定义坐标轴的名称
            5.namelocation
                用来定义坐标轴名称的位置,默认放在最后面。
            6.nameTextStyle
                定义坐标轴名字样式
            7.boundaryGap
                坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
                类目型:
                    true:坐标轴和网格之间有留白
                    false:没有
                数值型和时间型
                    [0,0.5]:坐标轴最大值和最小值离两边的距离，会自动补全空余地方的值，0.5代表百分之五十
            8.min/max
                指定数值型和时间型坐标轴的最小和最大值
            9.sacle
                是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。比如股票的波动如果比较小，那么在图表中看起来就比较不明显
                那么把股票趋势位置进行放大，坐标轴不显示0轴，那么图表会很可观。
            10.splitNumber坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
                    在类目轴中无效。    
            11.axisLine轴线样式
                show:是否显示
                lineStyle:定义样式
                    type:solid实线
                    width:宽度
                    onZero:是否跟零刻度对齐
            12.axiosLabel轴文本
                interval:轴文本的显示间隔，在类目轴中有效。默认为auto自适应，0代表全部显示 ，2代表每隔两个显示一个
                        function(index,name){
                            //相当于值为1
                            return index%2===0?name:''
                        }
                rotate:旋转
                margin:文本与左边轴的边距
                clickable:是否可以点击，鼠标移到文本上实现小手
                textStyle:文本样式
                formatter:字符串或者函数,'{value}月'，value是data里面的值，function(v){}
            13.axisTick轴中小锯齿
                show:是否显示
                inside:用来指定小锯齿显示在网格内部还是外部
                length:长度
                lineStyle:样式
                onGap:true锯齿在值与值之间，false锯齿在值下面
                interval:坐标轴刻度的显示间隔，在类目轴中有效。默认为auto自适应，0代表全部显示 
            14.splitLine分割线
                onGap:true分割线在值与值之间，false锯齿在值下面
                lineStyle:分割线样式,样式支持数组设置多种颜色
            15.splitArea分割线区间
            16.data
                类目型独有的，指定坐标轴显示的值，和值的样式
                // 1.所有类目名称列表
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                // 2.每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
                data: [{
                    value: '周一',
                    // 突出周一
                    textStyle: {
                        fontSize: 20,
                        color: 'red'
                    }
                }, '周二', '周三', '周四', '周五', '周六', '周日']        
        4)series(data放真正图表数据，轴数据放再轴data里面)    
            1.通用
                1.type:图表类型
                2.name:图表名字，会用在图列或提示框等关联上
                3.clickable:默认true，数据图形是否有点击事件                
                4.data
                    图标真正的数据，可以把data里面的每个元素变成对象进行个性化设置    
            2.折线图
                1.stack堆积
                    相同stack名字的对象会堆积在一起
                2.xAxisIndex/yAxisIndex
                    使用那一条轴，0代表第一条
                3.symbol
                    拐点形状，可以通过 'image://url' 设置为图片
                4.symbolSize
                    拐点大小
                5.symbolRotate
                    拐点旋转角度
                6.showAllSymbol
                    是否显示所有拐点，有些时候x轴坐标会自动计算显示个数，这样同样会隐藏拐点，那么可以通过这个属性把隐藏的拐点显示出来
                7.smooth
                    是否平滑曲线显示。
                8.legendHoverLink
                    是否启用图例 hover 时的联动高亮。
                9.itemStyle:折线每项的样式
                    normal一开始就显示
                        color:折线和折线拐点和图列主色
                        lineStyle
                            width:折线宽度
                            color:控制线颜色的优先级比上面那个color高
                        areaStyle:折线图变成面积图
                            color:面积颜色
                        borderColor:拐点颜色
                        borderWidth:拐点大小
                        label:拐点值
                            show是否展示
                            position:值位置
                            formatter:自定义拐点值,字符串:'{a}{b}{c}',a图表名称，b x轴值，c y轴值，函数:function(params){} params含有所有图形数据
                            textStyle:文本样式
                    emphasis与normal一样，值在鼠标移上去才显示
            3.柱形图
                itemStyle:柱状每项的样式
                    normal一开始就显示
                        borderType:柱状边框类型
                        borderWidth:边框宽度
                        borderColor:边框颜色
                        barBorderRadius:边框圆角
                        color:柱形图颜色，字符串:指定所有颜色，函数:function(params){} params含有所有图形数据,可以根据所有控制不同颜色
                    emphasis与normal一样，值在鼠标移上去才显示
                barGap
                    同一类名下，柱形图之间的距离
                barCategoryGap
                    类名与类名之间的距离
                barWidth
                    柱条的宽度，不设时自适应。
                barMinWidth/barMaxWidth
                    柱条最小最大宽度
            4.k线图(股票图)    
                barMinWidth/barMaxWidth:指定柱的最小和最大宽度
                itemStyle:k线每项的样式
                    normal一开始就显示
                        color/color0:阳线/阴线图形的颜色。
                        lineStyle
                            width:中间线宽度
                            color/color0:阴阳中间线颜色
                    emphasis与normal一样，值在鼠标移上去才显示    
                data:[[2320.26, 2320.26, 2287.3,  2362.94]]二维数组的每一数组项（上例中的每行）是渲染一个box，它含有四个量值，依次是：[开盘值, 收盘值, 最低值, 最高值]
            5.饼图
                itemStyle:饼图每项的样式
                    normal一开始就显示
                        borderColor:每个扇形边框颜色
                        borderWidth:每个扇形边框宽度
                        label:饼图图形上的文本标签
                            position:标签位置，outside外面，inside里面
                            distance:文本离圆心的距离，0.7代表百分之七十
                        labelLine:标签的视觉引导线样式
                            show:是否展示
                    emphasis与normal一样，值在鼠标移上去才显示    
                center:饼图圆心在图表中的位置，[x,y]
                radius:饼图的半径,number：直接指定外半径值,string：'20%'，表示直径为容器高宽中较小一项的 20% 长度。
                       Array：数组的第一项是内半径，第二项是外半径。
                startAngle:起始角度
                clockwise:饼图的扇区是否是顺时针排布。
                roseType:是否展示成南丁格尔图，可选择两种模式：
                    'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
                    'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
                selectedMode:选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。
                selectedOffset:选中扇区的偏移距离。
            6.仪表盘
                startAngle/endAngle:仪表盘起始/结束角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                splitNumber:仪表盘刻度的分割段数。
                axisLine:仪表盘轴线相关配置。
                    show:是否展示
                    lineStyle:仪表盘轴线样式。
                        color:颜色，[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]，百分20之前是#91c7ae颜色，其它类似。
                        width:轴宽度
                axisTick:没份上面的锯齿
                axisLabel:刻度标签
                splitLine:分隔线样式。
                pointer:仪表盘指针。
                    color:颜色，没有指定颜色默认跟每项颜色一样，指定颜色就是指定颜色
                title:仪表盘标题。
                    offsetCenter:相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
                detail:描述
            7.漏斗图
                itemStyle:饼图每项的样式
                    normal一开始就显示
                        label:文本标签
                            position:标签的位置,left左边，inner里面
                        labelLine:标签的视觉引导线样式
                            length:长度,auto让文本垂直对齐
                            show:是否展示
                    emphasis与normal一样，值在鼠标移上去才显示
                maxSize/minSize:顶端最大值和低端最小值，默认是百分之百和0
                gap:数据图形间距。
            8.地图
                itemStyle:饼图每项的样式
                    normal一开始就显示
                        color:颜色，字符串：设置整个地图的颜色，函数:function(params){} params含有所有图形数据
                        borderColor/borderWidth:边框颜色/宽度
                    emphasis与normal一样，值在鼠标移上去才显示
                selectedMode:选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
                maptype:地图类型，可以是世界地图、中国地图、省份地图。
                hoverable:鼠标移上去是否高亮。
                dataRangeHoverLink:鼠标在直立控件上移动时，地图上是否高亮响应范围内的地图。
                hoverLink:鼠标在地图上移动时，直立控件上显示响应的值。
                mapLocation:可以控制地图的位置，x、y，默认居中center显示，没有设置width/height时，地图大小会自适应
                room:是否支持鼠标滚轮缩放
                scaleLimit:缩放比例设置
                    min/max:最小/最大缩放比例， 0.5/2
                mapValueCalculation:多个拥有相同地图类型的系列会使用同一个地图展现，如果多个系列都在同一个区域有值，ECharts 会对这些值统计得到一个数据。这个配置项就是用于配置统计的方式
                    'sum' 取和。
                    'average' 取平均值。
                    'max' 取最大值。
                    'min' 取最小值。
                mapValuePrecision:地图值保留几位小数，默认0
                showLegendSymbol:在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 legend 组件时生效。
                nameMap:把地图名字换成其它名字，如{'广东':'GD'}
                textFixed:设置文本位置
                geocoord:根据经纬度设置文本位置                     
        5)title标题(标题相当于是个标签，可以对这个标签设置一些样式)
            text:主标题文本，支持使用 \n 换行。
            subtext:副标题文本，支持使用 \n 换行。
            x/y:设置标题的位置
            textAlign:文本对齐方式
            itemGap:主副标题之间的间距。
        6)legend图列
            orient:图例列表的布局朝向(水平或者垂直)。
            itemGap:图例每项之间的间隔
            itemWidth/itemHeight:图列图形宽高
            data:图列数据，可以自定义设置每项样式，可以传一个空字符串手动控制换行
                icon图例图标
            formatter:定义图列名称，字符串:'{name}',name名字，函数:function(name){}
            selectedMode:图例选择的模式，控制是否可以通过点击图例改变图表的显示状态。
        7)dataZoom(用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体)
            orient:控件的布局朝向(水平或者垂直)。
            width/height:宽高，没有设置的话自适应
            backgroundColor:背景色
            filterColor:填充色
            handleColor:拖拽手柄颜色
            handleSize:拖拽手柄大小
            dataBackgroundColor:背景起伏色
            start/end:默认区域缩放的地方，值是百分比
            zoomLock:true缩放的比例固定，false相反
            showDetail:是否展示拖拽数据详情
            realtime:拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
            xAxisIndex/yAxisIndex:设置控件控制那一条轴
        8)tooltip(详情提示框，可以全局设置也可以局部设置(在series中设置))
            show:是否显示
            showContent:是否显示提示框浮层,还保留一条直线提示 
            backgroundColor:背景色
            axisPointer:坐标轴指示器配置项。
                type:类型,'cross' 十字准星指示器。'line' 直线指示器。'shadow' 阴影指示器，会使用shadowStyle里面设置的样式
            textStyle:文本样式
            trigger:触发类型。
                item:鼠标移到图形每项时触发，常在饼图中使用。
                axis:鼠标移到坐标轴里面就触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
            position:提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。数组:[0,0],代表提示框永远在直交系左上角出现
            showDelay:浮层显示的延迟，单位为 ms，默认没有延迟
            hideDelay:浮层隐藏的延迟，单位为 ms
            transitionDuration:提示框浮层的移动动画过渡时间，单位是 s,把showDelay/transitionDuration都设为零时，提示框就是实时出现的
            formatter:提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
                1.字符串模板
                    模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名(x轴内容)，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，
                    此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, 
                    {b}, {c}, {d}在不同图表类型下代表数据含义为：                
                    折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）                
                    散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）                
                    地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）                
                    饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                2.回调函数
                    (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
                    第一个参数 params 是 formatter 需要的数据集
                    第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。 第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，
                    可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。
                    返回值字符串
        9)roamContraller:地图控件，可以控制地图的放大缩小，上下左右移动。
            width/height:控件宽高
            step:每次上下左右移动距离
            mapTypeControl:控件控制的地图类型，必填，否则不生效。
        10)dataRange(直立控件)
            show:是否显示
            orient:显示方式，水平还是垂直
            calculble:是否出现手柄控件
            min/max:最小最大值，必选值
            splitNumber:控件分为几份
            selectedMode:选择模式
            hoverLink:鼠标在地图上移动时，直立控件上显示响应的值。
            realTime:拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
            formatter:字符串:变量{value}和{value2},函数：function(){}
            textStyle:文本样式
            color:控件颜色，最小传两个值
        11)toolbox(工具箱)
            show:是否展示
            x/y:设置位置
            itemSize:每项大小
            color:字符串：每项颜色一样，数组：依次循环使用
            effectiveColor:生效颜色
            feature:各工具配置项。除了各个内置的工具按钮外，还可以自定义工具按钮。注意，自定义的工具名字，只能以 my 开头，例如下例中的 myTool1，myTool2
                mark:画笔
                    show:是否展示画笔
                    lineStyle:画笔画线的样式
                dataZoom:缩放控件
                dataView:数据视图
                    readonly:只读
                    lang:设置数据视图上的三个文本，默认是['数据视图', '关闭', '刷新']
                    optionToContent:自定义 dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串。
                                                      如下示例使用表格展现数据值：
                                    optionToContent: function(opt) {
                                        var axisData = opt.xAxis[0].data;
                                        var series = opt.series;
                                        var table = '<table style="width:100%;text-align:center"><tbody><tr>'
                                                     + '<td>时间</td>'
                                                     + '<td>' + series[0].name + '</td>'
                                                     + '<td>' + series[1].name + '</td>'
                                                     + '</tr>';
                                        for (var i = 0, l = axisData.length; i < l; i++) {
                                            table += '<tr>'
                                                     + '<td>' + axisData[i] + '</td>'
                                                     + '<td>' + series[0].data[i] + '</td>'
                                                     + '<td>' + series[1].data[i] + '</td>'
                                                     + '</tr>';
                                        }
                                        table += '</tbody></table>';
                                        return table;
                                    }
                magicType:动态图形类型切换
                    option:各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项。
                saveAsImage:保存图片设置
4.formatter函数
    formatter函数中可以通过，this.getSeries()获取到series数组