折线图echats

jsp

<div id="chartContainer" style="width:98%;height:48%">      
</div>

js

//初始化图表
    require.config({paths : {echarts : basePath+'/libs/echarts'}});
    require([ 'echarts','echarts/chart/bar', 'echarts/chart/line'],DrawEChart);
    function DrawEChart(echarts) {
    option = {
        title : {'text':'用电量'},
        tooltip : {
            trigger: 'axis',        // x轴参数
            axisPointer : {         // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'     // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        legend: {
            x:'right',
            data:['用电量预测值', '用电量预测最大值', '用电量预测最小值']
        },
        toolbox: {
            show : true,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            feature : {
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['']
            }
        ],
        yAxis : [
            {
                'type':'value',
                'name':'万千瓦时'
            }
        ],
        series : [
            {
                name:'用电量预测值',
                type:'line',
                data:[]
            },
            {
                name:'用电量预测最大值',
                type:'line',
                data:[]
            },
            {
                name:'用电量预测最小值',
                type:'line',
                data:[]
            }
        ]
    };

    $.ajax({
        type : "get",
        cache : false,
        url : basePath + "/sumServlet.do?action=chartData",
        dataType : "json",
        success : function(result) {
            console.log(Object.keys(result).length);
            for(var key in result){
                console.log("属性:" + key + ",值:"+ JSON.stringify(result[key]));
                if(result["Axis"].length>0){
                    option.xAxis[0].data = result["Axis"];
                    option.series[0].data = result["powerFore"];
                    option.series[1].data = result["powerForeMax"];
                    option.series[2].data = result["powerForeMin"];
                }
            }
            myChart = echarts.init(document.getElementById('chartContainer'));
            myChart.setOption(option);  
          //  myChart.setTheme(theme);
        }
    });
}

servlet

PrintWriter out = response.getWriter();

        JSONObject data = new JSONObject();

        data = this.sumService.chartData();


        logger.info("datachart:" + data.toString());
        out.write(data.toString());
        out.flush();
        out.close();

service

...
data.put("powerFore", powerForeArray);
data.put("powerForeMax", powerForeMaxArray);
data.put("powerForeMin", powerForeMinArray);
data.put("Axis",xArray);//年份
...

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值