功能需求:统计水井工作状态占比,并已环形图的形式,展示动态数据
工作状态分为在线和不在线,在线为1,不在线为0
后端代码
controller
/**
* 水井占比
* */
@RequiresPermissions("sjgg:aaa:sjlist")
@GetMapping("/sjlist")
@ResponseBody
public List sjtongji(SjWell sjWell){
List<SjWell> selectsjtongji = sjWellService.selectsjtongji(sjWell);
return selectsjtongji;
}
service
/**
* 水井占比
*/
List<SjWell> selectsjtongji(SjWell sjWell);
serviceimpl
/**
* 水井占比统计
*/
@Override
public List<SjWell> selectsjtongji(SjWell sjWell) {
return sjWellMapper.selectsjtjzb(sjWell);
}
mapper
/**
* 水井占比统计
* */
List<SjWell> selectsjtjzb(SjWell sjWell);
mapperxml
<select id="selectsjtjzb" resultType="String">
select count(*)work_status from sj_well GROUP BY work_status
</select>
页面代码
1先创建一个div 设置好一个容器
<div id="charts4" class="sideLine rightChart x12 mb20"></div>
2创建<script></script>
将下列代码放入
fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象
fetch("/sjgg/indexa/sjlist").then(response => response.json()).then(res => {
// [{
// name:"在线",
// value:"2"
// },{
// name:"不在线",
// value:"1"
// }]
// ["2","1"]
let myChart = echarts.init(document.getElementById('charts4'));
let option = {
title: {//标题
text: '水井占比图',
textStyle: {
fontSize: 20,
color: '#fff'
},
left: 'center',
top: '5%'
},
color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
grid: {
top: '0',
left: '0',
right: '0',
bottom: '0'
},
tooltip: {
show: false,
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: false,
},
legend: {
type: "scroll",
orient: 'vertical',
right: '3%',
align: 'left',
top: 'middle',
textStyle: {
color: '#eee'
},
height: 150
},
series: [{
name: '',
type: 'pie',
radius: [50, 75],
center: ["35%", "50%"],
//后台数据 parseInt() 函数可解析一个字符串,并返回一个整数
data: [{value:parseInt(res[0]),name:"不在线"},{value:parseInt(res[1]),name:"在线"}]
}]
};
console.log(option)
myChart.setOption(option, true);
});