echarts使用笔记五:echarts的Zoom控件

option = {
            title: {
                text: '趋势'
            },
            tooltip : {
                trigger: 'axis',

                show:true,

                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            dataZoom: {
                show: true,
                start : 30,
                end : 70
            },
            legend: {
                 //itemWidth:50,
                 data:['趋势']
            },
            animation : 'true',
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,

                x : 50,
                x2 : 50,
                y : 90,
                y2 : 70  // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
            },            

            xAxis : [ {
                axisLabel : {
                    interval : 'auto', //横坐标自适应变化
                },
                splitLine : {
                    show : true,
                    lineStyle : {
                        type : 'dashed'
                    }
                },
                data:['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15'],
            } ],

            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        formatter: '{value} %',
                    }
                },

            ],
            series : [
                {
                    name:'趋势',
                    data: [10,12,19,15,9,11,16,22,17,11,15,12,14,11,13],
                    type: 'line',
                    showAllSymbol : false,
                    smooth : true,

                    itemStyle:{
                         normal:{
                             color:'rgba(139,26,26,1)',

                         },
                    }
                }

            ],

        };