Echarts入门实例

 

Echarts是一个基于JavaScript的开源可视化库，用于构建交互式和可定制的图表和图形。它由百度开发并维护，提供了丰富多样的图表类型和强大的功能，使开发者能够简单快速地创建各种各样的数据可视化。 Echarts支持常见的图表类型，如折线图、柱状图、饼图、散点图、雷达图等，同时也支持更复杂的图表类型，如地图、热力图、关系图等。无论是简单的数据展示还是复杂的数据分析，Echarts都提供了丰富的图表选项和配置，以满足不同场景的需求。

一、入门实例

1.官网地址 快速上手 - Handbook - Apache ECharts

根据入门示例编写html页面

效果如下 

 官方实例

更多示例可在官网查询，除了基本的图表功能，Echarts还支持多种交互和动画效果，如数据区域缩放、数据刷选、图表切换、动态更新等。这使得用户可以通过交互方式深入探索数据，并以更生动、直观的方式呈现数据的变化和趋势。 总之，Echarts是一个功能强大、易于使用的数据可视化库，它为开发者提供了丰富的图表类型、灵活的配置和强大的交互功能，帮助开发者将数据以可视化的方式展示出来，从而更好地理解和传达数据。

 在实例图中可以下载对应的html文件，也可以在左侧修改代码即时呈现出效果展示在页面中

 二、项目实例(静态数据) 

 本文是按照黑马传智健康修改，仅供参考

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 map = new HashMap<>();
        List 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 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 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 map = new HashMap<>();
        map.put("months", list);

        List 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 findMemberCountByMonth(List list) ;
}

MemberServiceImpl

@Service(interfaceClass = MemberService.class)
@Transactional
public class MemberServiceImpl implements MemberService {

    @Autowired
    private MemberDao memberDao;

    //根据月份查询会员数量
    public List findMemberCountByMonth(List months) {
        List 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 count(id) from t_member where regTime <= #{value}

数据库模拟数据

 效果展示

 四、总结

Echarts具有以下主要功能：

1. 多种图表类型：Echarts支持常见的图表类型，如折线图、柱状图、饼图、散点图、雷达图等。它还支持更复杂的图表类型，如地图、热力图、关系图等。
2. 丰富的配置选项：Echarts提供了丰富的配置选项，可以定制图表的样式、数据和交互方式。开发者可以自定义图表的颜色、字体、线条样式等，以及数据的格式和显示方式。
3. 强大的交互功能：Echarts支持多种交互和动画效果，如数据区域缩放、数据刷选、图表切换、动态更新等。这些交互功能使用户可以通过操作图表深入探索数据，并以更生动、直观的方式呈现数据的变化和趋势。
4. 兼容性和跨平台：Echarts具有良好的兼容性，可以在各种现代浏览器上运行，并且可以与常见的前端框架（如Vue、React、Angular）无缝集成。它还支持移动设备上的展示，可以在移动端上呈现优雅的图表效果。
5. 数据可视化：Echarts帮助开发者将数据以可视化的方式展示出来，使数据更易于理解和传达。通过图表的可视化效果，开发者可以更直观地展示数据的关系、变化和趋势，从而更好地进行数据分析和决策。 总的来说，Echarts是一个功能强大、易于使用的数据可视化库，它提供了多种图表类型、丰富的配置选项和强大的交互功能，帮助开发者实现高度定制化的数据可视化展示。无论是简单的数据展示还是复杂的数据分析，Echarts都能满足各种需求，并提供优秀的用户体验。