最近一周时间内图形设计。前端 + 后端动态数据

首先介绍的官网：https://www.echartsjs.com/zh/index.html

第一：我这里是柱状图为例，如果需要其他图形，请参考官网

第一步：引入前端jar包（echarts.common.min.js）

第二步：开始着手前端部分

              在body里面定义一个div

             <div id="userDiagram" style="width: 50%;height:400px;"></div>

             在<script></script>里面进行编写js代码

<script>
    function userDiagram() {
    var myChart = echarts.init(document.getElementById('userDiagram'));
    option_user = {
        color: ['#087cd9'],
        title: {// 图表标题，可以通过show:true/false控制显示与否，还有subtext:'二级标题',link:'http://www.baidu.com'等
            text: '最近一周订单交易金额'
        },
        tooltip: {// 这个是鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置，见官网吧，一两句说不清楚
            trigger: 'axis'
        },
        legend: {
            data: []
        },
        toolbox: {
            feature: {
                saveAsImage: {}
                // 工具，提供几个按钮，例如动态图表转换，数据视图，保存为图片等
            }
        },
        grid: {
            left: '7%',
            right: '1%',
            bottom: '9%'// 这几个属性可以控制图表上下左右的空白尺寸，可以自己试试。
            // containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true, //柱状图这么显示，折线图显示为false
            data: []
            // X轴的定义
        }],
        yAxis: [{
            type: 'value'// Y轴的定义
        }],
        series: []
        // 这里就是数据了
    };
    //加载数据
    jQuery.ajax({
        url: "/shcmorder/deal",
        type: 'get',
        dataType: 'json',
        success: function (jsons) {
            var Item = function () {
                return {
                    name: '',
                    type: 'bar', //柱状图这么显示bar，折线图为line
                    // smooth: true,
                    data: []
                }
            };
            var legends = [];
            var Series = [];
            var json = jsons.list;
            for (var i = 0; i < json.length; i++) {
                var it = new Item();
                it.name = json[i].name;
                legends.push(json[i].name);
                it.data = json[i].data;
                Series.push(it);
            }
            option_user.xAxis[0].data = jsons.xdata; //这块必须要写xAxis[0]
            option_user.legend.data = legends;
            option_user.series = Series; // 设置图表
            myChart.setOption(option_user);// 重新加载图表
        },
        error: function () {
            alert("数据加载失败！请检查数据链接是否正确");
        }
    });
    // 初次加载图表(无数据)
    myChart.setOption(option_user);
    }
    userDiagram();
</script>

后端controller部分

@ResponseBody
@RequestMapping("/deal")
public Map<String,Object> deal(){
    Map<String,Object> map = shcmOrderService.deal();
    return map;
}

业务逻辑层serverImpl

@Override
public Map<String, Object> deal() {
   Map<String, Object> map = new HashMap();
   List<ShcmOrder> everyDayUserBOList = shcmOrderDao.deal();
   String[] dataCount = {"0", "0", "0", "0", "0", "0", "0"};
   String[] weekTime = new String[7];
   //格式化日期
   SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
   Date date = new Date();
   weekTime[6] = sdf.format(date);
   Calendar calendar = Calendar.getInstance();
   calendar.setTime(date);
   for (int i = 5; i >= 0; i--) {
      calendar.add(Calendar.DAY_OF_MONTH, -1);
      date = calendar.getTime();
      weekTime[i] = sdf.format(date);
   }
      map.put("xdata", weekTime);
   int week = 0;
   for (String str : weekTime) {
      for (int i = 0; i < everyDayUserBOList.size(); i++) {
         if (sdf.format(everyDayUserBOList.get(i).getCreatetime()).equals(str)) {
            dataCount[week] = everyDayUserBOList.get(i).getBuyPrice();
         }
      }
      week++;
   }
   EchartData echartData = new EchartData();
   echartData.setName("交易金额");
   echartData.setData(dataCount);
   List<EchartData> list = new ArrayList<EchartData>();
   list.add(echartData);
   map.put("list",list);
   return map;
}

 

第三步：需要重新创建一个类，为实体类，里面包含你需要的属性，比如前端一半需要date数组的数据和name名字，所以放入这两个属性，例如我的：

@Data
public class EchartData {
    private String name;
    private String[] data;
}

最后就是，需要自己编写dao和server，还有sql语句，这里由于简单就不加多介绍了