【小小Demo】Echart图表

最新推荐文章于 2024-01-09 16:34:35 发布

程序员小菜鸡QAQ

最新推荐文章于 2024-01-09 16:34:35 发布

阅读量104

点赞数

分类专栏：小小Demo 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Java_Wxlin/article/details/130620254

版权

小小Demo 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该文章介绍了如何在SpringBoot项目中结合layui和echarts实现图表展示，包括静态和动态数据的处理。动态数据通过接口获取并解析，以饼图为例展示了数据统计的功能。项目源码可在Gitee的xiaoxiao-demo仓库找到。

摘要由CSDN通过智能技术生成

layui-echarts

简介

基于layui 实现的 echart 图表

Echart 官网

示例

Echart示例

下载Echart

Echart下载

我们选择最下面的在线定制

我这里就按照它默认选择的，后续以上面三个为梨子。

下载完成后，访问工程里面，并引入页面。

环境

jdk1.8
idea
maven
springboot 2.1.1.RELEASE

项目启动

修改maven设置

打开IDEA 设置：File>Setting>Build,Exec… 如下图所示

启动

找到启动类，鼠标右键点击三角形或虫 即可；

访问路径：

静态

http://localhost:8090/echart/index

动态

http://localhost:8090/echart/dynamic

页面效果

静态效果

动态效果

动态的数据，需要通过接口进行查询，然后讲数据返回

我们这里暂时先把数据写死，（实际上需要通过查询数据库或者其他的存储数据的地方获取统计的数据）。

这里以饼图的数据为例：


/**
 * 加载饼图数据
 * @return
 */
@GetMapping("getPieData")
public Result getPieData(){
        List<PieDto> data=new ArrayList<>();
        data.add(new PieDto("发布量",100));
        data.add(new PieDto("阅读量",1000));
        data.add(new PieDto("点赞量",200));
        data.add(new PieDto("评论量",120));
        data.add(new PieDto("收藏量",320));
        return Result.success(data);
        }

接口返回的数据格式为：

{
  "flag": true,
  "msg": "success",
  "data": [
    {
      "name": "发布量",
      "value": 100
    },
    {
      "name": "阅读量",
      "value": 1000
    },
    {
      "name": "点赞量",
      "value": 200
    },
    {
      "name": "评论量",
      "value": 120
    },
    {
      "name": "收藏量",
      "value": 320
    }
  ]
}

我们需要在JS 进行解析，如下所示：

这里可以对比一下静态效果修改的地方

/**
 * 绘制饼图
 */
drawPie: () => {
    let data = [];
    // 通过接口获取动态数据
    get('/echart/getPieData', null, res => {
        if (res && res.flag === true) {
            data = res.data;
        }
    }, error => {
        alert("获取数据异常");
        console.error("获取饼图数据异常:", error)
    }, false)
    var chartDom = document.getElementById('pie');
    var myChart = echarts.init(chartDom);
    let option = {
        title: {
            text: '文章数据统计',
            subtext: '统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}