甘特图（二）添加标注线和坐标位置
2019-11-26 本文已影响0人
小北呀_
如图所示：
1.echarts 下载
npm install echarts --save
2.main.js引入 echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.页面代码：
<template>
<div>
<div class="index">
<div style="width:100%;height:100%;" id="activity_gantt"></div>
<p class='title' :style="{top:offsetY+ 'px',left:offsetX + 'px'}">{{title}}</p>
</div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
offsetX:'',
offsetY:'',
title:''
}
},
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",
title:'活动A'
},
{
start:"2019/07/12",
stop:"2019/07/16",
title:'活动B'
},
{
start:"2019/07/02",
stop:"2019/07/12",
title:'活动C'
},
],
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'
},
},
//标注线
markLine: {
data:[],
lineStyle: {
normal: {
color: '#fff',
}
},
label: {
normal: {
fontWeight: 'bold',
padding: 2,
fontSize: 14,
fontFamily: 'Microsoft YaHei',
},
},
}
}
]
}
//塞数据
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()
})
ganttOptionChart.on('click', (params) => {
// 坐标
this.offsetX = params.event.offsetX - 20
this.offsetY = params.event.offsetY - 60
let index = Number(params.name)
// 活动标题
this.title = post_data.act_list[index].title
// 添加甘特图的标注线
let start_x = '0',stop_x = '0'
post_data.x_list.forEach(function (value,valueIndex) {
if (value === post_data.act_list[index].start) {
start_x = valueIndex
}
if (value === post_data.act_list[index].stop) {
stop_x = valueIndex
}
})
ganttOption.series[1].markLine.data = [
//一个活动的开始x轴
[
{ xAxis: start_x, yAxis: 'min', symbol: 'circle' },
{ xAxis: start_x, yAxis: 'max', symbol: 'circle' }
],
//一个活动的结束x轴
[
{ xAxis: stop_x, yAxis: 'min', symbol: 'circle' },
{ xAxis: stop_x, yAxis: 'max', symbol: 'circle' }
]
]
ganttOptionChart.setOption(ganttOption);
})
})
},
}
</script>
<style>
.index{
width: 700px;height: 300px;margin: 30px;position: relative
}
.title{
width: 50px;
height: 20px;
background: #fff;
color: #333333;
border-radius: 4px;
padding: 3px;
position: absolute;
}
</style>
标注线主要代码在series好热点击事件里。
