[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-XxSPPFGi":3,"public-project-articles-XxSPPFGi":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},564,"XxSPPFGi",47,"16. SpringBoot3+Vue3实现数据统计图表功能","## Ecahrts 官网\n\n[https:\u002F\u002Fecharts.apache.org\u002Fzh\u002Findex.html](https:\u002F\u002Fecharts.apache.org\u002Fzh\u002Findex.html)\n\n## 安装使用 Echarts\n\n```vue\nnpm i echarts -S\n```\n\ndom 容器\n\n```vue\n\u003Cdiv style=\"width=600px; height=400px\" id=\"main\">\u003C\u002Fdiv>\n```\n\n```vue\nimport * as echarts from 'echarts';\n\nconst option = {\n  title: {\n    text: 'ECharts 入门示例'\n  },\n  tooltip: {},\n  legend: {\n    data: ['销量']\n  },\n  xAxis: {\n    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n  },\n  yAxis: {},\n  series: [\n    {\n      name: '销量',\n      type: 'bar',\n      data: [5, 20, 36, 10, 10, 20]\n    }\n  ]\n};\n  \n\u002F\u002F 基于准备好的dom，初始化echarts实例\nconst myChart = echarts.init(document.getElementById('main'))\n  \u002F\u002F 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n```\n\n## 注意：必须在 dom 准备好的时候再去设置初始化 ecahrts 示例\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1730190334293-f09d2794-c199-4b83-8be0-65be2bea8ecc.png)\n\n引入  onMouted\n\n```vue\nimport { reactive, onMounted } from \"vue\";\n\n  \n\u002F\u002F onMounted 表示页面的所有dom元素都初始化完成了\nonMounted(() => {\n  \u002F\u002F 基于准备好的dom，初始化echarts实例\n  const myChart = echarts.init(document.getElementById('main'))\n  \u002F\u002F 使用刚指定的配置项和数据显示图表。\n  myChart.setOption(option);\n})\n```\n\n## 柱状图\n\n数据结构\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1730193439988-e9190a68-5b78-4840-9c20-03d123d787c6.png)\n\n```java\n@GetMapping(\"\u002FbarData\")\npublic Result getBarData() {\n    Map\u003CString, Object> map = new HashMap\u003C>();\n    List\u003CEmployee> employeeList = employeeService.selectAll(null);\n    Set\u003CString> departmentNameSet = employeeList.stream().map(Employee::getDepartmentName).collect(Collectors.toSet());\n    map.put(\"department\", departmentNameSet);  \u002F\u002F x轴数据\n    List\u003CLong> countList = new ArrayList\u003C>();\n    for (String departmentName : departmentNameSet) {\n        \u002F\u002F 统计这个部门下面的员工的数量\n        long count = employeeList.stream().filter(employee -> employee.getDepartmentName().equals(departmentName)).count();\n        countList.add(count);\n    }\n    map.put(\"count\", countList);  \u002F\u002F y轴员工数量的数据\n    return Result.success(map);\n}\n```\n\n设置颜色\n\n```java\nitemStyle: {\n    normal: {\n      color: function () {\n        return \"#\" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);\n      }\n    },\n},\n```\n\n## 折线图\n\n数据结构\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1730193461844-cd14cd2d-efc2-444c-be2c-2a5e8e2ee962.png)\n\n```java\n@GetMapping(\"\u002FlineData\")\npublic Result getLineData() {\n    Map\u003CString, Object> map = new HashMap\u003C>();\n\n    Date date = new Date();  \u002F\u002F 今天当前的时间\n    DateTime start = DateUtil.offsetDay(date, -7); \u002F\u002F 起始日期\n    List\u003CDateTime> dateTimeList = DateUtil.rangeToList(start, date, DateField.DAY_OF_YEAR);\n    \u002F\u002F 把 DateTime 类型的日期转换成  字符串类型的日期  [\"10月22日\", \"10月23日\"...]\n    List\u003CString> dateStrList = dateTimeList.stream().map(dateTime -> DateUtil.format(dateTime, \"MM月dd日\"))\n            .sorted(Comparator.naturalOrder()).collect(Collectors.toList());\n    map.put(\"date\", dateStrList);  \u002F\u002F x轴数据\n\n    List\u003CInteger> countList = new ArrayList\u003C>();\n    for (DateTime day : dateTimeList) {\n        \u002F\u002F 10月22日\n        String dayFormat = DateUtil.formatDate(day);  \u002F\u002F 2023-10-22\n        \u002F\u002F 获取当天所有的发布的文章的数量\n        Integer count = articleService.selectCountByDate(dayFormat);\n        countList.add(count);\n    }\n    map.put(\"count\", countList);  \u002F\u002F y轴发布文章的数量数据\n    return Result.success(map);\n}\n\n```\n\n## 饼图\n\n数据结构\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1730194566405-936cfba2-16d0-45ea-ada2-2a023c500516.png)\n\n```java\n@GetMapping(\"\u002FpieData\")\npublic Result getPieData() {\n    List\u003CMap\u003CString, Object>> list = new ArrayList\u003C>();\n    List\u003CEmployee> employeeList = employeeService.selectAll(null);\n    Set\u003CString> departmentNameSet = employeeList.stream().map(Employee::getDepartmentName).collect(Collectors.toSet());\n    for (String departmentName : departmentNameSet) {\n        HashMap\u003CString, Object> map = new HashMap\u003C>();\n        map.put(\"name\", departmentName);\n        \u002F\u002F 统计这个部门下面的员工的数量\n        long count = employeeList.stream().filter(employee -> employee.getDepartmentName().equals(departmentName)).count();\n        map.put(\"value\", count);\n        list.add(map);\n    }\n    return Result.success(list);\n}\n```\n\n\n\n## 完整的 Data.vue 代码\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cel-row :gutter=\"10\">\n     \u003Cel-col :span=\"12\" style=\"margin-bottom: 10px\">\n       \u003Cdiv class=\"card\" style=\"padding: 20px; height: 400px\" id=\"bar\">\u003C\u002Fdiv>\n     \u003C\u002Fel-col>\n      \u003Cel-col :span=\"12\" style=\"margin-bottom: 10px\">\n        \u003Cdiv class=\"card\" style=\"padding: 20px; height: 400px\" id=\"line\">\u003C\u002Fdiv>\n      \u003C\u002Fel-col>\n      \u003Cel-col :span=\"12\" style=\"margin-bottom: 10px\">\n        \u003Cdiv class=\"card\" style=\"padding: 20px; height: 400px\" id=\"pie\">\u003C\u002Fdiv>\n      \u003C\u002Fel-col>\n    \u003C\u002Fel-row>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive, onMounted } from \"vue\";\nimport * as echarts from 'echarts';\nimport request from \"@\u002Futils\u002Frequest.js\";\n\nconst barOption = {\n  title: {\n    text: '各部门员工数量'\n  },\n  tooltip: {},\n  legend: {\n    trigger: 'item'\n  },\n  xAxis: {\n    data: []\n  },\n  yAxis: {},\n  series: [\n    {\n      name: '人数',\n      type: 'bar',\n      data: [],\n      itemStyle: {\n        normal: {\n          color: function (params) {\n            let colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']\n            return colors[params.dataIndex % colors.length]\n          }\n        },\n      },\n    }\n  ]\n};\n\nconst lineOption = {\n  title: {\n    text: '近7天发布文章的数量'\n  },\n  tooltip: {},\n  legend: {\n    trigger: 'item'\n  },\n  xAxis: {\n    data: []\n  },\n  yAxis: {},\n  series: [\n    {\n      name: '发布数量',\n      type: 'line',\n      data: [],\n      smooth: true\n    }\n  ]\n};\n\nconst pieOption = {\n  title: {\n    text: '各部门员工数量比例图',\n    left: 'center'\n  },\n  tooltip: {\n    trigger: 'item'\n  },\n  legend: {\n    orient: 'vertical',\n    left: 'left'\n  },\n  series: [\n    {\n      name: '员工数量',\n      type: 'pie',\n      radius: '50%',\n      data: [],\n      center: ['50%', '50%'],\n      label: {\n        formatter: '{b}: {@2012} ({d}%)'\n      },\n      emphasis: {\n        itemStyle: {\n          shadowBlur: 10,\n          shadowOffsetX: 0,\n          shadowColor: 'rgba(0, 0, 0, 0.5)'\n        }\n      }\n    }\n  ]\n};\n\n\u002F\u002F onMounted 表示页面的所有dom元素都初始化完成了\nonMounted(() => {\n  \u002F\u002F 基于准备好的dom，初始化echarts实例\n  const barChart = echarts.init(document.getElementById('bar'))\n  request.get('\u002FbarData').then(res => {\n    barOption.xAxis.data = res.data.department  \u002F\u002F 横轴数据\n    barOption.series[0].data = res.data.count   \u002F\u002F 纵轴的数据\n    \u002F\u002F 使用刚指定的配置项和数据显示图表。\n    barChart.setOption(barOption);\n  })\n\n  \u002F\u002F 基于准备好的dom，初始化echarts实例\n  const lineChart = echarts.init(document.getElementById('line'))\n  request.get('\u002FlineData').then(res => {\n    lineOption.xAxis.data = res.data.date  \u002F\u002F 横轴数据\n    lineOption.series[0].data = res.data.count   \u002F\u002F 纵轴的数据\n    \u002F\u002F 使用刚指定的配置项和数据显示图表。\n    lineChart.setOption(lineOption);\n  })\n\n  \u002F\u002F 基于准备好的dom，初始化echarts实例\n  const pieChart = echarts.init(document.getElementById('pie'))\n  request.get('\u002FpieData').then(res => {\n    pieOption.series[0].data = res.data\n    \u002F\u002F 使用刚指定的配置项和数据显示图表。\n    pieChart.setOption(pieOption);\n  })\n\n\n})\n\n\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n\n\u003C\u002Fstyle>\n```\n\n-- 完结撒花~ --\n\n## 完整带敲源码\n\n\u003Ca href=\"https:\u002F\u002Fpan.baidu.com\u002Fs\u002F1gsLTo-vjdDDRjcW6hCVUKQ?pwd=njxs\" target=\"_blank\">点击下载\u003C\u002Fa>\n\n","coding",1,4236,1109,"2025-01-09 09:40:57","2026-05-03 22:49:02","1天学会SpringBoot3+Vue3实战项目开发","learn-springboot-vue",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,42,49,56,63,70,77,84,91,98,105,112,119,126],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":14,"project_title":15,"project_slug":16},475,"OgrBbww7","01. 1天学会SpringBoot3+Vue3实战项目课程介绍",17862,910,"2024-10-11 16:50:50",{"id":28,"uuid":29,"project_id":6,"title":30,"type":9,"status":10,"public_enabled":10,"views":31,"sort":32,"created_at":33,"updated_at":14,"project_title":15,"project_slug":16},476,"U58ISSFR","02. 从0带你搭建Vue3工程",12899,911,"2024-10-11 16:47:49",{"id":35,"uuid":36,"project_id":6,"title":37,"type":9,"status":10,"public_enabled":10,"views":38,"sort":39,"created_at":40,"updated_at":41,"project_title":15,"project_slug":16},478,"tK3YUYq8","03. Vue3集成Element-Plus",9899,919,"2024-10-14 22:18:17","2026-05-07 15:33:28.189425+00",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},488,"J2MV6UAG","04. Element-Plus组件使用速成",8093,938,"2024-10-11 16:49:40",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},489,"zGi4XJsb","05. Vue3集成Vue-Router实现路由跳转",7443,939,"2024-10-12 15:44:41",{"id":57,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},499,"cwsTdvo9","06. Vue3搭建后台管理系统",7421,964,"2024-10-14 16:02:49",{"id":64,"uuid":65,"project_id":6,"title":66,"type":9,"status":10,"public_enabled":10,"views":67,"sort":68,"created_at":69,"updated_at":14,"project_title":15,"project_slug":16},501,"JlXltpKA","07. Mysql语法简介（速成）",5208,973,"2024-10-15 16:52:18",{"id":71,"uuid":72,"project_id":6,"title":73,"type":9,"status":10,"public_enabled":10,"views":74,"sort":75,"created_at":76,"updated_at":14,"project_title":15,"project_slug":16},509,"c3XrOTcU","08. 从0带你搭建SpringBoot3工程",9397,992,"2024-10-16 15:43:13",{"id":78,"uuid":79,"project_id":6,"title":80,"type":9,"status":10,"public_enabled":10,"views":81,"sort":82,"created_at":83,"updated_at":14,"project_title":15,"project_slug":16},516,"QsKwbDX7","09. SpringBoot3集成Mybatis",10348,1004,"2024-10-17 16:36:15",{"id":85,"uuid":86,"project_id":6,"title":87,"type":9,"status":10,"public_enabled":10,"views":88,"sort":89,"created_at":90,"updated_at":14,"project_title":15,"project_slug":16},519,"qKG13ySo","10. SpringBoot3+Vue3实现基本的增删改查功能",9572,1013,"2024-10-18 16:34:55",{"id":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},527,"7uED9n7e","11. Vue3开发登录注册页面",7106,1031,"2024-10-21 17:35:30",{"id":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},535,"poUfWrWc","12. Vue3管理系统开发个人信息、修改密码页面",5777,1050,"2024-10-22 17:50:30",{"id":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},542,"FxHR3hNR","13. SpringBoot3+Vue3实现文件上传下载功能",4489,1057,"2024-10-23 17:31:02",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},548,"VPZNSTxr","14. SpringBoot3+Vue3实现富文本编辑器功能",3931,1072,"2024-10-24 17:38:21",{"id":120,"uuid":121,"project_id":6,"title":122,"type":9,"status":10,"public_enabled":10,"views":123,"sort":124,"created_at":125,"updated_at":14,"project_title":15,"project_slug":16},555,"nal0yVxM","15. SpringBoot3+Vue3实现数据批量导入导出功能",3577,1090,"2024-10-28 17:39:21",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16}]