结果展示（此项目是前后端分离，需自行解决跨域问题）
一、数据库设计
这里使用到了两张表，一张book表，一张type表
type表字段
book表字段
二、接口实现
封装一个实体类 EchartsVo 用于返回结果集
@Data
@NoArgsConstructor
@AllArgsConstructor
public class EchartsVo {
private String name;
private Integer total;
}controller
@RestController
@RequestMapping("/book")
public class BookController {
@Autowired
private IBookService ibookService;
@GetMapping("/bie")
public AjaxResult bie(){
List<Book> list =ibookService.bie();
return AjaxResult.me().setData( list);
}service
List<Book> bie();ipml
@Service
public class BookServiceImp extends BaseServiceimpl<Book> implements IBookService {
@Autowired(required = false)
private BookMapper bookMapper;
@Override
public List<Book> bie() {
return bookMapper.bie();
}
}mapper
@Mapper
public interface BookMapper extends BaseMapper<Book> {
List<Book> bie();
}sql语句
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.yiyuan.mapper.BookMapper">
<!-- 通用查询映射结果 -->
<resultMap id="bookBase" type="cn.yiyuan.domain.Book">
<id column="id" property="id"></id>
<result column="name" property="name"></result>
<result column="price" property="price"></result>
<result column="author" property="author"></result>
<result column="press" property="press"></result>
<result column="img" property="img"></result>
<association property="typeName" javaType="Type">
<id column="id" property="id"></id>
<result column="book_name" property="bookName"></result>
</association>
</resultMap>
<resultMap id="echartsVOMap" type="cn.yiyuan.domain.vo.EchartsVo">
<result column="type_name" property="name"/>
<result column="book_count" property="total"/>
</resultMap>
<!-- 通用查询结果列 -->
<sql id="Base_Column_List">
id, `name`, price, author, press, img,`name`
</sql>
<select id="bie" resultMap="echartsVOMap">
SELECT t.book_name AS type_name, COUNT(*) AS book_count
FROM book b
JOIN type t ON b.type_id = t.id
GROUP BY t.book_name;
</select>
</mapper>前端页面
<template>
<section class="chart-container">
<el-row>
<el-col :span="12">
<div id="chartColumn" style="width:100%; height:400px;"></div>
</el-col>
<el-col :span="12">
<div id="chartBar" style="width:100%; height:400px;"></div>
</el-col>
<el-col :span="12">
<div id="chartLine" style="width:100%; height:400px;"></div>
</el-col>
<el-col :span="12">
<div id="chartPie" style="width:100%; height:400px;"></div>
</el-col>
<el-col :span="24">
<a href="http://echarts.baidu.com/examples.html" target="_blank" style="float: right;">more>></a>
</el-col>
</el-row>
</section>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
chartColumn: null,
chartBar: null,
chartLine: null,
chartPie: null
}
},
methods: {
//柱状图
drawColumnChart() {
// this.chartColumn = echarts.init(document.getElementById('chartColumn'))
// echarts.init初始化 getElementById('chartColumn')挂载id 和div里面的id对应;
this.$http.get("/book/bie").then(row =>{
this.data = row.data.data
const mappedData = this.data.map(item =>({
value:item.total,
name:item.name
}));
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
this.chartColumn.setOption({
title: { text: '柱状图' },
tooltip: {},
xAxis: {
data: this.data.map(item=>item.name)
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: mappedData
}]
});
});
},
//条形图
drawBarChart() {
this.chartBar = echarts.init(document.getElementById('chartBar'));
this.chartBar.setOption({
title: {
text: '条形图',
subtext: '数据来自网络'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2011年', '2012年']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
},
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
});
},
//折线图
drawLineChart() {
this.chartLine = echarts.init(document.getElementById('chartLine'));
this.chartLine.setOption({
title: {
text: '折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
});
},
//圆饼图
drawPieChart() {
this.$http.get("/book/bie").then(row =>{
console.log(row)
this.data = row.data.data
console.log(this.data,"data")
const mappedData = this.data.map(item =>({
value:item.total,
name:item.name
}));
this.chartPie = echarts.init(document.getElementById('chartPie'));
this.chartPie.setOption({
title: {
text: '统计图',
subtext: '在籍图书',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: [this.data.map(item =>item.name)]
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: mappedData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
});
},
drawCharts() {
this.drawColumnChart()
this.drawBarChart()
this.drawLineChart()
this.drawPieChart()
},
},
mounted: function () {
this.drawCharts()
},
updated: function () {
this.drawCharts()
}
}
</script>
<style scoped>
.chart-container {
width: 100%;
float: left;
}
/*.chart div {
height: 400px;
float: left;
}*/
.el-col {
padding: 30px 20px;
}
</style>
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
