这里我只对折线图做了简单的实现,更多的参数配置请参考官方配置手册 官方文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
</head>
<body>
<div id="echarts02" style="width: 600px;height: 400px;background-color: dimgrey;"></div>
</body>
<script src="../lib/jquery.1.11.3.min.js"></script>
<script src="../lib/echarts.min.js"></script>
<script>
var mountainFb = echarts.init(document.getElementById('echarts02'));
var option02 = {
//设置触碰焦点显示
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
color: "#f4842e",
xAxis: {
type: 'category',
name:'月份',
boundaryGap: false,
nameTextStyle:{
fontSize:18,// X轴箭头文字大小
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#fff'
},
symbol: ['none', 'arrow'],
symbolSize: [5, 12], //---箭头大小
symbolOffset: [0, 11],
},
axisLabel:{
interval:0,
//rotate:-30,
textStyle:{
fontSize:14,//X轴刻度文字大小
},
margin:20,
},
splitLine:{//隐藏网格线
show: false,
},
},
yAxis: {
name: '单位/个',
type: "value",
max: 30,
nameTextStyle:{
fontSize:18,
},
axisLabel:{
textStyle:{
fontSize:14,//X轴刻度文字大小
},
margin:20,
},
axisLine: {
lineStyle: {
color: "#fff"
},
symbol: ['none', 'arrow'],//箭头
symbolSize: [5, 12], //---箭头大小
symbolOffset: [0, 11],
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#173f80'],
width: 1,
type: 'solid'
}
},
splitLine:{//隐藏网格线
show: false,
}
},
series: [{
data: [15,18,16,14,12,13,14,12,9,5,8,14],
type: 'line',
smooth: true,
symbol: "none",//是否显示拐点
areaStyle: {
color: '#3e1914',
origin: 'start',
opacity: 0.5,
},
}]
}
mountainFb.setOption(option02)
</script>
</html>