参考资料地址1：https://pan.baidu.com/s/1ZJGS0SA9pIUr76VUXioNSg 提取码: 95bd 参考资料地址2：https://share.weiyun.com/jVSDdcBU 密码：cruqf9

SpringBoot+Vue3 项目实战，打造企业级在线办公系统，2023新版16章，附电子书！

未来，在线协同办公将成为企业常态化的工作方式。本文选用市面上少有的，界面美观，功能模块齐全的大型在线办公系统。项目采用了当下最流行的前后端分离架构及技术（ Java、SSM、Vue3.0、工作流 ），文章作为全面提升前后端技术水平的不二选择，也很适合作为简历的加分项。

项目以业务为基础，贯穿前后端技术栈，获得企业级项目开发经验 1、在实战中掌握，前后端主流技术点 聚焦Vue3、SSM、ElementUI等主流技术栈 提升前端实战经验，前端排版的技巧 提升SQL语句的设计能力 掌握 Activiti 工作流引擎

2、提升项目经验，驾驭企业级办公系统 熟练掌握前后端分离架构 学会工作流程的设计 提升使用云服务的能力 强化Java分布式项目的设计经验

3、增强竞争力，提高大公司面试通过率 界面美观，业务功能完整的企业级项目 能讲出具体的项目架构、业务设计和实现方案 Web端和移动端兼备的分布式企业级OA系统

项目流程完整、功能齐全、模块多样，真实可用的在线办公系统。聚焦前后端主流的技术栈，讲透讲通前后端分离架构，从入门循序渐进到中高级技能，串联【Web端】和【服务端】各项业务。

那么明确好了之后，我们就去进行对应的实现： 创建 views/article-create/components/Editor 创建 views/article-create/components/Markdown 在 views/article-create 完成基本结构

根据数据构建全新的 options 配置对象： const options = { // 鼠标移入之后的提示框配置 tooltip: { // 鼠标移入到坐标轴时，触发提示框 trigger: 'axis', // 移入坐标轴时，提示框的配置项 axisPointer: { // 显示十字准星指示器 type: 'cross', // 指示器样式 crossStyle: { // 色值 color: '#999' } } }, // 图例配置 legend: { // 图例数据 data: ['月累计收益', '日收益曲线'], // 图例位置 right: 0 }, // echarts 网格绘制的位置，对应 上、右、下、左 grid: { top: 20, right: 0, bottom: 0, left: 0, // 计算边距时，包含标签 containLabel: true }, // X 轴配置 xAxis: { // 坐标轴类型，category：类目轴 type: 'category', // 坐标轴数据 data: props.data.monthAmountList.map(item => item.time), // 刻度尺配置 axisTick: { // 不显示坐标轴刻度 show: false } }, // y 轴配置 yAxis: { // Y 轴类型，value：数值轴 type: 'value', // 最小值 min: 0, // 最大值 max: function(value) { // 取整 return parseInt(value.max * 1.2) }, // 刻度上展示的文字 axisLabel: { formatter: '{value} 万元' } }, // 图表类型 series: [ // 第一个图表 { // 图表名字，对应 legend.data[0] name: '月累计收益', // 图表类型 type: 'bar', // 柱的宽度 barWidth: 20, // 提示框展示配置 tooltip: { // 提示框展示的内容 valueFormatter: function(value) { return value + '万元' } }, // 数据源 data: props.data.monthAmountList.map(item => item.amount) }, // 第二个图表 { // 图表名字，对应 legend.data[1] name: '日收益曲线', // 图表类型 type: 'line', // 颜色 color: '#6EC6D0', // 平滑 smooth: true, // 提示框展示配置 tooltip: { // 提示框展示的内容 valueFormatter: function(value) { return value + '万元' } }, // 数据源 data: props.data.dailyCurve.map(item => item.amount) } ] } 在 src/views/chart/components/calendar/index.vue 中，利用 element-plus 的 calendar 组件完成日历基本渲染：

至此，地图可视化渲染完成。 到此时，我们基于 ECharts 来实现的可视化内容，就已经全部完成。 接下来我们就将会基于 AntV 的 S2 模块，来实现 大区营销数据分析 图示！