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