代码如下
直接放在echarts示例中即可看到效果
var option = {
backgroundColor: "#fff",
title: {
text: "项目工期",
padding: 20,
textStyle: {
fontSize: 17,
fontWeight: "bolder",
color: "#333"
},
subtextStyle: {
fontSize: 13,
fontWeight: "bolder"
}
},
legend: {
data: ["计划工期", "实际工期"],
align: "right",
right: 80,
top: 50
},
toolbox: {
show: true,
orient: "vertical",
left: "right",
top: "center",
feature: {
saveAsImage: { show: true }, // 保存图表
},
},
grid: {
containLabel: true,
show: false,
right: 130,
left: 40,
bottom: 40,
top: 90
},
dataZoom:[
{
type: 'slider',
start:0,
end:100,
filterMode: 'none'
}
],
xAxis: {
type: "time",
axisLabel: {
"show": true,
"interval": 0
}
},
yAxis: {
axisLabel: {
show: true,
interval: 0,
formatter: function(value, index) {
var last = ""
var max = 5;
var len = value.length;
var hang = Math.ceil(len / max);
if (hang > 1) {
for (var i = 0; i < hang; i++) {
var start = i * max;
var end = start + max;
var temp = value.substring(start, end) + "\n";
last += temp; //凭借最终的字符串
}
return last;
} else {
return value;
}
}
},
data: ["任务1", "任务2"]
},
tooltip: {
trigger: "axis",
formatter: function(params) {
var res = "";
var name = "";
var start0 = "";
var start = "";
var end0 = "";
var end = "";
for (var i in params) {
var k = i % 2;
if (!k) { //偶数
start0 = params[i].data;
console.log(start0)
start = start0.getFullYear() + "-" + (start0.getMonth() + 1) + "-" + start0.getDate();
}
if (k) { //奇数
name = params[i].seriesName;
end0 = params[i].data;
end = end0.getFullYear() + "-" + (end0.getMonth() + 1) + "-" + end0.getDate();
res += name + " : " + end + "~" + start + "</br>";
}
}
return res;
}
},
series: [
{
type:'line', //type属性标识为线图
markLine:{ //使用警戒线
symbol:'none', //取消警戒线箭头
silent:'true', //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件
data:[{ //data属性 放置自己数据,我个人X轴为365天日期,所以我后端写了个当前日期的接口传给前端用一个变量来代替
xAxis:'2020-01-17'
}],
label:{ // label属性 设置图线的样式
show:true,
color:'red',
fontSize:20,
formatter:'今日' // 如图所示返回一个String
},
lineStyle:{ //线条颜色与线条虚实
color:'red',
type:"scrollDataIndex"
},
},
},
{
name: "计划工期",
type: "bar",
stack: "总量0",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "skyblue",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [
new Date("2020-05-01"),
new Date("2020-05-01")]
},
{
name: "计划工期",
type: "bar",
stack: "总量0",
itemStyle: {
normal: {
color: "white",
}
},
zlevel: -1,
z: 3,
data: [
new Date("2020-01-01"),
new Date("2020-03-15")]
},
{
name: "实际工期",
type: "bar",
stack: "总量2",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "green",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [
new Date("2020-01-10"),
new Date("2020-03-30")]
},
{
name: "实际工期",
type: "bar",
stack: "总量2",
itemStyle: {
normal: {
color: "white",
}
},
zlevel: -1,
z: 3,
data: [
new Date("2020-01-02"),
new Date("2020-03-16")]
},
]
}