数据可视Echart折线图

一、前言

  Echart简介：一个使用 JavaScript 实现的开源可视化库，作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目。

优势：1、使用简单，2、echarts.js支持按需求打包，3、开源     .....

学习方法：

看Echart官网范例，关键点是后端构造前端需要的数据格式，一般需要数值数组和栏目数组。

二、简单应用

前端

<div id="line" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('line'));
    var myJSON=undefined;
    //初始化，获取数据列表
    $(function () {
        $.ajax({
            type:"get",
            url:"Invest_countserver.do",
            //contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType:"json",
            success:function(data){
               myJSON = JSON.stringify(data.data);//把后端传递的数据传化成字符串输出
                var servicedata=[];
                for(var i=0;i<data.data.length;i++){
                    var obj=new Object();
                    obj.name=data.categ[i];
                    obj.value=data.data[i];
                    servicedata[i]=obj;
                }
                option = {
                    xAxis: {
                        name:"月",
                        axisLine: {
                            lineStyle: {
                                // 设置x轴颜色
                                color: '#912CEE'
                            }
                        },
                        // 设置X轴数据旋转倾斜
                        axisLabel: {
                            rotate: 30, // 旋转角度
                            interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                        },
                        // boundaryGap值为false的时候，折线第一个点在y轴上
                        boundaryGap: false,
                        type: 'category',
                        data: data.categ
                    },
                    yAxis: {
                        name: '数值',
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#87CEFA'
                            }
                        },
                        type: 'value'
                    },
                    //不管是饼状、折线、或是柱形，获取数据都可以设置它的表现形式，例如加个提示框
                    // 提示框
                    tooltip: {
                        trigger: 'axis'
                    },
                    backgroundColor: '#FFF0F5',
                    series: [{
                        data: data.data,
                        type: 'line'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    });

</script>

后端数据构造

@Controller
public class Assert_InvestController {
    @Resource
    AC_InvestService ac_investService;

    @RequestMapping(value = "/Invest_countserver.do")
    public void Invest_countController(HttpServletRequest request, HttpServletResponse response) throws IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        JSONObject json = new JSONObject();
        List<Double> Aclist=new ArrayList<Double>();
        List<String> Catelist=new ArrayList<String>();
        List<AC_Invest> list=ac_investService.getAC_Invest();
        for(int i=0;i<list.size();i++)
        {
            Aclist.add(list.get(i).getAssert_sum());
            Catelist.add(String.valueOf(list.get(i).getInvstdate()));//把时间转成字符
            System.out.println(String.valueOf(list.get(i).getInvstdate()));
        }
        json.put("data",Aclist);//数据对象
        json.put("categ",Catelist);//数据对象
        PrintWriter out = response.getWriter();
        out.print(json.toString());
        out.flush();
        out.close();
    }
}

结果视图