#未來一周天氣變化(最高溫度和最低溫度)
<template>
<div id="main" :style="{width:'1000px',height:'700px'}"></div>
</template>
<script>
export default {
name: "demo7",
data() {
return {};
},
mounted() {
let Mychart = this.$echarts.init(
document.getElementById("main"),
"macarons"
);
Mychart.setOption({
//標題，每個圖表最多僅有一個標題控件，每個標題控件可設主副標題
title: {
//主標題
text: "未來一周氣溫變化",
//副標題
subtext: "純屬虛構"
},
//提示框，鼠標懸浮交互時的信息提示
tooltip: {
//坐標軸觸發
trigger: "axis"
},
//圖例
legend: {
data: ["最高氣溫", "最低氣溫"]
},
//工具箱
toolbox: {
//true為展示
show: true,
////啟用功能，目前支持feature，工具箱自定義功能回調處理
feature: {
//dataZoom，框選區域縮放，自動與存在的dataZoom控件同步，分別是啟用，縮放后退
dataZoom: {
//加上這個屬性以后縮放的時候Y軸不管選多少都會全選
yAxisIndex: "none"
},
//數據視圖，打開數據視圖，可設置更多屬性,readOnly 默認數據視圖為只讀(即值為true)，可指定readOnly為false打開編輯功能
//此處為可編輯的數據視圖
dataView: { readOnly: false },
//magicType，動態類型切換，支持直角系下的折線圖、柱狀圖、堆積、平鋪轉換
magicType: { type: ["line", "bar"] },
//restore，還原，復位原始圖表
restore: {},
//下載保存圖片，一般默認來說格式為png
saveAsImage: {}
}
},
xAxis: {
//類目軸
//坐標軸類型，橫軸默認為類目型'category'
type: "category",
//坐標軸兩邊留白策略,boolean, Array
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
//坐標軸類型。'value' 數值軸，適用於連續數據
type: "value",
//坐標軸刻度標簽的相關設置。
axisLabel: {
//刻度標簽的內容格式器，支持字符串模板和回調函數兩種形式。
//使用字符串模板，模板變量為刻度默認標簽 {value}
formatter: "{value} °C"
}
},
//sereis的數據: 用於設置圖表數據之用。series是一個對象嵌套的結構；對象內包含對象
series: [
{
//系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列。
name: "最高氣溫",
//折線類型圖
type: "line",
//系列中的數據內容數組。數組項通常為具體的數據項。
//注意，如果系列沒有指定 data，並且 option 有 dataset，那么默認使用第一個 dataset。如果指定了 data，則不會再使用 dataset。
data: [11, 11, 15, 13, 12, 13, 10],
//圖表標注。
markPoint: {
//直接用 type 屬性標注系列中的最大值，最小值。這時候可以使用 valueIndex 指定是在哪個維度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪個維度上的最大值、最小值、平均值。
data: [
{ type: "max", name: "最大值" },
{ type: "min", name: "最小值" }
]
},
//圖表標線。
markLine: {
//線型，平均值
data: [{ type: "average", name: "平均值" }]
}
},
{
name: "最低氣溫",
type: "line",
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
//通過 x, y 屬性指定相對容器的屏幕坐標，單位像素，支持百分比。
data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }]
},
markLine: {
data: [
{ type: "average", name: "平均值" },
[
{
//標線兩端的標記類型，可以是一個數組分別指定兩端，也可以是單個統一指定
symbol: "none",
x: "90%",
yAxis: "max"
},
{
//起點標記的圖形。
//ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
symbol: "circle",
//該數據項標簽的樣式，起點和終點項的 label會合並到一起。
label: {
normal: {
//position string
//[ default: 'end' ]
//標簽位置，可選：
//'start' 線的起始點。
//'middle' 線的中點。
//'end' 線的結束點。
position: "start",
formatter: "最大值"
}
},
type: "max",
name: "最高點"
}
]
]
}
}
]
});
}
};
</script>