<template>
 <div class="content">
 <p class="prompt_p">&nbsp;&nbsp;&nbsp;近七天溫度折線(xiàn)圖</p>
 <div class="seven_echarts" id="seven"> 
 </div>
 </div> 
</template>

<script type="text/javascript">
	export default{
		data(){
			return{	
  seven_chart:null,
				month_chart:null,
  seven_option : {
				 title : {
				 	 // text: '未來(lái)一周氣溫變化',//感覺(jué)頭部有點(diǎn)亂，沒(méi)使用自帶的標(biāo)題
				 // subtext: '純屬虛構(gòu)'
   x: 'left',
   align: 'center'
   },
				 tooltip: {
				 trigger: 'axis'
				 },
				 legend: {
				 data:['最高氣溫','最低氣溫',]
				 },
				 grid: {
				 left: '3%',
				 right: '4%',
				 bottom: '3%',
				 containLabel: true
				 },
				 toolbox: {
				 feature: {
				  magicType: {type: ['line', 'bar']},//柱狀圖和西和折線(xiàn)圖切換
				  restore: {},//刷新
				  saveAsImage: {},//將圖表以折線(xiàn)圖的形式展現(xiàn)
				 }
				 },
				 xAxis: {
				 type: 'category',
				 boundaryGap: false,
				 data: ["11-26","11-27","11-28","11-29","11-30","12-01","12-02"]
				 },
				 yAxis: {
				 	name:"℃",
				 nameLocation: 'end',
				 	type: 'value',
				 axisLabel: {
				  formatter: '{value} '
				 }
				 },
				 series: [
				 		{
				  name:'最低氣溫',
				  type:'line',
				  data:[0,-1,-3,-4,0,-2,-4],
				  lineStyle:{//設(shè)置折線(xiàn)色顏色
   				color:'#3f89ec'
 					},
 					itemStyle:{//設(shè)置折線(xiàn)折點(diǎn)的顏色
						  normal : {
						  color:'#3f89ec'
						 }
 					}
				 },
				 	{
				  name:'最高氣溫',
				  type:'line',
				  data:[9,10,6,7,12,11,8],
				  lineStyle:{//設(shè)置折線(xiàn)色顏色
  			 		color:'black'
 					},
 					itemStyle:{//設(shè)置折線(xiàn)折點(diǎn)的顏色
						  normal : {
						  color:'black'
						 }
 					}			  
				 },
				 {
				  name:'平行于y軸的趨勢(shì)線(xiàn)',
				  type:'line',
				  markLine: {
				  name:'aa',
				  data: [
					  {
	 							name: '0℃標(biāo)準(zhǔn)線(xiàn)',
	 								yAxis: 0,
	 								 lineStyle:{//設(shè)置折線(xiàn)色顏色
	   							color:'red'
	 								},
	 							},
 							],
 							symbol: ['arrow', 'none'],//將箭頭向左 默認(rèn)值是向右的
 							label:{
 								show:true,
  					position:'middle',//markline描述位于中間 right，left，middle
  					formatter: ': {c}',//顯示name中的描述
								}

				  }
				 }
				 
				 ],
				},
			}
		},
		mounted:function (){
			this.get_echarts();
		},
		methods:{	
			get_echarts:function(){
				this.seven_chart = this.echarts.init(document.getElementById("seven"));
				// 把配置和數(shù)據(jù)放這里
				this.seven_chart.setOption(this.seven_option)  
			}
 },
 beforeDestroy() {
  if (!this.seven_chart) { return }
  this.seven_chart.dispose();
  this.seven_chart = null;
 },
	}
</script>

<style type="text/css">
.content{
 width: 100%;
}
.content p{
 margin-top: 1rem;
 font-size: 0.4rem;
 color: #666666;
}
.seven_echarts{
 height: 11rem;
 width: 94%;
}
</style>

// stack: ‘總量', //此處注釋掉 這個(gè)問(wèn)題 就解決了 所有的都要注釋掉

series: [
 {
 name: 'line1',
 type: 'line',
 // stack: '總量',  //此處注釋掉
 data: this.lineData.series[0].data  //data中包含帶有小數(shù)的數(shù)據(jù)
 },
 {
 name: 'line2',
 type: 'line',
 // stack: '總量',  //此處注釋掉
 data: this.lineData.series[1].data  //data中包含帶有小數(shù)的數(shù)據(jù)
 }
]