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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了TypeScript在vue中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決
這篇文章主要介紹了關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue treeselect獲取當(dāng)前選中項(xiàng)的label實(shí)例
這篇文章主要介紹了vue treeselect獲取當(dāng)前選中項(xiàng)的label實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue實(shí)現(xiàn)Tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)Tab選項(xiàng)卡切換，點(diǎn)擊不同標(biāo)題顯示對(duì)應(yīng)圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue結(jié)合原生js實(shí)現(xiàn)自定義組件自動(dòng)生成示例
這篇文章主要介紹了Vue結(jié)合原生js實(shí)現(xiàn)自定義組件自動(dòng)生成示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要給大家介紹了關(guān)于Vue3安裝dataV報(bào)錯(cuò)問題解決方案的相關(guān)資料,dataV用于大屏展示,個(gè)人覺得比echarts簡單很多,需要的朋友可以參考下2023-06-06
在本篇文章里小編給大家整理的是關(guān)于vue按需加載實(shí)例的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2019-09-09
vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開時(shí)縮小的代碼
這篇文章主要介紹了vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開時(shí)縮小，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
vue router動(dòng)態(tài)路由設(shè)置參數(shù)可選問題
這篇文章主要介紹了vue-router動(dòng)態(tài)路由設(shè)置參數(shù)可選，文中給大家提到了vue-router 動(dòng)態(tài)添加 路由的方法,需要的朋友可以參考下2019-08-08
vue動(dòng)態(tài)注冊組件實(shí)例代碼詳解
寫本篇文章之前其實(shí)也關(guān)注過vue中的一個(gè)關(guān)于加載動(dòng)態(tài)組件is的API，最開始研究它只是用來實(shí)現(xiàn)一個(gè)tab切換的功能,需要的朋友可以參考下2019-05-05