1首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。
官网地址：http://echarts.baidu.com/
1.首先在官网 选择合适的下载版本
http://echarts.baidu.com/download.html
2,pom.xml
<dependencies>
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
<version>RELEASE</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactI
<scope>runtime</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
3,yml
spring:
datasource:
# type: com.alibaba.druid.pool.DruidDataSource
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
username: root
password: root
4,controller:
@RestController
public class EchartsController {
@Autowired
private EchartsService echartsService;
@RequestMapping("/EchartsShow")
public List<EchartsEntity> echartsModels(Model model){
List<EchartsEntity> list=echartsService.selectByAll();
return list;
}
}
5,service
package com.taotao.echarts.service;
import com.taotao.echarts.entity.EchartsEntity;
import com.taotao.echarts.mapper.EchartsMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class EchartsService {
@Autowired
private EchartsMapper echartsMapper;
public List<EchartsEntity> selectByAll() {
List<EchartsEntity> list=echartsMapper.selectAll();
return list;
}
}
6,entity
@Data
@Table(name = "echarts")
public class EchartsEntity {
private long id;
private String name;
private Integer value;
public EchartsEntity(String name, Integer value) {
this.name = name;
this.value = value;
}
public EchartsEntity() {
}
}
7,IMapper
package com.taotao.echarts.mapper;
import tk.mybatis.mapper.common.Mapper;
import tk.mybatis.mapper.common.MySqlMapper;
public interface IMapper<T>extends Mapper<T>,MySqlMapper {
}
8,EchartsMapper
package com.taotao.echarts.mapper;
import com.taotao.echarts.entity.EchartsEntity;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface EchartsMapper extends IMapper<EchartsEntity> {
}
9,echarts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
$(document).ready(function () {
var myChart=echarts.init(document.getElementById('main'));
myChart.showLoading();
var names=[];//横坐标数据组
var values=[];
$.ajax({
type: "post",
async: true, //一步请求（同步请求将会锁住浏览器，用户其他请求操作必须等请求完成后才可以执行）
url:"/EchartsShow", //发送到dataActio处
data:{},
dataType: "json", //返回数据形式为json
success: function (response) {
//请求成功时执行该函数的内容，result即为服务器返回的json对象
if(response){
for(var i=0;i<response.length;i++){
names.push(response[i].name);
values.push(response[i].value);
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
tooltip: {},
legend: {
data:['數量']
},
xAxis: {
data: names
},
yAxis:{
type:'value'
},
series:[{
//根据名字对应到相应的系列、
name: '数量',//
type: 'bar',
data: values
}]
});
}
},
error: function (errorMsg) {
//请求失败执行此函数
alert("图表数据请求失败");
myChart.hideLoading();
}
})
})
</script>
</body>
</html>
10 数据库
-- Table structure for echarts
-- ----------------------------
DROP TABLE IF EXISTS `echarts`;
CREATE TABLE `echarts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`value` int(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of echarts
-- ----------------------------
INSERT INTO `echarts` VALUES ('1', '1', '1');
INSERT INTO `echarts` VALUES ('2', '2', '2');
INSERT INTO `echarts` VALUES ('3', '3', '3');
INSERT INTO `echarts` VALUES ('4', '4', '4');
INSERT INTO `echarts` VALUES ('5', '5', '5');
