{"id":1935,"date":"2025-09-23T09:00:03","date_gmt":"2025-09-23T01:00:03","guid":{"rendered":"https:\/\/zero-zl.cn\/?p=1935"},"modified":"2025-09-23T16:21:31","modified_gmt":"2025-09-23T08:21:31","slug":"16-springboot3vue3%e5%ae%9e%e7%8e%b0echarts%e6%95%b0%e6%8d%ae%e7%bb%9f%e8%ae%a1%ef%bc%8c%e6%9f%b1%e7%8a%b6%e5%9b%be%e3%80%81%e9%a5%bc%e5%9b%be%e3%80%81%e6%8a%98%e7%ba%bf%e5%9b%be%e7%9a%84%e7%bb%9f","status":"publish","type":"post","link":"https:\/\/zero-zl.cn\/index.php\/2025\/09\/23\/16-springboot3vue3%e5%ae%9e%e7%8e%b0echarts%e6%95%b0%e6%8d%ae%e7%bb%9f%e8%ae%a1%ef%bc%8c%e6%9f%b1%e7%8a%b6%e5%9b%be%e3%80%81%e9%a5%bc%e5%9b%be%e3%80%81%e6%8a%98%e7%ba%bf%e5%9b%be%e7%9a%84%e7%bb%9f\/","title":{"rendered":"16. Springboot3+Vue3\u5b9e\u73b0echarts\u6570\u636e\u7edf\u8ba1\uff0c\u67f1\u72b6\u56fe\u3001\u997c\u56fe\u3001\u6298\u7ebf\u56fe\u7684\u7edf\u8ba1"},"content":{"rendered":"\n

\u53ef\u4ee5\u7edf\u8ba1\u7684\u6570\u636e\u4e3e\u4f8b<\/h2>\n\n\n\n
    \n
  1. \u7edf\u8ba1\u4e0d\u540c\u5206\u7c7b\u4e0b\u7528\u6237\u53d1\u5e03\u6587\u7ae0\u7684\u6570\u91cf<\/li>\n\n\n\n
  2. \u7edf\u8ba1\u4e0d\u540c\u7528\u6237\u53d1\u5e03\u6587\u7ae0\u7684\u6570\u91cf<\/li>\n\n\n\n
  3. \u7edf\u8ba1\u6700\u8fd1\u4e00\u5468\u6bcf\u5929\u5e73\u53f0\u7528\u6237\u53d1\u5e03\u7684\u6587\u7ae0\u6570\u91cf\uff08\u6bcf\u5929\u7684\u6d3b\u8dc3\u5ea6\uff09<\/li>\n<\/ol>\n\n\n\n

    echarts\u5b98\u7f51<\/h2>\n\n\n\n

    Apache ECharts<\/a><\/a><\/p>\n\n\n\n

    echarts\u7684\u4f7f\u7528<\/h2>\n\n\n\n

    \u5b89\u88c5\u4f9d\u8d56<\/h3>\n\n\n\n
    cd vue\nnpm install echarts --save\nimport * as echarts from \"echarts\";<\/code><\/pre>\n\n\n\n
    \u997c\u56fe\u7684\u5b9e\u73b0\u4ee3\u7801<\/h3>\n\n\n\n
    \/\/\u997c\u56fe\nlet pieOptions = {\n  title: {\n    text: '\u4e0d\u540c\u7528\u6237\u53d1\u5e03\u6587\u7ae0\u6570\u91cfTop5', \/\/\u4e3b\u6807\u9898\n    subtext: '\u7edf\u8ba1\u7ef4\u5ea6\uff1a\u7528\u6237\u6635\u79f0', \/\/\u526f\u6807\u9898\n    left: 'center'\n  },\n  tooltip: {\n    trigger: 'item',\n    formatter: '{a} <br\/>{b} : {c} ({d}%)'\n  },\n  legend: {\n    orient: 'vertical',\n    left: 'left'\n  },\n  series: [\n    {\n      name: '\u6570\u91cf\u5360\u6bd4', \/\/\u9f20\u6807\u79fb\u4e0a\u53bb\u663e\u793a\u5185\u5bb9\n      type: 'pie',\n      radius: '50%',\n      center: ['50%', '60%'],\n      data: [\n        { value: 1048, name: '\u6d4b\u8bd5\u6587\u7ae0' },\n        { value: 735, name: '\u5386\u53f2\u53e4\u8ff9' },\n        { value: 580, name: '\u4eba\u6587\u666f\u89c2' }\n      ],\n      emphasis: {\n        itemStyle: {\n          shadowBlur: 10,\n          shadowOffsetX: 0,\n          shadowColor: 'rgba(0, 0, 0, 0.5)'\n        }\n      }\n    }\n  ]\n};<\/code><\/pre>\n\n\n\n
    \u7edf\u8ba1\u56fe\u7684\u6570\u636e\u7ed3\u6784<\/h3>\n\n\n\n
    \u997c\u56fe\uff1a<\/p>\n\n\n\n
    data: [\n        { value: 1048, name: '\u6d4b\u8bd5\u6587\u7ae0' },\n        { value: 735, name: '\u5386\u53f2\u53e4\u8ff9' },\n        { value: 580, name: '\u4eba\u6587\u666f\u89c2' },\n      ],<\/code><\/pre>\n\n\n\n
    \u524d\u7aef\uff1a[ ] \u8868\u793a\u4e00\u4e2a\u6570\u7ec4\uff08\u5bf9\u5e94\u591a\u6761\u6570\u636e\uff09\uff0c{ } \u8868\u793a\u4e00\u4e2a\u5bf9\u8c61\uff08\u5bf9\u5e94\u4e00\u6761\u6570\u636e\uff09,
    \u5bf9\u5e94\u7684\u540e\u7aef\uff1aList\uff08\u5bf9\u5e94\u591a\u6761\u6570\u636e\uff09\uff0c\u67d0\u4e2a\u5bf9\u8c61\u6216\u8005\u662fMap<key, value>
    \u540e\u7aefList<Xxx>\u6216\u8005List<Map<key, value>><\/p>\n\n\n\n
    \u540e\u53f0\u63a5\u53e3\u5c01\u88c5\u8be5\u6570\u636e\u7ed3\u6784\u6240\u9700\u8981\u7684\u6570\u636e<\/h3>\n\n\n\n
    EchartsController.java<\/p>\n\n\n\n
    package org.example.springdemo.controller;\n\nimport jakarta.annotation.Resource;\nimport org.example.springdemo.common.Result;\nimport org.example.springdemo.entity.Article;\nimport org.example.springdemo.entity.Category;\nimport org.example.springdemo.service.ArticleService;\nimport org.example.springdemo.service.CategoryService;\nimport org.springframework.web.bind.annotation.RequestMapping;\nimport org.springframework.web.bind.annotation.RestController;\n\nimport java.util.ArrayList;\nimport java.util.HashMap;\nimport java.util.List;\nimport java.util.Map;\n\n@RestController\n@RequestMapping(\"\/echarts\")\npublic class EchartsController {\n\n    @Resource\n    public CategoryService categoryService;\n    @Resource\n    public ArticleService articleService;\n\n    @GetMapping(\"pie\")(\"pie\")\n    public Result pie() {\n        List<Map<String, Object>> list = new ArrayList<>();\n        \/\/ \u67e5\u8be2\u51fa\u6240\u6709\u7684\u5206\u7c7b\u4fe1\u606f\n        List<Category> categories = categoryService.selectAll(new Category());\n        \/\/ \u67e5\u8be2\u51fa\u6240\u6709\u7684\u6587\u7ae0\u4fe1\u606f\n        List<Article> articles = articleService.selectAll(new Article());\n        for (Category category : categories) {\n            long count = articles.stream().filter(x -> category.getId().equals(x.getCategoryId())).count();\n            Map<String, Object> map = new HashMap<>();\n            map.put(\"name\", category.getTitle());\n            map.put(\"value\", count);\n            list.add(map);\n        }\n        return Result.success(list);\n    }\n}<\/code><\/pre>\n\n\n\n
    \u524d\u7aef\u6e32\u67d3<\/h3>\n\n\n\n
    const loadPie = () => {\n  request.get('\/echarts\/pie').then(res => {\n    if (res.code === '200') {\n      let chartDom = document.getElementById('pie');\n      let myChart = echarts.init(chartDom)\n      pieOptions.series[0].data = res.data\n      myChart.setOption(pieOptions)\n    }\n  })\n}\nonMounted(() => {\n  loadPie()\n})<\/code><\/pre>\n\n\n\n
    \u5b8c\u6210\u7ed3\u679c<\/h3>\n\n\n\n
    \"\"<\/div><\/figure>\n\n\n\n
    \u5b8c\u6574\u6570\u636e\u7ed3\u6784<\/h2>\n\n\n\n
    \/\/\u997c\u56fe\nlet pieOptions = {\n  title: {\n    text: '\u4e0d\u540c\u7528\u6237\u53d1\u5e03\u6587\u7ae0\u6570\u91cfTop5', \/\/\u4e3b\u6807\u9898\n    subtext: '\u7edf\u8ba1\u7ef4\u5ea6\uff1a\u7528\u6237\u6635\u79f0', \/\/\u526f\u6807\u9898\n    left: 'center'\n  },\n  grid : {\n    top : '20%',\n    bottom : '20%',\n  },\n  tooltip: {\n    trigger: 'item',\n    formatter: '{a} <br\/>{b} : {c} ({d}%)'\n  },\n  legend: {\n    orient: 'vertical',\n    left: 'left'\n  },\n  series: [\n    {\n      name: '\u6570\u91cf\u5360\u6bd4', \/\/\u9f20\u6807\u79fb\u4e0a\u53bb\u663e\u793a\u5185\u5bb9\n      type: 'pie',\n      radius: '50%',\n      center: ['50%', '60%'],\n      data: [\n        { value: 1048, name: '\u6d4b\u8bd5\u6587\u7ae0' },\n        { value: 735, name: '\u5386\u53f2\u53e4\u8ff9' },\n        { value: 580, name: '\u4eba\u6587\u666f\u89c2' }\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\/\/ \u67f1\u72b6\u56fe\nlet barOptions = {\n  title: {\n    text: '\u4e0d\u540c\u7528\u6237\u53d1\u5e03\u6587\u7ae0\u7684\u6570\u91cfTop5',\n    subtext: '\u7edf\u8ba1\u7ef4\u5ea6\uff1a\u7528\u6237\u6635\u79f0',\n    left: 'center'\n  },\n  xAxis: {\n    type: 'category',\n    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n    name: '\u7528\u6237\u6635\u79f0'\n  },\n  yAxis: {\n    type: 'value',\n    name: '\u6587\u7ae0\u6570\u91cf'\n  },\n  tooltip: {\n    trigger: 'item',\n  },\n  series: [\n    {\n      data: [120, 200, 150, 80, 70, 110, 130],\n      type: 'bar',\n      itemStyle: {\n        normal: {\n          color: function () {\n            return \"#\" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);\n          }\n        },\n      },\n      backgroundStyle: {\n        color: 'rgba(180, 180, 180, 0.2)'\n      }\n    }\n  ]\n};\n\n\/\/\u6298\u7ebf\u56fe\nlet lineOptions = {\n  title: {\n    text: '\u6700\u8fd1\u4e00\u5468\u6587\u7ae0\u53d1\u5e03\u6570\u91cf',\n    subtext: '\u7edf\u8ba1\u7ef4\u5ea6\uff1a\u6700\u8fd1\u4e00\u5468',\n    left: 'center'\n  },\n  legend: {\n    data: [],\n    template:\"\"\n  },\n  grid: {\n    left: '3%',\n    right: '4%',\n    bottom: '3%',\n    containLabel: true\n  },\n  tooltip: {\n    trigger: 'item'\n  },\n  xAxis: {\n    name: '\u65e5\u671f',\n    type: 'category',\n    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n  },\n  yAxis: {\n    name: '\u6587\u7ae0\u6570\u91cf',\n    type: 'value'\n  },\n  series: [\n    {\n      name: '\u6587\u7ae0\u6570\u91cf',\n      data: [820, 932, 901, 934, 1290, 1330, 1320],\n      type: 'line',\n      smooth: true,\n      markLine: {\n        data: [{ type: 'average', name: '\u6700\u8fd1\u4e00\u5468\u6587\u7ae0\u53d1\u5e03\u6570\u91cf\u5e73\u5747\u503c' }]\n      },\n      markPoint: {\n        data: [\n          { type: 'max', name: '\u6700\u5927\u503c' },\n          { type: 'min', name: '\u6700\u5c0f\u503c' }\n        ]\n      },\n    },\n  ]\n};<\/code><\/pre>\n\n\n\n
    \u5b8c\u6574\u540e\u7aef\u63a5\u53e3<\/h2>\n\n\n\n
    package org.example.springdemo.controller;\n\nimport cn.hutool.core.date.DateField;\nimport cn.hutool.core.date.DateTime;\nimport cn.hutool.core.date.DateUtil;\nimport cn.hutool.core.util.ObjectUtil;\nimport jakarta.annotation.Resource;\nimport org.example.springdemo.common.Result;\nimport org.example.springdemo.entity.Article;\nimport org.example.springdemo.entity.Category;\nimport org.example.springdemo.entity.User;\nimport org.example.springdemo.service.ArticleService;\nimport org.example.springdemo.service.CategoryService;\nimport org.example.springdemo.service.UserService;\nimport org.springframework.web.bind.annotation.GetMapping;\nimport org.springframework.web.bind.annotation.RequestMapping;\nimport org.springframework.web.bind.annotation.RestController;\n\nimport java.util.*;\nimport java.util.stream.Collectors;\n\n@RestController\n@RequestMapping(\"\/echarts\")\npublic class EchartsController {\n\n    @Resource\n    public CategoryService categoryService;\n    @Resource\n    public ArticleService articleService;\n    @Resource\n    public UserService userService;\n\n    @GetMapping(\"\/pie\")\n    public Result pie() {\n        List<Map<String, Object>> list = new ArrayList<>();\n        \/\/ \u67e5\u8be2\u51fa\u6240\u6709\u7684\u5206\u7c7b\u4fe1\u606f\n        List<Category> categories = categoryService.selectAll(new Category());\n        \/\/ \u67e5\u8be2\u51fa\u6240\u6709\u7684\u6587\u7ae0\u4fe1\u606f\n        List<Article> articles = articleService.selectAll(new Article());\n        for (Category category : categories) {\n            long count = articles.stream().filter(x -> category.getId().equals(x.getCategoryId())).count();\n            Map<String, Object> map = new HashMap<>();\n            map.put(\"name\", category.getTitle());\n            map.put(\"value\", count);\n            list.add(map);\n        }\n        return Result.success(list);\n    }\n\n    @GetMapping(\"\/bar\")\n    public Result bar() {\n        Map<String, Object> resultMap = new HashMap<>();\n        List<String> xList = new ArrayList<>();\n        List<Long> yList = new ArrayList<>();\n        Map<String, Long> map = new HashMap<>();\n\n        \/\/ \u67e5\u8be2\u6240\u6709\u7684\u7528\u6237\n        List<User> users = userService.selectAll(new User());\n        \/\/ \u67e5\u8be2\u51fa\u6240\u6709\u7684\u6587\u7ae0\u4fe1\u606f\n        List<Article> articles = articleService.selectAll(new Article());\n        for (User user : users) {\n            long count = articles.stream().filter(x -> user.getId().equals(x.getUserId())).count();\n            map.put(user.getName(), count);\n        }\n\n        \/\/\u5bf9map\u8fdb\u884c\u6392\u5e8f\uff0c\u6309\u7167value\u6765\u5012\u5e8f\n        LinkedHashMap<String, Long> collectMap = map.entrySet().stream()\n                .sorted(Collections.reverseOrder(Map.Entry.comparingByValue()))\n                .collect(Collectors.toMap(Map.Entry::getKey, Map.Entry::getValue, (e1, e2) -> e1, LinkedHashMap::new));\n\n        for (String key : collectMap.keySet()) {\n            xList.add(key);\n            yList.add(collectMap.get(key));\n        }\n\n        \/\/top\u524d5\n        if (xList.size() > 5 && yList.size() > 5) {\n            xList = xList.subList(0, 5);\n            yList = yList.subList(0, 5);\n        }\n\n        resultMap.put(\"xAxis\", xList);\n        resultMap.put(\"yAxis\", yList);\n        return Result.success(resultMap);\n    }\n\n    @GetMapping(\"\/line\")\n    public Result line() {\n        Map<String, Object> resultMap = new HashMap<>();\n        List<Long> yList = new ArrayList<>();\n\n        \/\/ \u83b7\u53d6\u6700\u8fd1\u591a\u5c11\u5929\u7684\u5e74\u6708\u65e5List\n        Date today = new Date();\n        DateTime start = DateUtil.offsetDay(today, -7);\n        List<String> xList = DateUtil.rangeToList(start, today, DateField.DAY_OF_YEAR).stream().map(DateUtil::formatDate).toList();\n\n        \/\/ \u67e5\u8be2\u51fa\u6240\u6709\u7684\u6587\u7ae0\u4fe1\u606f\n        List<Article> articles = articleService.selectAll(new Article());\n\n        for (String day : xList) {\n            long count = articles.stream().filter(x -> ObjectUtil.isNotEmpty(x.getTime()) && x.getTime().contains(day)).count();\n            yList.add(count);\n        }\n\n        resultMap.put(\"xAxis\", xList);\n        resultMap.put(\"yAxis\", yList);\n        return Result.success(resultMap);\n    }\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    \u53ef\u4ee5\u7edf\u8ba1\u7684\u6570\u636e\u4e3e\u4f8b echarts\u5b98\u7f51 Apache ECharts echarts\u7684\u4f7f\u7528 \u5b89\u88c5\u4f9d\u8d56 \u997c\u56fe\u7684\u5b9e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[114,102],"tags":[],"class_list":["post-1935","post","type-post","status-publish","format-standard","hentry","category-spring-boot3vue3","category-102"],"_links":{"self":[{"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/posts\/1935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1935"}],"version-history":[{"count":6,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/posts\/1935\/revisions"}],"predecessor-version":[{"id":1945,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/posts\/1935\/revisions\/1945"}],"wp:attachment":[{"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}