Vue echarts畫甘特圖流程詳細(xì)講解
vue項(xiàng)目中添加echarts，只需要增加echarts依賴，然后在main.js中引入echarts就可以使用了。
1、npm install echarts --save
2、修改main.js
import * as echarts from 'echarts' Vue.prototype.$echarts = echarts
3、具體頁面使用：
<template>
<div class="about">
<h1>This is echarts page</h1>
<div id="myechart" style="height:500px;width:1000px;" ></div>
</div>
</template>
<script>
export default{
name:'MyEchart',
mounted(){
this.drawEchart()
},
methods:{
drawEchart(){
let myechart = this.$echarts.init(document.getElementById("myechart"))
myechart.setOption({
title:{text:"gant"},
xAxis:{
type:'value'
},
yAxis:{
type:'category',
data:["pro1","pro2","pro3","pro4","pro5","pro6"]
},
series:[
{
type:'bar',
data:[10,20,30,46,78,22]
}
]
})
}
}
}
</script>展示效果：
甘特圖在這個(gè)圖形的基礎(chǔ)上還需要增加數(shù)據(jù)，形成一個(gè)不斷迭代的效果。
{
type:'bar',
name:'base',
//stack:'Total',
data:[10,20,30,46,78,22]
},
{
type:'bar',
name:'data2',
//stack:'Total',
data:[20,20,30,20,10,20]
}如果不做設(shè)置，效果如下所示：
兩組數(shù)據(jù)都從原始位置開始，我們想要的結(jié)果是疊加，這里只需要增加一個(gè)參數(shù)stack:''，指定一個(gè)相同的名稱，效果如下：
我們?nèi)绻幌胝故镜谝欢?，只展示第二段，這時(shí)候可以設(shè)置第一個(gè)數(shù)據(jù)集對(duì)應(yīng)的樣式：
itemStyle{
borderColor:'transparent',
color:'transparent'
}展示效果：
我們最終需要的效果如下所示：
從上面的示例，我們可以這樣來實(shí)現(xiàn)， 把兩組數(shù)據(jù)看作一組，每一組第一個(gè)數(shù)據(jù)集展示隱藏，這里如果是項(xiàng)目進(jìn)度圖，我們可以把開始時(shí)間、結(jié)束時(shí)間作為一組，結(jié)束時(shí)間與開始時(shí)間中間這一段時(shí)間就是持續(xù)時(shí)間，這個(gè)時(shí)間在這里是一個(gè)增量，就是第二個(gè)數(shù)據(jù)集是展示在第一個(gè)數(shù)據(jù)集的基礎(chǔ)上，它不能再直接使用結(jié)束時(shí)間，而是使用間隔時(shí)間。
數(shù)據(jù)集：
series:[
{
type:'bar',
name:'base',
stack:'Total',
data:[86,41,119,46],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data2',
stack:'Total',
data:[100,100,100,100]
},
{
type:'bar',
name:'data3',
stack:'Total',
data:[75,67,64,52],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data4',
stack:'Total',
data:[100,100,100,100]
},
{
type:'bar',
name:'data5',
stack:'Total',
data:[44,90,154,84],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data6',
stack:'Total',
data:[100,100,100,100]
},
{
type:'bar',
name:'data7',
stack:'Total',
data:[46,183,'-',188],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data8',
stack:'Total',
data:[100,100,'-',100]
},
{
type:'bar',
name:'data9',
stack:'Total',
data:[40,'-','-','-'],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data8',
stack:'Total',
data:[{value:100,itemStyle:{normal:{color:'purple'}}},'-','-','-']
}
]最終的一個(gè)效果：
這個(gè)里面，對(duì)應(yīng)每一個(gè)數(shù)據(jù)項(xiàng)都可以設(shè)置顯示顏色，具體操作就是把data:[]數(shù)組變更為：
data:[
{
value:100,
itemStyle:
{
normal:
{color:'purple'}
}
},
'-',
'-',
'-']原來的數(shù)據(jù)項(xiàng)，變?yōu)橐粋€(gè)對(duì)象，對(duì)象的值value對(duì)應(yīng)原來的數(shù)字值，樣式則使用itemStyle屬性設(shè)置。
甘特圖繪制需要注意的地方：
1、數(shù)據(jù)顯示疊加，使用屬性stack。
2、隱藏開始時(shí)間，設(shè)置顯示透明即可。結(jié)束時(shí)間點(diǎn)不能直接設(shè)置結(jié)束時(shí)間，這是一個(gè)增量，需要設(shè)置時(shí)間間隔。
3、每一個(gè)數(shù)據(jù)項(xiàng)展示，可以單獨(dú)設(shè)置樣式，比如顏色，可以把data數(shù)組做修改，原來單一的數(shù)字值，修改為對(duì)象，包含value,itemStyle等屬性。
到此這篇關(guān)于Vue echarts畫甘特圖流程詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue echarts畫甘特圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vant時(shí)間控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個(gè)DOM元素綁定事件,如點(diǎn)擊、鼠標(biāo)移動(dòng)、鍵盤敲擊等等,需要的朋友可以參考下2023-09-09
vue項(xiàng)目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題及解決方案
這篇文章主要介紹了vue項(xiàng)目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題,輸入框要掉兩個(gè)接口，根據(jù)第一個(gè)驗(yàn)證接口返回的code，彈不同的框，點(diǎn)擊彈框確認(rèn)再掉第二個(gè)接口，需要的朋友可以參考下2022-12-12
vue3中做文件預(yù)覽的項(xiàng)目實(shí)踐
本文主要介紹了在Vue3項(xiàng)目中實(shí)現(xiàn)常見文件類型的預(yù)覽功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
在開始學(xué)習(xí)vue的時(shí)候,對(duì)于新手安裝這個(gè)環(huán)境是真的搞人心態(tài),不友好,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)組件之間傳值功能,結(jié)合實(shí)例形式分析了vue.js父子組件之間相互傳值常見操作技巧,需要的朋友可以參考下2018-07-07
Vue之解決Echarts組件使用ID不能復(fù)用的問題
這篇文章主要介紹了Vue之解決Echarts組件使用ID不能復(fù)用的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文通過實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)評(píng)論列表功能，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-10
vue & vue Cli 版本及對(duì)應(yīng)關(guān)系解讀
這篇文章主要介紹了vue & vue Cli 版本及對(duì)應(yīng)關(guān)系，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue Socket.io源碼解讀，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02