Vue echarts畫甘特圖流程詳細講解
vue項目中添加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>展示效果：
甘特圖在這個圖形的基礎上還需要增加數(shù)據(jù)，形成一個不斷迭代的效果。
{
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ù)據(jù)都從原始位置開始，我們想要的結(jié)果是疊加，這里只需要增加一個參數(shù)stack:''，指定一個相同的名稱，效果如下：
我們?nèi)绻幌胝故镜谝欢危徽故镜诙?，這時候可以設置第一個數(shù)據(jù)集對應的樣式：
itemStyle{
borderColor:'transparent',
color:'transparent'
}展示效果：
我們最終需要的效果如下所示：
從上面的示例，我們可以這樣來實現(xiàn)， 把兩組數(shù)據(jù)看作一組，每一組第一個數(shù)據(jù)集展示隱藏，這里如果是項目進度圖，我們可以把開始時間、結(jié)束時間作為一組，結(jié)束時間與開始時間中間這一段時間就是持續(xù)時間，這個時間在這里是一個增量，就是第二個數(shù)據(jù)集是展示在第一個數(shù)據(jù)集的基礎上，它不能再直接使用結(jié)束時間，而是使用間隔時間。
數(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'}}},'-','-','-']
}
]最終的一個效果：
這個里面，對應每一個數(shù)據(jù)項都可以設置顯示顏色，具體操作就是把data:[]數(shù)組變更為：
data:[
{
value:100,
itemStyle:
{
normal:
{color:'purple'}
}
},
'-',
'-',
'-']原來的數(shù)據(jù)項，變?yōu)橐粋€對象，對象的值value對應原來的數(shù)字值，樣式則使用itemStyle屬性設置。
甘特圖繪制需要注意的地方：
1、數(shù)據(jù)顯示疊加，使用屬性stack。
2、隱藏開始時間，設置顯示透明即可。結(jié)束時間點不能直接設置結(jié)束時間，這是一個增量，需要設置時間間隔。
3、每一個數(shù)據(jù)項展示，可以單獨設置樣式，比如顏色，可以把data數(shù)組做修改，原來單一的數(shù)字值，修改為對象，包含value,itemStyle等屬性。
到此這篇關(guān)于Vue echarts畫甘特圖流程詳細講解的文章就介紹到這了,更多相關(guān)Vue echarts畫甘特圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了vant時間控件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個DOM元素綁定事件,如點擊、鼠標移動、鍵盤敲擊等等,需要的朋友可以參考下2023-09-09
vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題及解決方案
這篇文章主要介紹了vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題,輸入框要掉兩個接口，根據(jù)第一個驗證接口返回的code，彈不同的框，點擊彈框確認再掉第二個接口，需要的朋友可以參考下2022-12-12
本文主要介紹了在Vue3項目中實現(xiàn)常見文件類型的預覽功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的參考價值,感興趣的可以了解一下2025-01-01
在開始學習vue的時候,對于新手安裝這個環(huán)境是真的搞人心態(tài),不友好,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue實現(xiàn)組件之間傳值功能,結(jié)合實例形式分析了vue.js父子組件之間相互傳值常見操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue之解決Echarts組件使用ID不能復用的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文通過實例代碼給大家介紹了vue實現(xiàn)評論列表功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-10-10
這篇文章主要介紹了vue & vue Cli 版本及對應關(guān)系，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue Socket.io源碼解讀，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02