echart在jsp中使用另外的方法

 var chartOutChar = null;
 
 var option1 = {
     tooltip: {
         trigger: 'axis'
     },
     toolbox: {
         feature: {
             dataView: {show: true, readOnly: false},
             magicType: {show: true, type: ['line', 'bar']},
             restore: {show: true},
             saveAsImage: {show: true}
         }
     },
     legend: {
         data:['蒸发量','降水量','平均温度']
     },
     xAxis: [
         {
             type: 'category',
             data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
         }
     ],
     yAxis: [
         {
             type: 'value',
             name: '水量',
             min: 0,
             max: 250,
             interval: 50,
             axisLabel: {
                 formatter: '{value} ml'
             }
         },
         {
             type: 'value',
             name: '温度',
             min: 0,
             max: 25,
             interval: 5,
             axisLabel: {
                 formatter: '{value} °C'
             }
         }
     ],
     series: [
         {
             name:'蒸发量',
             type:'bar',
             data:[]
         },
         {
             name:'降水量',
             type:'bar',
             data:[]
         },
         {
             name:'平均温度',
             type:'line',
             yAxisIndex: 1,
             data:[]
         }
     ]
 };
 
 function loadChartOut() {
     $.getJSON('/maze/rest/view/rain.html', function (data) {
         //上面这个url是重点，组成为：项目名/过滤前缀/Controller中mapping值，当页面加载此js时，它会向后台取数据，将后台的数据注入到echart中
         if (data.success1) {
             chartOutChar.showLoading({text: '正在努力的读取数据中...'});
             chartOutChar.setOption({
                 series: [
                     {
                         name:'蒸发量',
                         data:data.c_eva
                     },
                     {
                         name:'降水量',
                         data:data.c_rain
                     },
                     {
                         name:'平均温度',
                         data:data.c_avgt
                     }
                 ]
             });
             chartOutChar.hideLoading();
         }else {
             alert('提示', data.msg);
         }
     });
 }
 
 //载入图表
 $(function () {
     chartOutChar = echarts.init(document.getElementById('showChart'));
     chartOutChar.setOption(option1);
     loadChartOut();
     window.addEventListener('resize', function () {
         chartOutChar.resize();
         mychart.resize();
     });
 });

controllr

 @Controller
 @RequestMapping(value = "/view")
 public class EchartsController {
     @Resource
     private EchartService echartService;
 
     @RequestMapping(value = "/rain.html",method = RequestMethod.GET)
     @ResponseBody
     public Object showChart(){
         Map<String, Object> map = new HashMap<String, Object>();
         List<Float> clist1 = new ArrayList<Float>();
         List<Float> clist2 = new ArrayList<Float>();
         List<Float> clist3 = new ArrayList<Float>();
 
         List<EcBar> chartList = echartService.listBar();
 
         for(EcBar cl : chartList){
             clist1.add(cl.getEvaporation());
             clist2.add(cl.getRainfall());
             clist3.add(cl.getAvgtemp());
         }
         map.put("c_eva",clist1);
         map.put("c_rain",clist2);
         map.put("c_avgt",clist3);
         map.put("success1",true);
         return map;
     }
 }

jsp页面

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 <script type="text/javascript" src="hemi/js/echarts.js"></script>
 <script type="text/javascript" src="hemi/js/showChart.js"></script>
 <script type="text/javascript" src="hemi/js/funnelView.js"></script>
 
 <h3 class="page-title">
     Echarts 展示 <small>可视化图表</small>
 </h3>
 </div>
 
 <div class="row">
     <div class="col-lg-6 col-sm-12 col-xs-12 col-sm-12">
         <div id="showChart" style="width:100%;height:600px;margin-left:0px;margin-right:6px;margin-bottom:8px;float:left;overflow:hidden;"></div>
     </div>
 
     <div class="col-lg-6 col-sm-12 col-xs-12 col-sm-12">
         <div id="showFunnelChart" style="width:100%;height:600px;margin-left:0px;margin-right:6px;margin-bottom:8px;float:left;overflow:hidden;"></div>
     </div>
 </div>

 

这种是采用js获取后台数据放入页面的所以是比较和谐的，可以使用html，也可以使用其他的