公司最近在用vue開發專案，專案接近尾聲了，趁休息時間寫點demo——

vue引入echarts（折線圖的demo）

主要是解決引入echarts，markline的使用（基準線）

這是demo的效果圖：

vue腳手架不多贅述

1.安裝依賴

cnpm install echarts -S

2.在main.js中引入echarts

import echarts from 'echarts'

3.在main.js中安裝

Vue.prototype.echarts = echarts;

一般來說能正常掛載上元件，就可以在頁面中正常使用了

廢話不多說上程式碼（因為自己也是小白階段所以寫的註釋多了點，以便以後使用）

1.HTML部分

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

2.js部分

<script type="text/javascript">
	export default{
		data(){
			return{	
  seven_chart:null,month_chart:null,seven_option : {
				 title : {
				 	 // text: '未來一週氣溫變化',//感覺頭部有點亂，沒使用自帶的標題
				 // subtext: '純屬虛構'
   x: 'left',align: 'center'
   },tooltip: {
				 trigger: 'axis'
				 },legend: {
				 data:['最高氣溫','最低氣溫',]
				 },grid: {
				 left: '3%',right: '4%',bottom: '3%',containLabel: true
				 },toolbox: {
				 feature: {
				  magicType: {type: ['line','bar']},//柱狀圖和西和折線圖切換
				  restore: {},//重新整理
				  saveAsImage: {},//將圖表以折線圖的形式展現
				 }
				 },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,-2,-4],lineStyle:{//設定折線色顏色
   				color:'#3f89ec'
 					},itemStyle:{//設定折線折點的顏色
						  normal : {
						  color:'#3f89ec'
						 }
 					}
				 },{
				  name:'最高氣溫',data:[9,10,6,7,12,11,8],lineStyle:{//設定折線色顏色
  			 		color:'black'
 					},itemStyle:{//設定折線折點的顏色
						  normal : {
						  color:'black'
						 }
 					}			  
				 },{
				  name:'平行於y軸的趨勢線',markLine: {
				  name:'aa',data: [
					  {
	 							name: '0℃標準線',yAxis: 0,lineStyle:{//設定折線色顏色
	   							color:'red'
	 								},},],symbol: ['arrow','none'],//將箭頭向左 預設值是向右的
 							label:{
 								show:true,position:'middle',//markline描述位於中間 right，left，middle
  					formatter: '{b}: {c}',//顯示name中的描述
								}

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

3.css部分

<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>

好了結束，本人目前還是前端的小白，如有錯誤歡迎指正，以後會不定期更新喲！

補充知識：Echarts中有多條曲線，資料精度為小數時，畫線部分與小數刻度顯示不準確

最近遇到了一個問題就是 多條曲線，資料精度為小數時，畫線部分與小數刻度顯示不怎麼準確，但是單條曲線的時候就沒問題

// stack: ‘總量',//此處註釋掉 這個問題 就解決了 所有的都要註釋掉

series: [
 {
 name: 'line1',type: 'line',// stack: '總量',//此處註釋掉
 data: this.lineData.series[0].data  //data中包含帶有小數的資料
 },{
 name: 'line2',//此處註釋掉
 data: this.lineData.series[1].data  //data中包含帶有小數的資料
 }
]

如果還有什麼問題，大家留言一起討論。

以上這篇在vue中使用echarts(折線圖的demo,markline用法)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。