Vue+Echarts實(shí)現(xiàn)繪制多設(shè)備狀態(tài)甘特圖
更新時(shí)間：2024年03月25日 10:00:50 作者：西湖龍井君
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合Echarts實(shí)現(xiàn)繪制多設(shè)備狀態(tài)甘特圖,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
Apache ECharts ECharts官網(wǎng)，可在“快速上手”處查看詳細(xì)安裝方法
1.效果圖
可鼠標(biāo)滾輪圖表和拉動(dòng)下方藍(lán)色的條條調(diào)節(jié)時(shí)間細(xì)節(jié)哦
（注：最后一個(gè)設(shè)備沒(méi)有數(shù)據(jù)，所以不顯示任何矩形）
2.代碼
根據(jù)每個(gè)設(shè)備的不同的狀態(tài)，和對(duì)應(yīng)狀態(tài)的持續(xù)時(shí)間渲染矩形
html部分
<div id="myechart" :style="{ float: 'left', width: '100%', height: '100%' }"></div>js部分
// 甘特圖 數(shù)據(jù)處理及掛載函數(shù)，可在獲取到數(shù)據(jù)或者數(shù)據(jù)更新時(shí)調(diào)用
drawEchart() {
// this.newEqp為數(shù)據(jù)集,從后端獲取
var data = this.newEqp
// 設(shè)定狀態(tài)對(duì)應(yīng)顯示的顏色
var types = [
{ name: '輔料待料', color: '#07c160' },
{ name: '下游待料', color: '#269abc' },
{ name: '上游待料', color: '#edb217' },
{ name: '其他停機(jī)', color: '#f68ba7' },
{ name: '故障停機(jī)', color: '#ff3374' },
{ name: '運(yùn)行', color: '#66E656' },
];
var startTime;
var datatemp = [];
// 處理時(shí)間，x軸需要月、日、時(shí)、分
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)的起始和結(jié)束時(shí)間函數(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
}
);
// 返回矩形對(duì)象
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ù)，這里是設(shè)備編號(hào)
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.注意事項(xiàng)
甘特圖圖表可能會(huì)不顯示，原因一般是在獲取到數(shù)據(jù)之前圖表就掛載上了，然后數(shù)據(jù)更新后并沒(méi)有更新圖表數(shù)據(jù)。這里本人的方法是在獲取到數(shù)據(jù)的后面調(diào)用掛載圖表的函數(shù)，當(dāng)然這肯定不是最好的方法。
// 獲取圖表數(shù)據(jù)
getCharts().then((res)=>{
......
......
// 判斷獲取到數(shù)據(jù)后調(diào)用處理數(shù)據(jù)及掛載圖表的函數(shù)this.drawEchart()
if(res.length !== 0){
this.drawEchart()
}
})以上就是Vue+Echarts實(shí)現(xiàn)繪制多設(shè)備狀態(tài)甘特圖的詳細(xì)內(nèi)容，更多關(guān)于Vue Echarts甘特圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
今天小編就為大家分享一篇關(guān)于vue中輪訓(xùn)器的使用，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
詳解vue如何獲取當(dāng)前系統(tǒng)時(shí)間
這篇文章主要詳細(xì)介紹了vue如何獲取當(dāng)前系統(tǒng)時(shí)間,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
關(guān)于vue.js過(guò)渡css類(lèi)名的理解(推薦)
這篇文章主要介紹了關(guān)于vue.js過(guò)渡css類(lèi)名的理解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了vue的可拖拽的瀑布流布局組件有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作
這篇文章主要介紹了在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了vue組件開(kāi)發(fā)之slider組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
在 Vue 3 中,一個(gè)重要的特性是 watch 選項(xiàng),它允許開(kāi)發(fā)者對(duì)數(shù)據(jù)變化進(jìn)行觀察,本篇博客將詳細(xì)介紹如何在 Vue 3 中使用 watch 進(jìn)行深度觀察,特別是在使用 setup 語(yǔ)法糖時(shí),需要的朋友可以參考下2024-11-11
自定義input組件如何實(shí)現(xiàn)拖拽文件上傳
這篇文章主要介紹了自定義input組件如何實(shí)現(xiàn)拖拽文件上傳問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue+iview實(shí)現(xiàn)手機(jī)號(hào)分段輸入框
這篇文章主要為大家詳細(xì)介紹了vue+iview實(shí)現(xiàn)手機(jī)號(hào)分段輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
作為一個(gè)全棧開(kāi)發(fā)人員,前端UI框架和網(wǎng)絡(luò)請(qǐng)求都得有基本的掌握,我以最簡(jiǎn)潔易懂的方式講解axios的使用和全局baseURL的配置2024-05-05