vue下使用echarts折線圖及其橫座標拖拽功能
阿新 • • 發佈:2018-11-16
vue頁面中使用折線圖,並且有時間段篩選。因此就需要用到橫座標的拖拽功能。
介面效果如下:
現在來看這個效果的實現程式碼:
drawLine() { let that = this, lineDate = [], dispatchCount = [], finishCount = [], newCount = []; let param = { // 引數 }; axios .post(url, param) .then(function(response) { let rs= response.data.data; if (rs != undefined && rs != [] && rs != null) { for (let i = 0; i < rs.dispatch.length; i++) { lineDate.push(rs.dispatch[i].day); dispatchCount.push(rs.dispatch[i].count); } for (let i = 0; i < rs.finish.length; i++) { finishCount.push(rs.finish[i].count); } for (let i = 0; i < rs.new.length; i++) { newCount.push(rs.new[i].count); } } let lineChart = that.$echarts.init( document.getElementById("lineChart") ); lineChart.setOption({ tooltip: { trigger: "axis" }, legend: { data: ["新增", "派單", "完成"] }, grid: { left: "10%", //因旋轉導致名字太長的類目造成遮蔽,可以配合這兩個屬性 bottom: "10%" // 分別表示:距離左邊距和底部的距離,具體數值按實際情況調整 }, xAxis: { type: "category", boundaryGap: false, data: lineDate, axisLabel: { interval: 2, //0:全部顯示,1:間隔為1顯示對應類目,2:依次類推,(簡單試一下就明白了,這樣說是不是有點抽象) rotate: -20 //傾斜顯示,-:順時針旋轉,+或不寫:逆時針旋轉 } }, yAxis: { type: "value", axisLabel: { // formatter: function(v) { // return parseInt(v); // 讓y座標陣列為整數 // }, rotate: -20 }, }, // x軸拖動 dataZoom: [ { type: "slider", realtime: true, //拖動滾動條時是否動態的更新圖表資料 height: 25, //滾動條高度 start: 40, //滾動條開始位置(共100等份) end: 65 //結束位置(共100等份) } ], series: [ { name: "新增", type: "line", data: newCount }, { name: "派單", type: "line", data: dispatchCount }, { name: "完成", type: "line", data: finishCount } ] }); }); },