ECharts项目案例

本篇完全为项目中摘抄下来的，仅为本人记录之用。外人看到，仅做参考。

JS页面：

 var myChart_3 = echarts.init(document.getElementById("section_2_first_4"));

    loadData_3();
    function loadData_3(){
        var url = "ajax_query_index_thisYearSaleContracts_billing";
        $.ajax({
            url:url,
            type:'post',
            success:function(data){
                var option_1_data = [];
                //var option_1_month = [];
                if(data.length>0){


                    for(var i=0;i<data.length;i++){
                        option_1_data.push(data[i].billingMoney);
                    }
                }


                // 指定图表的配置项和数据
                var option_3 = {
                    title: {
                        //text: 'ECharts 入门示例'
                    },
                    backgroundColor: '#FFFFFF',
                    tooltip: {},
                    legend: {
                        data:['金额']
                        //right:'right'
                    },
                    xAxis: {
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                        name:'月份',
                        splitLine:{
                            show:true,
                            //网格线设置
                            lineStyle:{
                                color:'#eeeff4'
                            }
                        }
                    },
                    yAxis: {
                        name:"单位/万元",
                        splitLine:{
                            show:true,
                            //网格线设置
                            lineStyle:{
                                color:'#eeeff4'
                            }
                        }
                    },
                    //grid:{
                    //    show:true
                    //},
                    series: [
                        {
                            name: '金额',
                            type: 'line',
                            data: option_1_data,
                            lineStyle:{
                                normal:{
                                    color:'#638CA6',
                                    width:4
                                }
                            },
                            itemStyle : {
                                normal : {
                                    color:'#5192C0'
                                }
                            },
                            markPoint:{
                                data:[
                                    {name:'最大值',type:'max',
                                        itemStyle:{
                                            normal:{
                                                // opacity:'0.5',
                                                color:'#f7a54a'
                                            }
                                        },
                                        //字体颜色
                                        label:{
                                            normal: {
                                                textStyle: {
                                                    color: '#1a7bb9'
                                                }
                                            }
                                        }
                                    },
                                    {name:'最小值',type:'min',
                                        itemStyle:{
                                            normal:{
                                                // opacity:'0.5',
                                                color:'#f7a54a'
                                            }
                                        },
                                        //字体颜色
                                        label:{
                                            normal: {
                                                textStyle: {
                                                    color: '#1a7bb9'
                                                }
                                            }
                                        }
                                    }
                                ]
                            },
                            markLine:{
                                data:[
                                    {name:'平均值',type:'average'}
                                ]
                            },
                            areaStyle: {
                                normal: {
                                    color:"#E2EFF7"
                                }
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart_3.setOption(option_3);

            }
        })
    }

HTML页面：

 <div class="section_2_first col-xs-6" style="display: inline-block;">
            <div class="section_2_first_1 col-xs-12" style="height: 45px;line-height: 45px;border: 1px solid #E1E6E9;background-color: #FFFFFF">
                <em class="iconfont index_icon_style"></em>
                <span style="font-size: 16px;font-weight: bold">啊啊啊啊啊  </span>

                <a target="_blank" href="sra_s_b" class="pull-right">查看明细</a>
            </div>
            <div class="section_2_first_2 col-xs-12" id="section_2_first_4" style="border: 1px solid #E1E6E9;height: 415px;background-color: #FFFFFF">

            </div>
        </div>

Controller页面：

    @RequestMapping(value = "ajax_query_index_thisYearSaleContracts_billing")
    @ResponseBody
    public BillingDto[] queryThisYearSaleContractsBilling() {

        BillingDto[] array = new BillingDto[12];

        List<Map<String, Object>> mapList = saleContractService.getBilling_count();
        for (Map<String, Object> map : mapList) {
            BillingDto dto = new BillingDto();
            Integer month = null;
            BigDecimal count = BigDecimal.ZERO;
            for (Map.Entry<String, Object> entry : map.entrySet()) {
                String key = entry.getKey();
                if (key.equals("month")) {
                    month = (Integer) entry.getValue();
                }
                if (key.equals("money")) {
                    count = (BigDecimal) entry.getValue();
                }
            }
            //dto.setBillTotalMoney(count);
            dto.setBillingMoney(count);
            array[month - 1] = dto;
        }

        for (int i = 0; i < array.length; i++) {
            if (array[i] == null) {
                BillingDto dto = new BillingDto();
                //dto.setBillTotalMoney(BigDecimal.valueOf(0));
                dto.setBillingMoney(BigDecimal.valueOf(0));
                array[i] = dto;
            }else{
                //array[i].setBillTotalMoney(array[i].getBillTotalMoney().divide(new BigDecimal(10000),2,BigDecimal.ROUND_HALF_UP));
                array[i].setBillingMoney(array[i].getBillingMoney().divide(new BigDecimal(10000),2,BigDecimal.ROUND_HALF_UP));
            }
        }

        return array;
    }