在实习工作中，老大让我用后端数据，在前端页面展现并显现柱状图，折线图或饼状图。接到任务二话不说先百度，结果发现了echarts插件。经过查看用户手册了解了大概的用法就开始操作起来，其中发现不少坑，记录下来。
1、先拿样例的代码显现柱状图，前端自己虚构数据。
在引入echarts.min.js的时候进入第一个坑，可能因为项目结构拦截器的原因，像这样直接引用项目内，是引不进来的。 但是从新建一个案例项目可以用。
而且直接引入静态文件也是错误的
可能是我比较菜，有些东西没配置好，根据源项目的JS引用才正确。
引用完后正常运行代码。
第一个 ECharts 实例
运行页面如下：
第一步完成了，图能柱状图能显现出来了，开始想着怎么把后台数据填充进去啊，echarts官方用户手册异步数据仔细研究了一番。《本身想用echarts官方代码来写，结果写着写着echarts官网进不去了，就用菜鸟教程的代码了，坑！》
先把数据库数据传进来，直接就放图部一一赘述了。代码结构
主要放一下控制层的代码
package com.example.login.controller;
import com.example.login.entity.User;
import com.example.login.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
public class UserController {
@Autowired
UserService userService;
@RequestMapping("/show")
@ResponseBody
public List findById(Model model) {
List users = userService.userList();
System.err.println(users.toString());
return users;
}
@RequestMapping("/")
public String index() {
return "index";
}
@RequestMapping("/show1")
public String index5() {
return "tu";
}
@RequestMapping("/show2")
public String index6() {
return "tu1";
}
@RequestMapping("/show3")
public String index7() {
return "tu2";
}
@RequestMapping("/show4")
public String index8() {
return "tu3";
}
//展示柱状图
@RequestMapping("/showbar")
public String show2() {
return "histogram/histogram-bar";
}
//展示饼图
@RequestMapping("/showpie")
public String show3() {
return "pie";
}
//展示折线图
@RequestMapping("/showline")
public String show4() {
return "line";
}
}
然后经过百度学习了解了后端传入前端的格式：
var names=[]; //横坐标数组（实际用来盛放X轴坐标值）
var values=[]; //纵坐标数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/show", //请求发送到dataActiont处
data: {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].username);
values.push(result[i].age);
}
}
}
});
完整的格式：
Title
以上这是一个完整的柱状图，折现，饼状图把 "bar" 改成对应的 "line"、"pie"。
如何把这个柱状图再加上一个下钻的柱状图的？本身想慢慢写的，由于突然有事直接复制源码了。
document
#box {
margin: 0 auto;
text-align: center;
}
运行结果如下：
再点击张三丰进入下钻图：
注意 option 的位置与内容，还有数据库填充数据只能填数，如果填其他的好像不显示。
