技术解析
创建一个div:
<div id='main' style="width: 600px;height:400px;"></div>
JavaScript部分:
<script type='text/javascript'>
var charts=echarts.init(document.getElementById('main'));
var options={
title:{
text:'test'
},
tooltip:{
trigger:'axis' //鼠标放上会显示相应y轴与x轴信息
},
xAxis:{
//如果x轴与y轴不对齐,请增加boundaryGap:false此语句
data:[1,2,3,4,5,232213,123123,4,32],
axisLabel:{
interval:0,
rotate:40
} //避免x轴数据过长,导致显示不全问题
},
legend:{
data:['test'] //这里显示的是图例
},
yAxis:{},
series:[{
data:[1,2,3,4,5,6,7,8,9], //这里为y轴数据
type:'bar' //创建图的类型 bar为柱状图,line为折线图,pie为饼图
}]
charts.setOption(options)
}
</script>