由于業(yè)務(wù)的需要忽媒，在echarts基礎(chǔ)上注竿，二次封裝了甘特圖組件來滿足業(yè)務(wù)的需要辰妙。
先看效果
無文字甘特圖
有文字甘特圖
技術(shù)實(shí)現(xiàn)
直接上代碼压状，組件封裝
placeholder-bar.vue
<template>
<div>
<div :id="idKey" class="placeholder-bar-box" />
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Index',
props: {
idKey: {
type: String,
default: 'placeholder-bar'
},
dataList: {
type: Array,
default: () => []
},
xData: {
type: Array,
default: () => []
},
yData: {
type: Array,
default: () => []
}
},
data() {
return {
myChart: ''
}
},
computed: {
option() {
const colors = ['#0F62FE', '#0F62FE', '#0F62FE', '#0F62FE']
return {
color: colors,
tooltip: {
formatter: function(params) {
return params.name + ':' + params.value[1] + '~' + params.value[2]
}
},
grid: {
left: '3%',
right: '3%',
top: '6%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.xData || ['2022-06-15', '2022-06-18', '2022-06-20', '2022-06-25', '2022-07-01', '2022-08-25', '2022-11-14', '2022-12-13'],
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
formatter: (value) => {
const max = 10
const val = value.length
const rowM = Math.ceil(val / max)
if (rowM > 1) {
let temp = ''
const end = val
temp = value.substring(0, max) + '\n' + value.substring(max, end)
return temp
} else {
return value
}
}
}
},
yAxis: {
data: this.yData || ['測試1', '測試2', '測試3', '測試4']
},
series: [
{
type: 'custom',
renderItem: function(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 = 5
return {
type: 'rect',
shape: 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
}),
style: api.style()
}
},
encode: {
x: [1, 2],
y: 0
},
data: this.dataList
}
]
}
}
},
watch: {
dataList: {
handler(newName, oldName) {
this.$nextTick(() => {
this.updata()
})
},
deep: true
}
},
mounted() {
const chartDom = document.getElementById(this.idKey)
const myChart = echarts.init(chartDom)
this.myChart = myChart
const myObserver = new ResizeObserver(entry => {
this.myChart && this.myChart.resize()
})
// 添加要監(jiān)聽的元素仆抵，把echart的container div添加為監(jiān)聽對象
myObserver.observe(chartDom)
window.addEventListener('resize', () => {
this.resize()
})
},
destroyed() {
window.removeEventListener('resize', () => {
})
},
methods: {
resize() {
this.myChart.resize()
},
updata() {
this.onPlaceholderBarData()
this.resize()
},
onPlaceholderBarData() {
this.option && this.myChart.setOption(this.option)
this.myChart.hideLoading()
}
}
}
</script>
<style lang="scss" scoped>
.placeholder-bar-box {
width: 100%;
height: 100%;
}
</style>
組件對外提供的參數(shù)
1、idKey:唯一標(biāo)識ID
2种冬、dataList:[] 需要的數(shù)據(jù)
數(shù)據(jù)格式：
[
{
itemStyle: { normal: { color: '#0F62FE' }}, // 條形顏色
name: 測試,
value: [0镣丑，2022-02-02,2022-03-02]// 0,1,2代表y軸的索引，后兩位代表x軸數(shù)據(jù)開始和結(jié)束
}
]
3娱两、xData：X坐標(biāo)數(shù)據(jù)
4莺匠、yData：Y坐標(biāo)數(shù)據(jù)
使用說明
引入組件
import placeholderBar from '@/views/common/placeholder-bar'
<placeholderBar ref="placeholderBarRef" :x-data="xData" :y-data="yData" style="width: 100%;height: 250px" :data-list="placeholderBarData" />
需要文字填充
修改renderItem
思路：用下標(biāo)記錄是否相同Y坐標(biāo)，如果相同計數(shù)取值
（歡迎大家提出不同的解決問題思路）
renderItem: (params, api) => {
const categoryIndex = api.value(0)
const start = api.coord([api.value(1), categoryIndex])
const end = api.coord([api.value(2), categoryIndex])
const name = this.yData[categoryIndex]
const list = this.dataList.filter(item => item.name === name)
const height = 20
let text = ''
if (this.indexY === categoryIndex) {
this.indexItem += 1
text = list[this.indexItem]?.name2
if (!text) {
this.indexItem = 0
text = list[this.indexItem]?.name2
}
} else {
text = list[0]?.name2
this.indexY = categoryIndex
this.indexItem = 0
}
return {
type: 'rect',
shape: 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
}),
style: api.style(
{
text: text,
fontSize: '8px',
textFill: '#fff'
}
)
}
},
這里不在詳細(xì)介紹每個API的使用了十兢，不懂得可以去官網(wǎng)查看相關(guān)API配置趣竣。
大家可直接復(fù)制代碼運(yùn)行demo吧，多看文檔多動手嘗試旱物，可解決一切問題遥缕。
