echarts.js文件下载地址: Apache ECharts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="echarts.js"></script>
</head>>
<body>
<div id="main" style="width: 600px;height: 400px"></div>>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById("main"));
var option={
title:{
text:"风景名胜区门票价格",
textStype:{
color:'green',
},
left:15,
top:0
},
tooltip:{
trigger:'axis'
},
legend:{
data:['景区A','景区B','景区C'],
left:260,
top:3
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
toolbox:{
feature:{
saveAsImage:{}
}
},
xAxis:[
{
type:'category',
data:['2013年','2014年','2015年','2016年','2017年','2018年','2019年']
}
],
yAxis:[
{
type:'value'
}
],
series:[
{
name:'景区A',
type:'line',
step:'start',
data:[120,140,120,160,250,280,240]
},
{
name:'景区B',
type:'line',
step:'middle',
data:[220,280,300,350,320,380,350]
},
{
name:'景区C',
type:'line',
step:'end',
data:[400,480,540,450,580,750,650]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>>