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); },