ECHART: https://echarts.apache.org/examples/zh/index.html
前端:
<body style="height: 100%; margin: 0">
<div id="container" style="height: 600%;border:1px dashed #000; ">图表</div>
<!--引入echarts.min.js文件 -->
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<!-- 引入jquery-3.1.1.min.js文件 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
<!--代码编辑区 -->
<script type="text/javascript">
//发送请求(get请求)
$.get("../news/chartPieChartShow",function(data){
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '新闻类别饼图统计)',
subtext: '实时数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
//数据
data: data
},
series : [
{
name: '新闻类别饼图统计(占比)',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
//数据
data:data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
})
</script>
</body>
</html>
后端:java springMVC
一:实体
public class BaseEntity {
private String name;
private Double value;
public BaseEntity() {
}
public BaseEntity(String name, Double value) {
super();
this.name = name;
this.value = value;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Double getValue() {
return value;
}
public void setValue(Double value) {
this.value = value;
}
}
二 mybaties sql
```xml
<!-- 按类别统计新闻发布 -->
<select id="chartPieChartShow" resultType="com.entity.admin.BaseEntity">
select count(cat.name) as value , cat.name as name from news n ,news_category cat
where cat.id=n.categoryId
GROUP BY cat.name;
</select>
三 、controller
/**
* 新闻类别饼图统计
* @return
*/
@RequestMapping(value="/chartPieChartShow",method=RequestMethod.GET)
@ResponseBody
public List<BaseEntity> chartPieChartShow(){
List<BaseEntity> list=newsService.chartPieChartShow();
return list;
}