ECharts数据可视化（第三章实训）

实训

实训销售经理能力对比分析
1．训练要点(1）掌握直角坐标系下的网格及坐标轴的配置方法。(2）掌握标题组件与图例组件的配置方法。
(3）掌握工具箱组件与详情提示框组件的配置方法。
(4）掌握标记点和标记线的配置方法。
2．需求说明
“销售经理能力考核表． xlsx ”文件上的数据为某公司对王斌、刘倩、袁波3个销售代表从多方面进行考核得到的评分数据，评分项具体包括销售、沟通、服务、协作、培训和组织。绘制柱状图，并配置直角坐标系下的网格及坐标轴、标题组件、图例组件、工具箱组
件、详情提示框组件、标记点和标记线，实现更清晰、更便捷地分析销售经理的能力。
3．实现思路及步骤
(1）在 Eclipse 中创建销售经理能力对比分析． html 文件。(2）绘制柱状图。首先，在销售经理能力对比分析． html 文件中引人 echarts . js 库文件。其次，准备一个指定了大小的 div 容器，并使用init0方法初始化容器。最后，设置柱状图的配置项、“销售经理能力考核表． xlsx ”数据，完成柱状图绘制。
(3）配置网格及坐标轴。利用网格组件为绘制的柱状图设置网格边框和背景颜色，并利用坐标轴组件为标轴设置坐标轴刻度标记和坐标轴文本标签。
(4）配置标题组件和图例组件。利用标题组件在绘制的柱状图正上方设置红色字体的主标题“销售经理能力对比分析”，并利用图例组件在柱状图的左上角配置图例。
(5）配置工具箱组件和详情提示框组件。利用工具箱组件在绘制的柱状图右上角配置含有边框的工具箱，并利用详情提示框组件为绘制的柱状图配置详情提示框。
(6）配置标记点和标记线。利用标记点标记出考核评分中的最高分和最低分，并利用
际记线标记出考核评分中的平均分。
 

 或者是下面这个（样式比较第一）