如图所示
image.png
1.echarts 下载
npm install echarts --save
2.main.js引入 echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.页面代码：
<template>
<div>
<div style="width: 700px;height: 300px;margin: 30px" id="activity_gantt"></div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {}
},
created() {
this.$nextTick(() => {
//动态数据 post_data我自己写了一个。
let post_data = {
start_date: "2019/07/01",
stop_date: "2019/07/31",
act_list:[
{
start:"2019/07/10",
stop:"2019/07/20",
},
{
start:"2019/07/12",
stop:"2019/07/16",
},
{
start:"2019/07/02",
stop:"2019/07/12",
},
],
x_list: ["2019/07/01", "2019/07/02", "2019/07/03", "2019/07/04", "2019/07/05", "2019/07/06", "2019/07/07",
"2019/07/08", "2019/07/09", "2019/07/10", "2019/07/11", "2019/07/12", "2019/07/13", "2019/07/14",
"2019/07/15", "2019/07/16", "2019/07/17", "2019/07/18", "2019/07/19", "2019/07/20", "2019/07/21",
"2019/07/22", "2019/07/23", "2019/07/24", "2019/07/25", "2019/07/26", "2019/07/27", "2019/07/28",
"2019/07/29", "2019/07/30", "2019/07/31"
]
}
//计算两个日期相差天数
function DateDiff(sDate1, sDate2) {
//sDate1和sDate2是2006-12-18格式
var aDate, oDate1, oDate2, iDays;
aDate = sDate1.split("/");
oDate1 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]);
aDate = sDate2.split("/");
oDate2 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]);
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);//把相差的毫秒数转换为天数
return iDays;
}
let start_ = post_data.start_date
let start_list = []
let end_list = []
let index_list = []
post_data.act_list.forEach((value, index) => {
index_list.push(index)
start_list.push(DateDiff(start_, value.start))
end_list.push(DateDiff(value.start, value.stop))
})
this.$echarts.init(document.getElementById('activity_gantt')).dispose();//销毁前一个实例
let ganttOptionChart = this.$echarts.init(document.getElementById('activity_gantt'));
let ganttOption = {
backgroundColor:'rgb(34,44,61)',
//设置canvas内部表格的内距
grid: {
x: 35,
y: 5,
x2: 40,
y2: 30,
},
xAxis: {
type: 'value',
// 坐标网格
splitLine: {
show:true,
lineStyle:{
width:0.6,
color: 'rgba(255,255,255,0.2)',
type:'dashed'
}
},
//设置x轴坐标线的样式
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(255,255,255,0.3)',//x轴坐标线的颜色
width:'1'//x轴坐标线的宽度
}
},
//x轴刻度数值颜色
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.3)'
},
formatter: function (value, index) {
// 显示 2019/07/01
return post_data.x_list[value]
},
},
},
yAxis: {
data:[],
// 坐标网格
splitLine: {
show:true,
lineStyle: {
width: 0.6,
color: 'rgba(255,255,255,0.2)',
type: 'dashed'
}
},
//y轴刻度线
axisTick: {
show: false
},
//y轴坐标线
axisLine: {
show: false,
},
//y轴刻度值
axisLabel: {
show: false
},
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {}
},
series: [
{
barWidth: 8,//柱图宽度
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [],
},
{
barWidth: 8,//柱图宽度
//每个项目 持续时间长度
type: 'bar',
stack: '总量',
label: {
normal: {//柱形图上面显示的文字
show: false,
position: 'inside'
}
},
data: [],
itemStyle: {
normal: {
// 柱形图颜色
color: '#14E09B'
},
}
}
]
}
//塞数据
ganttOption.yAxis.data = index_list
ganttOption.series[0].data = start_list
ganttOption.series[1].data = end_list
ganttOptionChart.setOption(ganttOption);
window.addEventListener("resize", () => {
ganttOptionChart.resize()
})
})
},
}
</script>
下一篇文章有甘特图添加点击事件记录点击坐标以及添加标注线。
