运用echarts来实现图表
1.首先下载echarts包 http://echarts.baidu.com/echarts2/doc/example.html,在这里我下载的是
2.将echarts包放到项目中,这是我在项目中的路径
3.柱状图的动态获取
首先 1)需要引入:
1 <script src="js/jquery.min.js"></script> 2 <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 3 <script type="text/javascript" src="echarts/echarts.js"></script>
2)html,为柱状图设置容器
1 <body> 2 <div id="test" style="width:600px;height:400px;"></div> 3 </body>
3)js
<script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: '<%=basePath %>echarts' } }); // 使用 require( [ 'echarts', 'echarts/chart/line', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('test')); option = { title : { text: '农户地块面积统计' }, tooltip : { trigger: 'axis' }, legend: { data:['承保人'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type: 'category', data : (function(){ var arr=[]