echarts之（1）折线图

刚结束上一个项目，整理一下用到的echarts属性

<script type="text/javascript">
    var imgUrl = null;
    //折线图
    var fileLocation ='${echartsPath}/echarts';
            require.config({
              paths:{ 
                 echarts: fileLocation
             }
    });
    // 作为入口
    require(
        [
            'echarts',
            'echarts/chart/line'  //引入要使用的jar包
        ],  
        displayChart    
    );  
    var echarts;
    var lineChart;
    function displayChart(ec) {
            echarts = ec;
            //折线图
            lineChart = ec.init(document.getElementById('line'));
            var lineChartOtion = getLineChartOption('${xlist}','${ylist}','${title2}','${biaoxian}');  //后台传过来的参数
            lineChart.setOption(lineChartOtion);
            imgUrl = encodeURIComponent(lineChart.getDataURL());
        }

        //获得line图的选项和数据
    function getLineChartOption(xlist,ylist,biaoxian,title2){ 
     var lineChartOption = {
        title : {  //标题('\n'指定换行) 
                    text : biaoxian, //主标题
                    subtext : title2,  //副标题
                    x : 'center',//标题的位置(还可选'left' | 'right' )
                    y :'top', //标题的位置(还可选'top' | 'bottom' | 'center'  )
                    textStyle : {//标题样式
                        fontSize : 24,  //字体大小
                        fontFamily : 'Arial',//字体系列 
                        fontWeight : 100  //粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |...
                    },
                    subtextStyle : {//副标题样式
                        fontSize : 18,
                        fontFamily : 'Arial',
                        color : "#1a4eb0"
                    }
                },
                tooltip : {//提示框，鼠标悬浮交互时的信息提示
                    trigger : 'axis'//触发类型，可选为：'item' | 'axis' 
                },
                 grid : {//直角坐标系内绘图网格
                    x : 40,
                    y : 20,
                    x2 : 10,
                    y2 : 20,
                    backgroundColor : 'rgba(0,0,0,0)',
                    borderWidth : 0,
                    borderColor : '#ffffff'
                },
                animation : false,//是否启用图表初始化动画，默认开启
                dataZoom : { //数据区域缩放，仅对直角坐标系适用
                    show : true,
                    realtime : true,//缩放变化是否实时显示
                    orient: 'vertical', //布局方式，可选为：'horizontal' ,'vertical' 
                    //x: 0,//水平安放位置，默认为根据grid参数适配px
                    y : 330, //垂直安放
                    //width: 400,//指定宽度
                    height : 20,//指定高度
                    backgroundColor : '#cccccc',//  背景颜色
                    dataBackgroundColor : '#cccccc',//数据缩略背景颜色
                    fillerColor : '#99ccff',  //选择区域填充颜色
                    handleColor : '#0099cc', //控制手柄颜色 
                    //xAxisIndex:[],
                    //yAxisIndex:[],
                    start : 0,//${start},默认显示区域
                    end : 100
                },
                calculable : false,//是否启用拖拽重计算特性
                xAxis : [ {
                    type : 'category',//类目型
                    boundaryGap : false, //两端空白
                    show : false,
                    data : function() {
                        return JSON.parse(xlist);
                    }(),
                    axisLabel : {
                        show : false //坐标轴文本标签选项
                    }
                }],
                yAxis : [ {
                    name : '分钟)',
                    type : 'value',
                    scale : true,//脱离0值比例，放大聚焦到最终_min，_max区间 
                    axisLabel : {
                        formatter : '{value}'
                    },
                    splitArea : {
                        show : true//分隔区域
                    }
                } ],
                series : [ {
                    name : '时长',
                    type : 'line',//直线类型
                    smooth : true,
                    itemStyle : {//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）
                        normal : {
                            borderRadius : 0,// 提示边框圆角
                            color : '#0099CC'
                        }
                    },
                    data : function() {
                        return JSON.parse(ylist);
                    }()
                } ]
            };
            return lineChartOption;
        }
        function displayChart2(xlist, ylist) {//第二次请求时，重新生成图表
            //displayChart2.clear();// 图表清空
            lineChart.dispose();// 图表释放
            var lineChart = echarts.init(document.getElementById('line'));
            var lineChartOtion = getLineChartOption(xlist, ylist);
        }
    </script>

效果图如下：