ECharts常用整理

 option = { //可配置选项
    title : { 
        text: '某楼盘销售情况', //标题，每个图表最多仅有一个标题
        subtext: '纯属虚构'  //副标题文本，'\n'指定换行
    },
    tooltip : {  //提示框，鼠标悬浮交互时的信息提示
        trigger: 'axis',
        axisPointer:{
            //坐标轴指示器，默认type为line，可选为：'line' | 'cross' | 'shadow' | 'none'(无)，指定type后对应style生效，见下 
			//lineStyle设置直线指示器（详见lineStyle）, 
			//crossStyle设置十字准星指示器（详见lineStyle）, 
			//shadowStyle设置阴影指示器（详见areaStyle），areaStyle.size默认为'auto'自动计算，可指定具体宽度
	        type: 'line',
		    lineStyle: {
		        color: 'rgba(255,255,255,.3)',
		        width: 2,
		        type: 'solid'
		    }
	    }
    },
    legend: {  //图例，每个图表最多仅有一个图例
               //可设置itemWidth（图例图形宽度），itemHeight（图例图形高度），textStyle
        data:['意向','预购','成交']   //图例内容数组
    },
    toolbox: {  //工具箱自定义功能
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,  //是否启用拖拽重计算特性，默认关闭
    xAxis : [//直角坐标系中横轴数组，最多同时存在2条横轴，2条同时存在时默认第一条安放于底部，第二条安放于顶部
        {
            type : 'category',  //'category(默认)' | 'value' | 'time' | 'log'
            boundaryGap : false,  //类目起始和结束两端空白策略，默认为true留空，false则顶头 **注意不同类型设置格式不同**
            splitLine：{  //横向分隔线
              show:true,
              lineStyle:{
                 color:'002F4C'
              }
            },
            axisLine：{  //坐标轴线
              lineStyle:{
                 color:'rgba(255,255,255,.3)'
              }
            },
            axisLabel:{
              textStyle:{
                 color:'#fff',
                 fontSize:18
              },
              formatter:function(value,index){
                if(value%2==0){
                   return ''
                }else{
                   return value
                  }
              }
            },
            data : ['1','2','3','4','5','6','7','8','9','10','11','12']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'去年月值',
            type:'line',
            symbol:'none',   //不显示markPoint 
            smooth:true,      //true为平滑曲线
            barGap:'7%',      //X轴间距
            itemStyle: {
              normal: {
                 lineStyle: {
                     //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
		            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
		                offset: 0,
		                color: '#ff0000'
		            },{
		                offset: 1,
		                color: '#ff6666'
		            }]),
                     width:4,
                     shadowColor:'rgba(255,255,255,.8)',  //阴影色彩
                     shadowBlur:10,   //阴影模糊度
                     shadowOffsetX:0,
                     shadowOffsetY:0
                 }
              }
            },
            data:[10, 12, 21, 54, 260, 830, 710]
        },
        {
            name:'本年月值',
            type:'bar',  //柱状图
            barWidth:'22',  //width
            itemStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
		                offset: 0,
		                color: '#13bdfa'
		            },{
		                offset: 1,
		                color: '#00263f'
		            }]),
                   barBorderRadius:[7,7,0,0]  //柱状图圆角
                 }
            },
            data:[30, 182, 434, 791, 390, 30, 10]
        }
    ]
};
                    

工具箱自定义功能回调处理，见下图：