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>

效果图如下：