echarts

Model模型:

/**
 * element of Echarts series
 * 通用的，若有其他的图表可以另外新建Model
 */
public class EchartModel {
    private String name;//系列名称
    private String type;//图表类型：'line'(折线图)|'bar'(柱状图)|'scatter'(散点图)|'k'(K线图) |'pie'(饼图)|'radar'(雷达图)|'chord'(和弦图)|'force'(力导向布局图)|'map'(地图)
    private int yAxisIndex;//左右Y轴：0左、1右
    private List<Object> data;//数据
    

    public EchartModel() {
    }
    public EchartModel(String name, String type,
            int yAxisIndex) {
        this.name = name;
        this.type = type;
        this.yAxisIndex = yAxisIndex;
    }
    public EchartModel(String name, String type,
            int yAxisIndex, List<Object> data) {
        this.name = name;
        this.type = type;
        this.yAxisIndex = yAxisIndex;
        this.data = data;
    }
    
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
    public int getyAxisIndex() {
        return yAxisIndex;
    }
    public void setyAxisIndex(int yAxisIndex) {
        this.yAxisIndex = yAxisIndex;
    }
    public List<Object> getData() {
        return data;
    }
    public void setData(List<Object> data) {
        this.data = data;
    }
}

控制器:

@RequestMapping(value = "/common/datacenter/nationalindustries/getData")
    @ResponseBody
    protected Map<String, Object>  getData(@ModelAttribute CeDataCocalconsumeNationalindustriesModel queryModel,
            HttpServletResponse response) throws ServletException, IOException, ParseException {
        Map<String, Object> resultMap = new HashMap<String, Object>();
        
        queryModel.setOrderBy(" t.gatherTime desc");//时间降序、
        List<CeDataCocalconsumeNationalindustries> resultList = ceDataCocalconsumeNationalindustriesManager.listQuery(queryModel);//年度gdp结果集
        
        List<String> legendList = new ArrayList<String>();//图表外条件集
        List<String> yearList = new ArrayList<String>();//年份集
        List<EchartModel> echartSeriesList = new ArrayList<EchartModel>();//echars传输的数据集
        legendList.add("煤炭消费总量(万吨)");
        legendList.add("工业煤炭消费总量(万吨)");
        legendList.add("采掘业煤炭消费总量(万吨)");
        int legendIndex = 0;
        echartSeriesList.add(new EchartModel(legendList.get(legendIndex++), "bar", 0, new ArrayList<Object>()));
        echartSeriesList.add(new EchartModel(legendList.get(legendIndex++), "bar", 0, new ArrayList<Object>()));
        echartSeriesList.add(new EchartModel(legendList.get(legendIndex++), "bar", 0, new ArrayList<Object>()));
        for (CeDataCocalconsumeNationalindustries result : resultList) {
            String year = result.getGatherTime()+"";
            
            if (yearList.indexOf(year) == -1) {
                yearList.add(0, year);//因时间降序  时间集循环填入数据
            }
            legendIndex = 0;
            echartSeriesList.get(legendIndex++).getData().add(0, result.getConsumeSum()==null ? 0 : result.getConsumeSum());
            echartSeriesList.get(legendIndex++).getData().add(0, result.getConsumeIndustry()==null ? 0 : result.getConsumeIndustry());
            echartSeriesList.get(legendIndex++).getData().add(0, result.getConsumeMine()==null ? 0D : result.getConsumeMine());
        }
        resultMap.put("legendDatas", legendList);
        resultMap.put("gatherTimes", yearList);
        resultMap.put("echartSeries", echartSeriesList);
        StringBuffer sb = new StringBuffer();
        sb.append("{"lend": "+MyJsonTools.toJson(legendList)+","companyName":" +MyJsonTools.toJson(gatherTimeList)+ ","data":" 　　　　　　　　　　　　+MyJsonTools.toJson(echartSeriesList)+"}");
        request.setAttribute("resultList", resultList);
        response.getWriter().println(sb);
    }

jsp：

（1）引入echarts插件

<script src="${rootUrl}js/echarts/build/dist/echarts.js"></script>
<script type="text/javascript" src="${rootUrl}js/echarts/build/dist/chart/main.js"></script>

（2）摆放处

