上次的柱状图的展示进行完善：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts展示</title>
<script type="text/javascript" src="echarts.js"></script>
</head>
<body>
<div id="echart" style="width:1100px; height:500px;"></div>
</body>
<script type="text/javascript">
var echart=echarts.init(document.getElementById('echart'));
var option={
title:{
text:'销售'
},
legend:{
data:['购买金额','销售金额','面积']
},
xAxis:{
type:'category',
//边界差距（边界对齐）
boundaryGap:false,
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
},
//鼠标放上显示信息
tooltip:{
trigger:'axis',
axisPonter:{
type:'cross',
animation:false,
label:{
backgroundColor:'#505765'
}
},
show:true,
formatter:'系列名:{a}<br>类目:{b}<br>数值:{c}'
},
//滑动轴
dataZoom:[{
show:true,
realtime:true,
start:65,
end:85
},{
type:'inside',
realtime:true,
start:65,
end:85
}],
series:[{
name:'购买金额',
type:'bar',
data:[299,222,343,232,243,344,545],
//设置平均值
markLine:{
data:[
{type:'average',name:'平均值',itemStyle:{
normal:{
color:'red'
}
}}
]
},
//显示最大值最小值
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
},{
name:'销售金额',
type:'line',
data:[222,322,433,554,242,145,345],
markLine:{
data:[
{type:'average',name:'平均值',lineStyle:{
normal:{
color:'green'
}
}},{
yAxis:480
}
]
}
},
//面积
{
name:'面积',
type:'line',
data:[123,232,423,232,452,112,542],
//鼠标放在节点处，节点变大
symbolSize:'symbolSize',
//光滑曲线
smooth:true,
areaStyle:{}
}]
};
/*
散点图
option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.2, 8.04],
[8.1, 6.95],
[13.2, 7.58],
[4.0, 8.81],
[15.0, 8.33],
[14.6, 9.96],
[6.4, 7.24],
[4.3, 4.26],
[12.6, 10.84],
[7.4, 4.82],
[5.7, 5.68]
],
type: 'scatter'
}]
};
*/
window.onresize = echart.resize;
echart.setOption(option);
</script>
</script>
</html>