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>展示效果：
甘特圖在這個圖形的基礎(chǔ)上還需要增加數(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è)置，效果如下所示：
兩組數(shù)據(jù)都從原始位置開始，我們想要的結(jié)果是疊加，這里只需要增加一個參數(shù)stack:''，指定一個相同的名稱，效果如下：
我們?nèi)绻幌胝故镜谝欢?，只展示第二段，這時候可以設(shè)置第一個數(shù)據(jù)集對應(yīng)的樣式：
itemStyle{
borderColor:'transparent',
color:'transparent'
}展示效果：
我們最終需要的效果如下所示：
從上面的示例，我們可以這樣來實現(xiàn)， 把兩組數(shù)據(jù)看作一組，每一組第一個數(shù)據(jù)集展示隱藏，這里如果是項目進度圖，我們可以把開始時間、結(jié)束時間作為一組，結(jié)束時間與開始時間中間這一段時間就是持續(xù)時間，這個時間在這里是一個增量，就是第二個數(shù)據(jù)集是展示在第一個數(shù)據(jù)集的基礎(chǔ)上，它不能再直接使用結(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'}}},'-','-','-']
}
]最終的一個效果：
這個里面，對應(yīng)每一個數(shù)據(jù)項都可以設(shè)置顯示顏色，具體操作就是把data:[]數(shù)組變更為：
data:[
{
value:100,
itemStyle:
{
normal:
{color:'purple'}
}
},
'-',
'-',
'-']原來的數(shù)據(jù)項，變?yōu)橐粋€對象，對象的值value對應(yīng)原來的數(shù)字值，樣式則使用itemStyle屬性設(shè)置。
甘特圖繪制需要注意的地方：
1、數(shù)據(jù)顯示疊加，使用屬性stack。
2、隱藏開始時間，設(shè)置顯示透明即可。結(jié)束時間點不能直接設(shè)置結(jié)束時間，這是一個增量，需要設(shè)置時間間隔。
3、每一個數(shù)據(jù)項展示，可以單獨設(shè)置樣式，比如顏色，可以把data數(shù)組做修改，原來單一的數(shù)字值，修改為對象，包含value,itemStyle等屬性。
到此這篇關(guān)于Vue echarts畫甘特圖流程詳細講解的文章就介紹到這了,更多相關(guān)Vue echarts畫甘特圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了TypeScript在vue中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
關(guān)于配置babel-plugin-import報錯的坑及解決
這篇文章主要介紹了關(guān)于配置babel-plugin-import報錯的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue treeselect獲取當(dāng)前選中項的label實例
這篇文章主要介紹了vue treeselect獲取當(dāng)前選中項的label實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)Tab選項卡切換，點擊不同標題顯示對應(yīng)圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue結(jié)合原生js實現(xiàn)自定義組件自動生成示例
這篇文章主要介紹了Vue結(jié)合原生js實現(xiàn)自定義組件自動生成示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要給大家介紹了關(guān)于Vue3安裝dataV報錯問題解決方案的相關(guān)資料,dataV用于大屏展示,個人覺得比echarts簡單很多,需要的朋友可以參考下2023-06-06
在本篇文章里小編給大家整理的是關(guān)于vue按需加載實例的相關(guān)知識點內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2019-09-09
這篇文章主要介紹了vue.js實現(xiàn)點擊圖標放大離開時縮小，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
vue router動態(tài)路由設(shè)置參數(shù)可選問題
這篇文章主要介紹了vue-router動態(tài)路由設(shè)置參數(shù)可選，文中給大家提到了vue-router 動態(tài)添加 路由的方法,需要的朋友可以參考下2019-08-08
寫本篇文章之前其實也關(guān)注過vue中的一個關(guān)于加載動態(tài)組件is的API，最開始研究它只是用來實現(xiàn)一個tab切換的功能,需要的朋友可以參考下2019-05-05