springMVC/boot的Echart图表数据展示

PSW_18722821243

于 2022-05-10 23:37:50 发布

阅读量84

点赞数

分类专栏： jsp、jquery、ajax 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/psw_18722821243/article/details/124700345

版权

jsp、jquery、ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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;
	}