<div class="row p-r-20 p-l-20">
           <div id="main" style="height:400px;"></div>
 </div>

js:

<script type="text/javascript">
$(function() {
    $.ajaxSetup({cache:false});
    $('#listManage').taiji();
    require.config({  
        paths:{   
             echarts: "${rootUrl}js/echarts/build/dist",
        }  
    });  
    require(  
        [  
            'echarts',  
            'echarts/chart/bar',  
            'echarts/chart/line',  
            'echarts/chart/map',
            'echarts/theme/macarons'  
        ],  
        function (ec) {  
            var chart = document.getElementById('main');  
            var echart = ec.init(chart);  
            echart.showLoading({  
                text: '正在努力加载中...'  
            });  
              
            var categories = [];  
            var values = [];  
            var y2 = [];  
            var lend = [];
            option = {
                    grid :{
                         y:30,
                           y2:80
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                       y:'bottom',
                        data:[]
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                             type : 'category',
                             data:[]
                        }
                    ],
                    yAxis : [
                        {
                            name :'',
                            type : 'value'
                        }
                    ],
                
                    series :[]
                };
                                    
            echart.setOption(option);  
            echart.hideLoading();  
               $.post("${rootUrl}app/datacenter/benchmarking/duibiao/jituan/getLineData",
                       {
                         month : $("#month").val(),　　　　　　//传到后天的参数
                         type :$("#db").val()
                        },
                       function (json){
                 var msg = eval("(" + json + ")");
                 var option = echart.getOption();
                 var c = msg.companyName;
                  for (var i in c) {
                     option.xAxis[0].data[i]=c[i];    
                     }
                 var lend= msg.lend;
                 for (var i in lend) {
                    option.legend.data[i]=msg.lend[i];
                    option.series[i]={name:msg.data[i].name,type:'line',data:msg.data[i].data};
                 }
                 if("发电标准煤耗" == msg.lend){
                 option.yAxis[0] = {name:'克/千瓦时',type:'value'};
                 }
                 if("煤折标煤单价" == msg.lend){
                     option.yAxis[0] = {name:'元/吨',type:'value'};
                     }
                 if("入厂标煤单价涨幅" == msg.lend){
                     option.yAxis[0] = {name:'元/吨',type:'value'};
                     }
                 if("发电耗用标煤量" == msg.lend){
                     option.yAxis[0] = {name:'吨',type:'value'};
                     }
                 echart.setOption(option,true);
             });
            
              $('#listManage').taiji();
            $("#dcQueryBtn").click(function (){
                // 同步执行  
                $.ajaxSettings.async = false;  
                $.post("${rootUrl}app/datacenter/benchmarking/duibiao/jituan/getLineData",
                        {
                            month : $("#month").val(),
                             type :$("#db").val()
                            },
                         function (json) {
                             var msg = eval("(" + json + ")");
                            
                             var option = echart.getOption();
                             option.xAxis[0].data=[];　　　　　　　　　　//对x轴数据进行清空  option.series[0]={};　　
                             option.series=[];　　　　　　　　　　　　　　　//对数据进行清空

　　　　　　　　　　option.legend.data=[];
                             var c = msg.companyName;
                              for (var i in c) {
                                 option.xAxis[0].data[i]=c[i];     　　　　　　//这里需要写明x0轴的第几个数据
                                 }
                             var lend= msg.lend;              
                             for (var i in lend) {
                                option.legend.data[i]=msg.lend[i];
                                option.series[i]={name:msg.data[i].name,type:'line',data:msg.data[i].data};
                             }
                                 if("发电标准煤耗" == msg.lend){
                                 option.yAxis[0] = {name:'克/千瓦时',type:'value'};
                                 }
                                 if("煤折标煤单价" == msg.lend){
                                     option.yAxis[0] = {name:'元/吨',type:'value'};
                                     }
                                 if("入厂标煤单价涨幅" == msg.lend){
                                     option.yAxis[0] = {name:'元/吨',type:'value'};
                                     }
                                 if("发电耗用标煤量" == msg.lend){
                                     option.yAxis[0] = {name:'吨',type:'value'};
                                     }
                                 echart.setOption(option,true);
                                $("#listForm").submit();
                            
                         });
            });
        }  
    );  
});
</script>

option.legend.data=[];