个人技术总结——echart组件的使用

042101420林骞旭 2024-06-06 19:37:26

这个作业属于哪个课程	软件工程实践-2023学年-W班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	软件工程实践总结记录个人技术总结
其他参考文献	《构建之法》

当在一个界面显示很多柱状图排名时或者是行数很多时，并且需要多级（堆叠）排名时，可以使用该组件进行展示，这样可以避免在某个页面展示过多排名造成用户浏览不便或者无法对单条排名内组成分无法区别的情况。
在我们的项目中就存在展示排名的界面，但大多组件无法实现折叠柱状图，所以决定使用该组件。

二、技术详述

首先要先了解折叠柱状图组件的布局和属性
布局：
图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。

属性：
有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆叠柱状图来表现。顾名思义，堆叠柱状图就是一个系列的数值“堆叠”在另一个系列上，因而从他们的高度总和就能表达总量的变化。
使用 EChart 实现堆叠柱状图的方法非常简单，只需要给一个系列的 stack 值设置一个字符串类型的值，这一个值表示该系列堆叠的类别。也就是说，拥有同样 stack 值的系列将堆叠在一组。

代码：
导入包：

data部分：

method部分：
利用stack，将堆叠部分进行分类，如一条柱状图包括a、b、c三部分，则利用stack将其分类

随页面调节，适应各种大小，比例的页面

三、技术使用中遇到的问题和解决过程

在最开始使用该组件时有点茫然，不知道要如何利用该组件去将数据进行排名，不知道如何实现堆叠排名的功能。
将属性什么的都配置好了，只能调整其样式。不断搜索文章，阅读使用手册后，理解了基本属性和结构

四、总结

这次实践还是十分有意义，并且有难度的，毕竟这是第一次真正的，面向未来找工作的实践，可以说体验了一下“程序员”，让我意识到，好的程序员通常具备强大的技术能力。
个人项目部分，我就新学了熟悉了vue的使用，element组件的使用，echarts的使用等等。
结对作业，结对作业来完成项目，与单人作业相比，两人共同讨论，共同决定，共同设计，共同完成一个项目，比一个人做更为高效，有1+1＞2的效果，这些过程都是宝贵的经历。
团队作业部分，良好的工作习惯，能够编写可读性强、可维护性高的代码，程序员花费的时间多并不必然代表工作量高。最重要的是团队的重要性，团队在实现组织目标、提升工作效率和创新方面发挥着至关重要的作用，成员间通过协作，可以互补技能、分享知识和经验，从而提高解决问题的能力。
总之，还是感觉要继续努力沉淀