springMVC/boot的Echart图表数据展示_springmvc引入echarts5.3

作者：小惠珠哦 | 2024-07-15 08:14:29

踩

springmvc引入echarts5.3

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

三、controller

/**
	 * 新闻类别饼图统计
	 * @return
	 */
	@RequestMapping(value="/chartPieChartShow",method=RequestMethod.GET)
	@ResponseBody
	public List<BaseEntity> chartPieChartShow(){
		List<BaseEntity> list=newsService.chartPieChartShow();
		return list;
	}
1
2
3
4
5
6
7
8
9
10

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/828423