Echarts是一个基于JavaScript的开源可视化库，用于构建交互式和可定制的图表和图形。它由百度开发并维护，提供了丰富多样的图表类型和强大的功能，使开发者能够简单快速地创建各种各样的数据可视化。 Echarts支持常见的图表类型，如折线图、柱状图、饼图、散点图、雷达图等，同时也支持更复杂的图表类型，如地图、热力图、关系图等。无论是简单的数据展示还是复杂的数据分析，Echarts都提供了丰富的图表选项和配置，以满足不同场景的需求。
一、入门实例
1.官网地址 快速上手 - Handbook - Apache ECharts
使用时仅需导入echarts.js文件
根据入门示例编写html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>效果如下
官方实例
更多示例可在官网查询，除了基本的图表功能，Echarts还支持多种交互和动画效果，如数据区域缩放、数据刷选、图表切换、动态更新等。这使得用户可以通过交互方式深入探索数据，并以更生动、直观的方式呈现数据的变化和趋势。 总之，Echarts是一个功能强大、易于使用的数据可视化库，它为开发者提供了丰富的图表类型、灵活的配置和强大的交互功能，帮助开发者将数据以可视化的方式展示出来，从而更好地理解和传达数据。
在实例图中可以下载对应的html文件，也可以在左侧修改代码即时呈现出效果展示在页面中
二、项目实例(静态数据)
本文是按照黑马传智健康修改，仅供参考
HTML页面
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>传智健康</title>
<meta name="description" content="传智健康">
<meta name="keywords" content="传智健康">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>统计分析<small>会员数量</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>统计分析</el-breadcrumb-item>
<el-breadcrumb-item>会员数量</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chart1" style="height:500px;"></div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
axios.get("/report/getMemberReport.do").then((res)=>{
myChart1.setOption(
{
title: {
text: '会员数量'
},
tooltip: {},
legend: {
data:['会员数量']
},
xAxis: {
data: res.data.data.months
},
yAxis: {
type:'value'
},
series: [{
name: '会员数量',
type: 'line',
data: res.data.data.memberCount
}]
});
});
</script>
</html>
根据折现图的数据格式要求，服务端需要返回如下格式的数据：
{
"data":{
"months":["2019.01","2019.02","2019.03","2019.04"],
"memberCount":[3,4,8,10]
},
"flag": true,
"message":"获取会员统计数据成功"
}模拟假数据，静态数据测试接口
@RestController
@RequestMapping("/report")
public class ReportController {
@RequestMapping("/getMemberReport")
public Result getMemberReport() {
//使用模拟数据测试对象格式是否能转为echarts所需的数据格式
Map<String,Object> map = new HashMap<>();
List<String> months = new ArrayList<>();
months.add("2023-05");
months.add("2023-06");
months.add("2023-07");
months.add("2023-08");
months.add("2023-09");
map.put("months",months);
List<Integer> memberCount = new ArrayList<>();
memberCount.add(100);
memberCount.add(150);
memberCount.add(180);
memberCount.add(200);
memberCount.add(240);
map.put("memberCount",memberCount);
return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS,map);
}
}更改了项目中的超链接
假数据的效果如下
返回json数据格式
三、项目传智健康实例(SSM+mysql)
ReportController
@RestController
@RequestMapping("/report")
public class ReportController {
@Reference
private MemberService memberService;
//会员折线图数据
@RequestMapping("/getMemberReport")
public Result getMemberReport() {
//通过日历实例获得日历对象，模拟时间就是当前时间
Calendar calendar = Calendar.getInstance();
calendar.add(Calendar.MONTH, -12);//获得当前日期之前12个月的日期
List<String> list = new ArrayList<>();
for (int i = 0; i < 12; i++) {
calendar.add(Calendar.MONTH, 1);
list.add(new SimpleDateFormat("yyyy-MM").format(calendar.getTime()));
}
Map<String, Object> map = new HashMap<>();
map.put("months", list);
List<Integer> memberCount = memberService.findMemberCountByMonth(list);
map.put("memberCount", memberCount);
return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS, map);
}
}MemberService
public interface MemberService {
public List<Integer> findMemberCountByMonth(List<String> list) ;
}MemberServiceImpl
@Service(interfaceClass = MemberService.class)
@Transactional
public class MemberServiceImpl implements MemberService {
@Autowired
private MemberDao memberDao;
//根据月份查询会员数量
public List<Integer> findMemberCountByMonth(List<String> months) {
List<Integer> list = new ArrayList<>();
for (String month : months) {
String dateString = month;
YearMonth yearMonth = YearMonth.parse(dateString);
int m1 = yearMonth.getMonthValue();
if (m1 == 2) {
//这里考虑2月份数据库会报错，但其他月份没考虑到，代码有瑕疵
String date = month + "-30";
} else {
String date = month + "-30";//格式：2019.04.31}
Integer count = memberDao.findMemberCountBeforeDate(date);
list.add(count);
}
}
return list;
}
}MemberDao
public interface MemberDao {
Integer findMemberCountBeforeDate(String date);
}MemberDao.xml
<!--根据日期统计会员数，统计指定日期之前的会员数-->
<select id="findMemberCountBeforeDate" parameterType="string" resultType="int">
select count(id) from t_member where regTime <= #{value}
</select>数据库模拟数据
效果展示
四、总结
Echarts具有以下主要功能：
- 多种图表类型：Echarts支持常见的图表类型，如折线图、柱状图、饼图、散点图、雷达图等。它还支持更复杂的图表类型，如地图、热力图、关系图等。
- 丰富的配置选项：Echarts提供了丰富的配置选项，可以定制图表的样式、数据和交互方式。开发者可以自定义图表的颜色、字体、线条样式等，以及数据的格式和显示方式。
- 强大的交互功能：Echarts支持多种交互和动画效果，如数据区域缩放、数据刷选、图表切换、动态更新等。这些交互功能使用户可以通过操作图表深入探索数据，并以更生动、直观的方式呈现数据的变化和趋势。
- 兼容性和跨平台：Echarts具有良好的兼容性，可以在各种现代浏览器上运行，并且可以与常见的前端框架（如Vue、React、Angular）无缝集成。它还支持移动设备上的展示，可以在移动端上呈现优雅的图表效果。
- 数据可视化：Echarts帮助开发者将数据以可视化的方式展示出来，使数据更易于理解和传达。通过图表的可视化效果，开发者可以更直观地展示数据的关系、变化和趋势，从而更好地进行数据分析和决策。 总的来说，Echarts是一个功能强大、易于使用的数据可视化库，它提供了多种图表类型、丰富的配置选项和强大的交互功能，帮助开发者实现高度定制化的数据可视化展示。无论是简单的数据展示还是复杂的数据分析，Echarts都能满足各种需求，并提供优秀的用户体验。
