员工项目进度可视化图表-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_64180190/article/details/133694623

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>员工项目进度曲线图</title>

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 400px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
color: ['#6199be', '#b66047', '#61b845', '#cf6aac'],
backgroundColor: '#000',
legend: {
bottom: 10,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255)'
},
data: ['员工A', '员工B', '员工C', '员工D'],
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
var html = params[0].name + '<br/>';

for (var i = 0; i < params.length; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
html += seriesName + ': ' + value + '%<br/>';
}

return html;
}
},
grid: {
left: 60,
right: 20,
top: 40,
bottom: 70
},
xAxis: [{
name: '日期',
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255)",
},
data: ['2020/01/01', '2020/02/01', '2020/03/01', '2020/04/01', '2020/05/01', '2020/06/01', '2020/07/01']
}],
yAxis: [{
type: 'value',
name: '进度',
min: 0,
max: 100,
interval: 20,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
axisLabel: {
formatter: '{value}%',
color: '#fff'
}
}],
series: [{
name: '员工A',
type: 'line',
smooth: true,
data: [20, 40, 60, 80, 90, 95, 98],
areaStyle: {
color: '#6199be',
opacity: 0.3
}
},
{
name: '员工B',
type: 'line',
smooth: true,
data: [10, 20, 30, 40, 50, 60, 70],
areaStyle: {
color: '#b66047',
opacity: 0.3
}
},
{
name: '员工C',
type: 'line',
smooth: true,
data: [50, 55, 60, 65, 70, 75, 80],
areaStyle: {
color: '#61b845',
opacity: 0.3
}
},
{
name: '员工D',
type: 'line',
smooth: true,
data: [30, 35, 40, 45, 50, 55, 60],
areaStyle: {
color: '#cf6aac',
opacity: 0.3
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>

这是员工曲线图