3.通用配置项

 

        var option = {
            title: { //设置标题
                text: '主标题',
                subtext: '副标题',
                textStyle: {//设置主标题样式
                    color: '#fff',//设置字体颜色
                    fontStyle: 'normal',//设置文字字体'normal'、'italic'、'oblique'
                    fontWeight: 'bolder',//设置字体粗细'normal'、'bold'、'bolder'、'lighter'
                },
                itemGap:10,//设置主副标题间距
                borderWidth:2,//设置边框线框
                borderColor:'#ccc',//设置边的颜色
                borderRadius: 5, // 标题边框圆角
                backgroundColor:'yellow',//设置背景颜色
            },
            legend: {//设置图例
                type:'',//scroll设置为滚动图例，默认为plain
                orient: 'horizontal',//图例对齐方式为水平对齐，垂直对其：'vertical'
                data: [] //data的值需要和series数组中的某组数据的name值一致
            },
            tooltip: {//提示框组件
                 trigger: '','axis',//设置提示框触发方式。'item',移动到数值上才会触发。'axis',移动到数值附近后自动提示并且有条贯穿数值的竖线
                 triggerOn:'',//提示框触发时机
　　　　　　　　　　formatter: "{a}<br/>{b}:{c}"//提示框显示内容            },            

            },

　　　　　　　　toolbox: {//工具箱                
　　　　　　　　　　　　feature: {                    
　　　　　　　　　　　　saveAsImage: {},//保存图片 

                    restore: {},//配置还原
                    dataView: {},//数据视图
                    dataZoom: {},//区域缩放
                    magicType: {//数据类型切换
                        type: ['line', 'bar', 'stack']
                    }

                }

　　　　　　　xAxis: { type:'category'//设置类目轴
　　　　　　　　　 boundaryGap:'false',//紧挨边缘
            }, 
            yAxis: {
　　　　　　　　　type:'value'，//设置数值轴
　　　　　　　　　scale:'ture'//脱离0比例缩放
　　　　　　　}, 
            series: {
　　　　　　　　　　smooth:'true'，//把线条变得平滑
　　　　　　　　　　lineStyle:{//设置线条的样式
　　　　　　　　　　　　color:'blue'
　　　　　　　　　　}，
　　　　　　　　　stack:'总量'//设置堆叠图效果，要实现效果两个组的stack值要一致
　　　　　　　　　markPoint:{//设置标记点
                    data:[
                        {
                            type:'max',name:"最大值",
                            symbol:'diamond',//设置标记点图形，diamond是菱形，arrow是三角形
                            symbolSize:20,//设置标记点图形大小
                            itemStyle:{//设置标记点样式
                                normal:{color:'red'}
                            }
                        }
                    ]
                },
                markLine:{//设置标记线
                    data:[
                        {
                        type:'average',name:'平均值',
                        itemStyle:{//设置标记线样式
                            normal:{borderType:'dotted',color:'darkred'}
                        }
                    }
                    ]
                }，
　　　　　　　　　markArea:{//标注区间
　　　　　　　　　　　　data:[ 
　　　　　　　　　　　　　[
　　　　　　　　　　　　　{xAxis:'星期一'},//开始位置，内容为x轴值
　　　　　　　　　　　　　{xAxis:''星期二}//结束位置，内容为x轴值
　　　　　　　　　　　　],
　　　　　　　　　　　　[

　　　　　　　　　　　　　{xAxis:'星期三'},//开始位置，内容为x轴值
　　　　　　　　　　　　　{xAxis:''星期四}//结束位置，内容为x轴值

　　　　　　　　　　　　]
　　　　　　　　　　　]
            },
        };

 

 

下面关于tooltip中formatter的使用：

　　模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 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}（百分比）

 

　　formatter回调函数

        formatter: function (arg) {

            return arg.name + ':' + arg.data

        }