【HTML】Echart图表

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);
}

动态效果如下所示：

项目地址

Gitee:xiaoxiao-demo 的layui-echarts下。