## :-: 折線統計圖（line） ``` //stack ： { }，堆疊效果對象 1.dom容器 <div style="width:600px;height:400px;margin:100px auto" id="chart"></div> 2.配置 //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); // x軸數據 var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月']; // y軸數據 var yDataArr = [500,500,556,855,644,598,457,689,587]; var yDataArr2 = [784,452,897,568,452,587,225,874,897]; // 配置項 var option = { //標題配置 title : { text : '銷量',//標題，加‘\n’可換行 link : 'http://www.baidu.com',//超鏈接 textStyle : {//文本樣式 color : 'red', fontWeight : '800' }, borderWidth : 5,//邊框 borderColor : 'blue', borderRadius : 5, left : 30,//位置 top : 10 }, // x軸 xAxis : { type : 'category',//類目軸 data : xDataArr,//x軸數據 boundaryGap : false,//讓x軸第一個數據緊貼y軸，沒有間距 }, // y軸 yAxis : { type : 'value',//數值軸，對應series中的data scale : true,//脫離0值比例的縮放，y軸不是從0開始，當數據相差較小時，可看出明顯差異，要不然不好比較數據大小 }, //數據篩選，需要配合series使用，data中的每一項對應name值 legend : { data : ['可樂','雪碧'], }, //系列列表，多個對象顯示多個條形圖 series : [ { name : '可樂', type : 'line',//類型：bar：柱狀圖，line：折線圖，pie：餅裝圖 data : yDataArr,//數據 //最大值最小值標記 markPoint : { data : [ {type : 'max',name : '最大值'},//最大值 {type : 'min',name : '最小值'}//最小值 ], }, // 平均值標記線 markLine : { data : [ {type : 'average',name : '平均值'} ] }, //標記區間，多個數組 markArea : { data : [ // 第一個區間 [ {xAxis:'1月'},//開始 {xAxis:'2月'},//結束 ], // 第二個區間 [ {xAxis:'5月'},//開始 {xAxis:'6月'},//結束 ] ], }, // smooth : true,//使線條更加平滑 //線條樣式 lineStyle : { color : 'green', type : 'solid', //dotted,solid }, stack : {},//堆疊圖效果，多條數據不會重疊，起點是相對的 //填充樣式配置 areaStyle : { color : 'pink' }, //顯示數值 label : { show : true,//設置顯示 // rotate : 30,//數值旋轉角度 // position : 'inside',//定位：默認inside（內部），還有top,right等 }, barWidth : '30%',//寬度設置 color : 'red',//顏色 }, { name : '雪碧', type : 'line',//類型：bar：柱狀圖，line：折線圖，pie：餅裝圖 data : yDataArr2, barWidth : '30%',//寬度 stack : {}, //填充樣式配置 areaStyle : { color : '#ccc' }, //標記區間，多個數組 markArea : { data : [ // 第一個區間 [ {xAxis:'3月'},//開始 {xAxis:'4月'},//結束 ], // 第二個區間 [ {xAxis:'8月'},//開始 {xAxis:'9月'},//結束 ] ], }, }, ], // 提示 tooltip : { // trigger : 'item',//觸發類型：放在圖上 trigger : 'axis',//觸發類型：放在坐標軸上 triggerOn : 'click',//觸發方式：click：點擊，mouseover：鼠標移入(默認) // formatter : '{b}的成績是{c}',//提示文字，默認顯示類目name({a}),{b}:x軸，{c}：y軸 formatter : function(arg){//提示文字也可以是個回調函數 console.log(arg); return arg[0].name + '的銷量是' + arg[0].data; } }, //右上角工具欄按鈕 toolbox : { feature : { saveAsImage : {},//導出為圖片 dataView : {},//數據視圖，生成一個列表，可以編輯數據 restore : {},//重置數據，刷新 dataZoom : {},//區域縮放 magicType : {//動態圖表切換 type : ['bar','line'] }, } }, }; myCharts.setOption(option); ``` 圖示：  堆疊效果： :-: