mounted() { (async () => { await this.getParamTypeData(); // 先執行這個在執行下面代碼 this.drawLine() })() }, getParamTypeData() { // 必須return return this.$http.getDictionaryTree({pid:"wq_qt"}).then(res => { if (res.code === "CODE_0000") { this.typeData = res.data; // this.drawLine(); } }); }, drawLine() { let yName = ""; if (this.fileName === "waterqualityHistory") { yName = `${this.getSelectVal(this.typeData, this.currentRow.type)}(°C)` } // 基於准備好的dom,初始化echarts實例 const myCharts = this.$echarts.init(this.$refs.myChartsLine); // 繪制圖表 let options = { // title: { // text: "未來一周氣溫變化", //圖表頂部的標題 // subtext: "純屬虛構", //副標題 // }, grid: { left: 15, right: 15, bottom: 60, containLabel: true, }, color: '#409EFF', tooltip: { //鼠標懸浮框的提示文字 trigger: "axis", }, legend: { data: ["最高氣溫"], }, xAxis: [ { //x軸坐標數據 type: "category", boundaryGap: false, data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], }, ], yAxis: [ { //y軸坐標數據 type: "value", name: yName, // axisLabel: { // formatter: "{value} °C", // }, }, ], dataZoom: this.fileName === "waterqualityHistory" ? null : [{ type: 'inside', start: 0, end: 100 }, { start: 0, end: 100, handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleSize: '50%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 }, bottom: 20 }], series: [ //驅動圖表生成的數據內容數組,幾條折現,數組中就會有幾個對應對象,來表示對應的折線 { name: "最高氣溫", type: "line", //pie->餅狀圖 line->折線圖 bar->柱狀圖 data: [11, 11, 15, 13, 12, 13, 10], }, ], }; myCharts.setOption(options); },