Vue+Echarts實現(xiàn)繪制多設備狀態(tài)甘特圖
更新時間：2024年03月25日 10:00:50 作者：西湖龍井君
這篇文章主要為大家詳細介紹了Vue如何結合Echarts實現(xiàn)繪制多設備狀態(tài)甘特圖,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下
Apache ECharts ECharts官網(wǎng)，可在“快速上手”處查看詳細安裝方法
1.效果圖
可鼠標滾輪圖表和拉動下方藍色的條條調(diào)節(jié)時間細節(jié)哦
（注：最后一個設備沒有數(shù)據(jù)，所以不顯示任何矩形）
2.代碼
根據(jù)每個設備的不同的狀態(tài)，和對應狀態(tài)的持續(xù)時間渲染矩形
html部分
<div id="myechart" :style="{ float: 'left', width: '100%', height: '100%' }"></div>js部分
// 甘特圖 數(shù)據(jù)處理及掛載函數(shù)，可在獲取到數(shù)據(jù)或者數(shù)據(jù)更新時調(diào)用
drawEchart() {
// this.newEqp為數(shù)據(jù)集,從后端獲取
var data = this.newEqp
// 設定狀態(tài)對應顯示的顏色
var types = [
{ name: '輔料待料', color: '#07c160' },
{ name: '下游待料', color: '#269abc' },
{ name: '上游待料', color: '#edb217' },
{ name: '其他停機', color: '#f68ba7' },
{ name: '故障停機', color: '#ff3374' },
{ name: '運行', color: '#66E656' },
];
var startTime;
var datatemp = [];
// 處理時間，x軸需要月、日、時、分
for (let i = 0; i < data.length; i++) {
startTime = new Date(data[i].Last_Eqpt_Update_Time).getTime();
var typeItem = types.filter(a => a.name == data[i].Eqpt_State_Dsc)[0];
datatemp.push({
name: typeItem.name,
value: [
parseInt(data[i].Index),
new Date(data[i].Last_Eqpt_Update_Time).getTime(),
new Date(data[i].Eqpt_Update_Time).getTime(),
//data[i].RUNTIME_TIMESTAMP,
//data[i].END_TIME_TIMESTAMP,
data[i].Index,
data[i].Eqpt_Dsc
],
itemStyle: {
normal: {
color: typeItem.color
}
}
});
}
// console.log("data:", data);
// console.log('datatemp', datatemp);
// 處理各種狀態(tài)的起始和結束時間函數(shù)
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
// 返回矩形對象
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
}
);
}
// 基于echarts的甘特圖
let myechart = this.$echarts.init(document.getElementById("myechart"))
let myechart2 = {
textStyle: {
color: '#333',
fontSize: '0.13rem'
},
grid: {
top: '5%',
left: '8%',
bottom: '16%',
width: '90%'
},
legend: {
show: true,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff',
fontSize: '0.12rem'
},
data: types.map(function (type) {
return type.name;
}),
},
tooltip: {
show: true,
textStyle: {
fontSize: 10
},
axisPointer: {
type: 'cross',
crossStyle: {
color: '#333'
}
},
formatter: function (params) {
return params.value[4] + '\t' + params.name + '\t' + params.marker + (new Date(params.value[1])).getHours() + ':' + (new Date(params.value[1])).getMinutes() + '—' + (new Date(params.value[2])).getHours() + ':' + (new Date(params.value[2])).getMinutes();
}
},
dataZoom: [
{
type: 'inside',
filterMode: 'weakFilter'
},
{
type: "slider",
show: true,
height: "6",
bottom: "4%",
labelFormatter: '',
backgroundColor: "white",
brushSelect: false,
minValueSpan: 3600 * 24 * 1000 * 7,
handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
handleSize: 15,
handleColor: '#6bc5da',
start: 0,
end: 100,
handleStyle: {
borderCap: 'round',
color: "#fff",
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 1
},
textStyle: {
color: "transparent"
},
borderColor: 'transparent',
backgroundColor: '#D7F4FF',
dataBackground: {
lineStyle: {
width: 0
},
areaStyle: {
color: 'transparent'
}
},
fillerColor: '#00EBFF'
}
],
xAxis: {
type: 'time',
//min: new Date(startTime).setHours(7, 0, 0, 0),
//max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),
interval: 3600000,
scale: true,
axisLabel: {
formatter: function (val) {
return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });
}
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#333',
width: 2
}
},
axisLabel: {
textStyle: {
color: '#333',
fontSize: '0.14rem'
},
show: true
}
},
yAxis: {
// y軸數(shù)據(jù)，這里是設備編號
data: this.eqptId,
scale: true,
splitLine: { show: false },
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#333',
fontSize: '0.12rem',
fontWeight: 'bolder',
}
}
},
series: [
{
type: 'custom',
// 圖表矩形數(shù)據(jù)
renderItem: renderItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: [0, 1],
y: 0
},
data: datatemp,
}
]
}
myechart.setOption(myechart2)
}3.注意事項
甘特圖圖表可能會不顯示，原因一般是在獲取到數(shù)據(jù)之前圖表就掛載上了，然后數(shù)據(jù)更新后并沒有更新圖表數(shù)據(jù)。這里本人的方法是在獲取到數(shù)據(jù)的后面調(diào)用掛載圖表的函數(shù)，當然這肯定不是最好的方法。
// 獲取圖表數(shù)據(jù)
getCharts().then((res)=>{
......
......
// 判斷獲取到數(shù)據(jù)后調(diào)用處理數(shù)據(jù)及掛載圖表的函數(shù)this.drawEchart()
if(res.length !== 0){
this.drawEchart()
}
})以上就是Vue+Echarts實現(xiàn)繪制多設備狀態(tài)甘特圖的詳細內(nèi)容，更多關于Vue Echarts甘特圖的資料請關注腳本之家其它相關文章！
相關文章
uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項
在uni-app與Webview之間進行數(shù)據(jù)交互是非常常見的需求,下面這篇文章主要給大家介紹了關于uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項的相關資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue集成kindeditor富文本的實現(xiàn)示例代碼
這篇文章主要介紹了vue集成kindeditor富文本的實現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
詳解vue-router 動態(tài)路由下子頁面多頁共活的解決方案
這篇文章主要介紹了vue-router 動態(tài)路由下子頁面多頁共活的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了vue中nextTick的相關資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue + typescript + video.js實現(xiàn) 流媒體播放 視頻監(jiān)控功能
視頻才用流媒體，有后臺實時返回數(shù)據(jù)， 要支持flash播放， 所以需安裝對應的flash插件。這篇文章主要介紹了vue + typescript + video.js 流媒體播放 視頻監(jiān)控,需要的朋友可以參考下2019-07-07
在vue項目中，搜索功能是我們經(jīng)常需要使用的一個場景，最常用的是在列表數(shù)據(jù)中搜索一個想要的，今天的例子就是我們實現(xiàn)vue從列表數(shù)據(jù)中搜索，希望對大家有所幫助2023-03-03
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
本文主要介紹了vue+echarts5實現(xiàn)中國地圖的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
VUE3中引入.env下的環(huán)境變量,顯示process未定義問題
這篇文章主要介紹了VUE3中引入.env下的環(huán)境變量,顯示process未定義問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04