若依前后端不分离Echarts饼状图、折线图、地图写法。。。。。。
Controller
@Controller
@RequestMapping("/system/image")
public class EchartsController extends BaseController
{
private String prefix = "system/state";
@Autowired
private IEchartsService echartsService;
@GetMapping()
public String image()
{
return prefix + "/image";
}
//查询全部
@PostMapping("/list")
@ResponseBody
public TableDataInfo list()
{
startPage();// 此方法配合前端完成自动分页
List<Echarts> list = echartsService.findAll();
return getDataTable(list);
}
//查询全部
@PostMapping("/listditu")
@ResponseBody
public TableDataInfo map()
{
startPage();// 此方法配合前端完成自动分页
List<Echarts> list = echartsService.map();
return getDataTable(list);
}
}
Service
public interface IEchartsService {
List<Echarts> findAll();
public List<Echarts> map();
}
Service实现类
@Service
public class IEchartsServiceImpl implements IEchartsService {
@Autowired
private EchartsMapper echartsMapper;
@Override
public List<Echarts> findAll() {
return echartsMapper.findAll();
}
@Override
public List<Echarts> map() {
return echartsMapper.map();
}
}
Mapper
public interface EchartsMapper {
public List<Echarts> findAll();
public List<Echarts> map();
}
XML很简单，大家自己写就可以了这里就不展示了...........
页面
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('可视化列表')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>水果销量饼状图</h5>
</div>
<div class="ibox-content">
<div class="echarts" id="pieEcharts"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>用户访问量折线图</h5>
</div>
<div class="ibox-content">
<div class="echarts" id="lineEcharts"></div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>中国地图</h5>
</div>
<div class="ibox-content">
<div style="height:600px" id="echarts-map-chart"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
var prefix = ctx + "system/image";
li();//方法的调用
function li() {
var pieChart = echarts.init(document.getElementById("pieEcharts"));
$.ajax({
type: "POST",
url: prefix + "/list",
data: {},
dataType: 'json',
success: function(result) {
var obj=result.rows; //根据后台rows获取数据
var datanew=new Array();
var point=new Array();
/*获取数据*/
$.each(obj,function(n,val){
/*获取后台数据*/
var call={value:val.num,name:val.name};
datanew.push(call);
point.push(val.name);
});
var pieoption = {
title : {
text: '水果销量',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data: point
},
calculable : true,
series : [
{
name:'销量',
type:'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
data:datanew //给后台数据显示到页面
}
]
};
pieChart.setOption(pieoption);
$(window).resize(pieChart.resize);
}
});
}
foot();//方法的调用
/*声明方法*/
function foot() {
var lineChart = echarts.init(document.getElementById("lineEcharts"));
var lineoption = {
title : {
text: '用户访问量'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最多人数','最少人数']
},
grid:{
x:40,
x2:40,
y2:24
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 人'
}
}
],
series : [
{
name:'最多人数',
type:'line',
data:[200, 300, 123, 248, 99, 101, 213],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'最少人数',
type:'line',
data:[30, 60, 15, 99, 18, 74, 103],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min