网站首页 > 技术文章正文

echarts图形报表的入门案例

nanyue 2024-11-27 18:20:04 技术文章 25 ℃

1.echarts

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图

官网：

https://echarts.apache.org/zh/index.html

2.案例

2.1 引入echats.js

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script src="/resource/js/echarts.js"></script>
</head>

2.2 页面

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var tname = []; //横轴 --条目
var num = [];//纵轴--数量
// 指定图表的配置项和数据
var option = {
title: {
text: '分类统计表'
},
tooltip: {},
legend: {
data: ['数量']
},
xAxis: {
data: tname
},
yAxis: {},
series: [
{
name: '数量',
type: 'line',
data: num
}
]
};
// 使用刚指定的配置项和数据显示图表。
$.get("/goods/getGoodsByType",function (list){
	for(var i in list){
		tname.push(list[i].tname)
		num.push(list[i].num)
	}
	myChart.setOption(option);
})
</script>

2.3 controller

@ResponseBody
@RequestMapping("getGoodsByType")
public List<Goods> getGoodsByType(){
return goodsService.getGoodsByType();
}

2.4 dao

<select id="getGoodsByType" resultType="com.bobo.pojo.Goods">
   select count(id) num ,t.tname from t_goods g 
LEFT JOIN t_goodstype t on g.tid= t.tid GROUP BY g.tid
</select>

2.5 效果

上一篇： Echarts仿电梯运行图
下一篇：关于Go语言，你不得不知的并发模式

网站首页 > 技术文章 正文