107 lines
2.2 KiB
HTML
107 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
|
</head>
|
|
<body class="pear-container">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header"></div>
|
|
<div class="layui-card-body">
|
|
<div id="echarts-line-1" style="min-height:400px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="../../component/layui/layui.js"></script>
|
|
<script src="../../component/pear/pear.js"></script>
|
|
<script>
|
|
layui.use(['echarts'], function() {
|
|
var echarts = layui.echarts;
|
|
|
|
var echartsLineOne = echarts.init(document.getElementById('echarts-line-1'));
|
|
|
|
var option1 = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#999"
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
splitNumber: 4,
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#DDD'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#333"
|
|
},
|
|
},
|
|
nameTextStyle: {
|
|
color: "#999"
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '课时',
|
|
type: 'line',
|
|
data: [23, 60, 20, 36, 23, 85],
|
|
lineStyle: {
|
|
normal: {
|
|
width: 8,
|
|
color: {
|
|
type: 'linear',
|
|
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#A9F387' // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: '#48D8BF' // 100% 处的颜色
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
|
},
|
|
shadowColor: 'rgba(72,216,191, 0.3)',
|
|
shadowBlur: 10,
|
|
shadowOffsetY: 20
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff',
|
|
borderWidth: 10,
|
|
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
|
shadowBlur: 100,*/
|
|
borderColor: "#A9F387"
|
|
}
|
|
},
|
|
smooth: true
|
|
}]
|
|
};
|
|
echartsLineOne.setOption(option1);
|
|
|
|
window.onresize = function() {
|
|
echartsLineOne.resize();
|
|
}
|
|
});
|
|
</script>
|
|
</html>
|