八十、单车订单统计实现
1.请求
getBikeOrder() {
this.$axios
.get(this.$httpUrl + "/echart/bikeOrder")
.then((res) => res.data)
.then((res) => {
this.draw1(res)
});
},
2.后端实现
@GetMapping("/bikeOrder")
public List<ChartPie> bikeOrder() {
return bikeorderService.bikeOrder();
}
<select id="bikeOrder" resultType="com.longyi.bikescreen.entity.ChartPie">
SELECT bike.name, sum(bikeorder.money) AS value
FROM bikeorder
JOIN bike ON bikeorder.bike = bike.id
GROUP BY bike.name
order by value desc
limit 6
</select>
4.定义option
var option = {
color: ['#fd7f0e', '#04f9fa', '#16bd87', '#1aa3ff', '#ff633c', '#ffc722'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}：{c} 元',
},
legend: {
bottom: '10%',
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff',
fontSize: '12',
},
},
series: [
{
name: '单车订单',
type: 'pie',
center: ['50%', '40%'],
radius: ['35%', '50%'],
label: {
normal: {
formatter: params => {
return params.name + ":" + params.value + "元"
},
},
},
data: data,
},
],
};
5.初始化调用
到此这篇前端埋点和后端埋点的区别是什么（后端埋点的例子）的文章就 介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章，希望大家都能在编程的领域有一番成就！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdkf/37081.html