echarts如何显示在页面上

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加载完成，页面完全呈现后调用的。