<body>
<div id="echarts" style="height:300px;"></div>
<script type="text/javascript">
var mychartdd = echarts.init(document.getElementById('echarts'));
option = {
title: {
text: '今日',
left: '50%',
textAlign: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#ddd'
}
},
backgroundColor: 'rgba(255,255,255,0.5)',
padding: [5, 10],
textStyle: {
color: '#7588E4',
},
extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
},
dataZoom: [{
type:'slider',
xAxisIndex:0,
height:'15',
bottom:'55',
show: true,
start: 0,
end: 100,
handleStyle:{ /*手柄的样式*/
width:'20',
color:"#085ABF",
borderColor:"#085ABF"
},
backgroundColor:"#f7f7f7", /*背景 */
dataBackground:{ /*数据背景*/
lineStyle:{
color:"#dfdfdf"
},
areaStyle:{
color:"#dfdfdf"
}
},
fillerColor:"#FFEFBE", /*被start和end遮住的背景*/
labelFormatter:function (value,params) { /*拖动时两端的文字提示*/
var str = "";
if(params.length > 4){
str = params.substring(0,4)+"…";
}else {
str = params;
}
return str;
}
}],
legend: {
right: 20,
orient: 'vertical',
data: ['今日']
},
xAxis: {
type: 'category',
name:'日期',
data: ['00:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00',"22:00"],
boundaryGap: false,
splitLine: {
show: false,
interval: 'auto',
lineStyle: {
color: ['#EEEEEE']
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#50697A'
}
},
axisLabel: {
margin: 10,
textStyle: {
color:'#50697A',
fontSize: 13
}
}
},
yAxis: {
type: 'value',
name:'数量（件）',
splitLine: {
lineStyle: {
color: ['#EEEEEE']
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#50697A'
}
},
axisLabel: {
margin: 10,
textStyle: {
color:'#50697A',
fontSize: 13
}
}
},
series: [{
name: '今日',
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(16, 79, 193,1)'
}, {
offset: 1,
color: 'rgba(125, 178, 244,1)'
}], false)
}
},
itemStyle: {
normal: {
color: 'rgba(16, 79, 193,1)'
}
},
lineStyle: {
normal: {
width: 0
}
}
},{
name:'折线',
type:'line',
symbol:'circle',
symbolSize:10,
data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
itemStyle:{ //折线拐点的样式
normal:{
color:'#FAC220', //折线拐点的颜色
}
},
lineStyle:{ //线条的样式
normal:{
color:'#FAC220', //折线颜色
}
}
}]
};
mychartdd.setOption(option);
</script>
</body>
实际效果图如下：
QQ图片20180108161225.png
