当前位置：首页 > news >正文

VUE使用echarts编写甘特图（组件）

news 来源：原创 2024/9/22 5:43:26

直接上代码

<template><div ref="chartContainer" class="chart-container" style="width: 100%; height: 600px;"></div>
</template><script>
import * as echarts from 'echarts'export default {name: 'CustomGanttChart',data() {return {chartInstance: null,chartData: [{ category: '任务一', start: '2024/09/01 09:00', end: '2024/09/03 17:00', status: '可用' },{ category: '任务一', start: '2024/09/04 09:00', end: '2024/09/05 17:00', status: '故障' },{ category: '任务一', start: '2024/09/06 09:00', end: '2024/09/08 17:00', status: '可用' },{ category: '任务二', start: '2024/09/09 09:00', end: '2024/09/11 17:00', status: '故障' },{ category: '任务二', start: '2024/09/12 09:00', end: '2024/09/15 17:00', status: '可用' },{ category: '任务三', start: '2024/09/16 09:00', end: '2024/09/18 17:00', status: '可用' },{ category: '任务三', start: '2024/09/19 09:00', end: '2024/09/21 17:00', status: '故障' },{ category: '任务三', start: '2024/09/22 09:00', end: '2024/09/25 17:00', status: '可用' }]}},mounted() {this.initChart()window.addEventListener('resize', this.chartInstance.resize)},methods: {initChart() {const chartContainer = this.$refs.chartContainerthis.chartInstance = echarts.init(chartContainer)this.updateChart()},updateChart() {const colors = ['#2EC7C9']  // 只有一个颜色const states = ['可用']     // 只有一个状态名称const option = {color: colors,tooltip: {formatter: function (params) {return params.name + ': ' + params.value[1] + ' ~ ' + params.value[2]}},legend: {data: states,top: '1%',selectedMode: false,textStyle: {color: '#000'}},grid: {left: '3%',right: '3%',top: '10%',bottom: '15%',containLabel: true},xAxis: {type: 'time',interval: 3600 * 12 * 1000,axisLabel: {formatter: function (value) {const date = new Date(value)return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}\n${date.getDate()}/${date.getMonth() + 1}`},rotate: 45 // 旋转标签}},yAxis: {type: 'category',data: [...new Set(this.chartData.map(data => data.category))]},dataZoom: [{type: 'inside',xAxisIndex: 0,start: 0,end: 100},{type: 'slider',xAxisIndex: 0,start: 0,end: 100}],series: [{name: states[0],type: 'bar',stack: 'status',data: [] // Empty series for legend},{type: 'custom',renderItem: function (params, api) {const categoryIndex = api.value(0)const start = api.coord([api.value(1), categoryIndex])const end = api.coord([api.value(2), categoryIndex])const height = 24return {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.chartData.map(item => ({itemStyle: {color: item.status === '可用' ? colors[0] : 'transparent' // 设置可用为颜色，故障为透明},name: item.status,value: [item.category, item.start, item.end]}))}]}this.chartInstance.setOption(option)}}
}
</script><style scoped>
.chart-container {width: 100%;height: 600px;
}
</style>