echarts如何显示在页面上
1.引入echarts的相关.js文件
<script src="js/echarts.min.js"></script>
2.新建一个div，style自己定，但必须要有width和height
<div id="history_state" style="width: 400px;height: 200px"></div>
3.document.ready()中设置echarts的option
$(document).ready(function(e) {
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
calculable : true,
yAxis : [
{
type : 'value'
}
],
xAxis : [
{
type : 'category',
data : ['1','2','3','4','5','6','7','8','9','10','11','12']
}
],
series : [
{
name:'直接访问',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[320, 302, 301, 334, 390, 330, 320]
},
{
name:'邮件营销',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
//获取echarts对象
var history_state = echarts.init(document.getElementById('history_state'));
//设置option
history_state.setOption(option);
});
这样就能显示了。
补充。。document.ready()方法是在dom加载完成，页面完全呈现后调用的。