Echarts图表与数据库数据结合

 

1.从官网下载js    http://echarts.baidu.com/download.html

2.导入到你的项目中 

3.给图表新建一个盒子/容器

4.初始化容器

5.给你的容器加点东西x轴y轴、标题

    myChart.setOption({
                title:{
                    text:'echarts入门示例'
                },
                legend:{
                    data:['销量']
                },
                xAxis:{
                    data:[“一月”，“二月”，“三月”，“四月”，“五月”]
                },
                yAxis:{
                    
                },
                series:[
                    {
                        name:'销量',
                        type:'bar',
                        data:[“15”，“16”，“17”，“18”,“19”]
                    },
                ]

        });

6.完成上面的，一个简单的图表就完成了，效果如下：

那么做好的图表数据是写死的，要想与数据库结合，只需要写一个jquery去后台取数据就可以了

1.建个这样的表

2.用的SSM框架，主要展示一下业务层中的情况        

将获取到的月份和月销量分别放入数组中，再将两个数组放入map集合中返回。

package com.xiaoliang.service.impl;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.xiaoliang.bean.Xiaoliang;
import com.xiaoliang.dao.XiaoliangDao;
import com.xiaoliang.service.XiaoliangService;
@Service
public class XiaoliangServiceImpl implements XiaoliangService {

    @Resource
    private XiaoliangDao xiaoliangDao;
    /**
     * 
     */
    @Override
    public Map getXiaoliangList() {
        // TODO Auto-generated method stub
        /*创建一个集合来接受数据库数据*/
        List xlist = new ArrayList();
        /*创建一个map集合来装月份和销量这两个数组*/
        Map xmap=new HashMap();
        /*接受数据*/
        xlist=xiaoliangDao.getXiaoliangList();
        /*创建装载月销量数组*/
        int[] xxdata=new int[xlist.size()];
        /*创建装载月份数组*/
        String[] xdata=new String[xlist.size()];
        /*定义数组下标*/
        int i=0;
        /*遍历数据库数据*/
        for (Xiaoliang xiaoliang : xlist) {
            /*将销量放入数组*/
            xxdata[i]=xiaoliang.getXcount();
            /*将月份放入数组*/
            xdata[i]=xiaoliang.getXname();
            i++;
        }
        /*将两个数组存入集合中*/
        xmap.put("xname", xdata);
        xmap.put("xcount", xxdata);
        return xmap;
    }

}

 

   

 

3.在JSP页面中写个jquery如下

myChart.setOption({
                title:{
                    text:'echarts入门示例'
                },
                tooltip:{
                    
                },
                legend:{
                    data:['销量']
                },
                xAxis:{
                    data:[]
                },
                yAxis:{
                    
                },
                series:[
                    {
                        name:'销量',
                        type:'bar',
                        data:[]
                    },
                ]
        });                        


                        $.post(
				"<%=request.getContextPath()%>/xiaoliang/getXiaoliangList.action",
				{},
				function(data){
					myChart.setOption({
						xAxis:{
							data:data.xname
						},
						series:[
							{
								name:'销量',
								data:data.xcount
							},
						]
					});
				},
				"json"
			) 

4.展示从数据库获取到的数据如下