• 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=[];

  • 相关阅读:
    注册界面测试案例注意点
    linux常用命令
    linux常用快捷键总结
    2015.8.29某高级企业的在线笔试题
    图像处理------直方图均衡化
    “猫叫系统”开启了观察者模式
    Hua Wei 机试题目四---2014
    Hua Wei 机试题目三---2014
    Hua Wei 机试题目二
    Hua Wei 机试题目一
  • 原文地址:https://www.cnblogs.com/kongxc/p/6444869.html
Copyright © 2020-2023  润新知