echart的简单应用
1.引入文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="libs/echarts/echarts.min.js"></script> </head> <body> </body> </html>
2.定义一个div设个id值
<div id="demoChart" style="width:100%; height:100%"></div>
3.js实现（重要的是option根据API设置属性方法）
var dChart = echarts.init(document.getElementById('demoChart'));
var option = {
...
title: {
....
},
grid: {
....
},
series:[
.....
]
....
}
dChart.setOption(option);
下面是一个完整的实例自己引好echarts.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='echarts.min.js'></script>
</head>
<body>
<div id="rankChart" style="width:700px; height:700px"></div>
<script type="text/javascript">
var rankChart = echarts.init(document.getElementById('rankChart'));
var option = {
title: {
text: 'top10',
top: 20,
left:20
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis:[
{
type: 'value',
axisLine:{
show:false
},
axisTick:{
show:false
},
splitLine:{
lineStyle:{
color:'#d1d1d1',
width: 2,
type:'dotted'
}
},
axisLabel: {
formatter: '{value} 台'
},
min: 500,
max: 8000,
boundaryGap: [0, 0.01]
},
{
type: 'value',
axisLine:{
show:false
},
axisTick:{
show:false
},
axisLabel: {
formatter: '{value} 台'
},
splitLine:{
show:false
},
min: 500,
max: 8000,
boundaryGap: [0, 0.01]
}
],
yAxis: {
type: 'category',
axisLine:{
show:false
},
axisTick:{
show:false
},
axisLabel:{
margin: 17
},
data: ['状态严重','状态异常','油湿','重载','台风','高温','乙炔','油色谱','套管']
},
color:'rgb(72, 207, 173)',
series: [
{
name: '2012年',
barMaxWidth: 25, //条的宽度
type: 'bar',
itemStyle:{
normal:{
color:'#63b7e7'
},
emphasis:{
color:'#ffa838'
}
},
data: [1000, 1500, 2300, 2900, 4000,5000,6000,7000,8000]
}
]
}
rankChart.setOption(option);
</script>
</body>
</html>
