用Echarts動態顯示兩組數據圖形

最近公司項目須要用到實時數據顯示, 因此就瞭解到了Echarts這個強大的工具, 使用中也遇到了好多坑, 記錄一下, 但願也給須要的人提供幫助

要在項目中使用Echarts, 首先須要在頁面裏引入, 你能夠徹底下載下來, 或者用npm之類的包管理工具, 或者直接引入cdn加速地址, 我這裏用的後者

在html頁面直接引入

<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
複製代碼

而後須要設着一個用來顯示折線圖的容器, 並且要有寬高

<div id="main" style="width: 600px; height: 500px;"></div>   
複製代碼

接着在js文件裏先實例化一個echarts對象出來

let myChart = echarts.init(document.getElementById('main'));
複製代碼

爲了顯示效果, 我提供了一些測試數據

let now = new Date();
let datas = {
    upText: '水位圖形',
    upUnit: '單位(m)',
    upName: '水位',
	upMark: 2.3,		// 分界值
    upData: ['1.139'],
    downText: '流量圖形',
    downUnit: '單位(m)',
    downName: '水位',
    downMark: 3.5,
    downData: ['5.473'],
    date: [now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds()]
};

複製代碼

而後就是設置配置信息--option

let option = {
	title: [{
		left: 'center',
		text: datas.upText
	}, {
		top: '50%',			// 下面的折線圖標題位置
		left: 'center',
		text: datas.downText
	}],
	tooltip: {
		trigger: 'axis'			// 懸浮到折點時候的上線標記線
	},
	xAxis: [{
		boundaryGap: false,		// 默認爲 true，此時刻度只是做爲分隔線，標籤和數據點都會在兩個刻度之間的帶(band)中間。
		data: datas.date
	}, {
		boundaryGap: false,
		data: datas.date,
		gridIndex: 1			// 下面的折線圖索引, (上面的索引爲0)
	}],
	yAxis: [{
		name: datas.upUnit,
		boundaryGap: [0, '50%']
	}, {
		gridIndex: 1,
		name: datas.downUnit,
		boundaryGap: [0, '50%']
	}],
	grid: [{
		bottom: '60%'
	}, {
		top: '60%'
	}],
	series: [{
		name: datas.upName,
		data:  datas.date,
		type: 'line',
		smooth: true,			// 是否爲平滑曲線
		areaStyle: {			// 折現下是否填充
			normal: {}
        },  
		markLine: {			// 分界線線設置
			silent: true,		// 不響應鼠標點擊事件
			lineStyle: {
				width: 2,
				color: '#f00'
			},
			data: [{
				yAxis: datas.upMark
			}]
		}
	}, {
		name: datas.downName,
		data:  datas.date,
		type: 'line',
		smooth: true,
        itemStyle : {  
            normal : {  
                borderColor:'red'	// 折線折點顏色
            }  
        },
		markLine: {
			silent: true,
			lineStyle: {
				width: 2,
				color: '#f00'
			},
			data: [{
				yAxis: datas.downMark
			}]
		},
		xAxisIndex: 1,
		yAxisIndex: 1
	}],
	visualMap: [{				// 視覺映射組件
		seriesIndex: 0,
		top: 20,
		right: 10,
		pieces: [{
			gt: 0,			// 開始值
			lte: datas.upMark,	// 結束值
			color: '#0ff'
		}],
		outOfRange: {			// 超出範圍
			color: '#f00'
		},
	},{
		seriesIndex: 1,
		top: '50%',
		right: 10,
		pieces: [{
			gt: 0,
			lte: datas.downMark,
			color: 'orange'
		}],
		outOfRange: {
			color: '#f00'
		},
	}], 
};
複製代碼

有些地方是加了註釋的, 由於一開始沒搞明白怎麼用, 在官方文檔裏 和 demo 裏遨遊了很久, 才弄明白各個設置的意思和用處, 文檔是個好東西

最後就是把option設置給 echarts實例, 是經過setOption來使用的:

myChart.setOption(option);
複製代碼

這個時候打開頁面其實就能看到效果了

目前只有一個數據值, 接着開始啓動模擬加載數據

// 獲取數據時間間隔 3秒
let INTERVAL_TIME = 3000;
// 模擬定時加載數據
setInterval(() => {
	// 最新時間
    let newDate = new Date();
	// 模擬獲取數據
    datas.upData.push((Math.random() * 5).toFixed(3));
	datas.downData.push((Math.random() * 5).toFixed(3));
	// 按時間間隔設置時間
    datas.date.push(newDate.getHours() + ':' + newDate.getMinutes() + ':' + newDate.getSeconds())
	// 只取8個數據
    if (datas.upData.length >= 8) {
        datas.upData.shift();
        datas.downData.shift();
        datas.date.shift();
    }
	// 設置最新數據給折線圖
    myChart.setOption({
        xAxis: [{
            data: datas.date
        },{
            data:datas.date,
            gridIndex: 1
        }],
        series: [{
            data: datas.upData
        },{
            data: datas.downData,
            xAxisIndex: 1,
            yAxisIndex: 1
        }]
    })

}, INTERVAL_TIME);
複製代碼

在運行, 代碼, 就能看到數據從1個變成最多8個, 而且能實時加載新數據並動態顯示出來

同時也能看到分界線設置的效果(我這只是截圖, 實際是動態顯示的)

幾點小提示:

• 若是你須要切換數據源, 須要先清除原來的的定時器和Echarts實例, 不然數據會出現混亂, 這裏的timer是我給項目裏的定時器起的名字

//  清除原有定時器
clearInterval(timer);

//  若是echat實例存在
if (myChart != null && myChart != "" && myChart != undefined) {
      //  銷燬實例
      myChart.dispose();
 }
//  基於準備好的dom，初始化echarts實例
myChart = echarts.init(document.getElementById(echartId))
複製代碼

• 最好再調用它一下的resize方法, 緣由看註釋

//  用於使chart自適應高度和寬度, 由於初始隱藏的標籤在初始化圖表的時候由於獲取不到容器的實際高寬，可能會繪製失敗
$(window).on('resize', function () {
     myChart.resize();
 });
複製代碼

• 在會改變窗口大小的地方也調用一下resize()這個方法,以便能自適應.

---

以上來自我工做中的總結筆記, 但願對看到的人有所幫助

源碼地址: GitHub 也能夠直接跳轉--->Echarts官網查看更多使用技巧