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