若依整合 Echarts指南（346）

Echarts介绍

Echarts是一个功能丰富的图表绘制库，广泛应用于数据可视化领域，能够生成多种类型的图表，帮助用户直观地分析和展示数据。

Echarts示例图

应用场景

Echarts非常适合用于数据分析仪表盘、实时监控、报表生成等场景，特别是在需要动态展示数据趋势和对比时，能够提供极佳的用户体验。

注意事项

在整合Echarts时，请确保正确处理数据源，避免将null属性映射到JSON中，以免导致图表加载失败。此外，选择合适的Echarts版本也是关键。

完整代码

第一步：下载Echarts

访问以下链接进行下载：

http://echarts.baidu.com/download.html

html:

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>

建议下载完整版本，如需调试，可选择源代码版。

第二步：创建Echarts文件夹

在ruoyi-admin模块的resources/static/js/plugins目录下新建echarts文件夹，并将下载的echarts.min.js文件放入其中。

Echarts文件夹结构

第三步：新建`testEcharts.html`

在templates/system/echarts/目录下创建testEcharts.html文件，同时在ruoyi-admin/src/main/resources下创建SysEchartsController.java控制器。以下是HTML代码示例：

<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="container-div">
    <div id="main" style="height:400px"></div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/js/plugins/echarts/echarts.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "system/echarts";
    var myChart = echarts.init(document.getElementById("main"));

    function showChart(){
        myChart.clear();
        myChart.showLoading({text:'正在努力加载。。。'});
         $.ajax({ type : "GET", url : prefix + "/getEcharts", async : false, error : function(request) {$ .modal.alertError("系统错误");
            },
            success : function(data) {
                if(data){
                    myChart.setOption(data);
                    myChart.hideLoading();
                } else {
                    alert("出错");
                }
            }
        });
    }
    showChart();
</script>
</body>
</html>

第四步：添加依赖

在ruoyi-common模块的pom.xml文件中添加Echarts依赖：

<dependency>
  <groupId>com.github.abel533</groupId>
  <artifactId>ECharts</artifactId>
  <version>最新版本</version>
</dependency>

第五步：配置Jackson

为了避免null属性映射到JSON中，需在ruoyi-framework模块的config包下添加JacksonConfig.java配置类：

@Configuration
public class JacksonConfig {
    @Bean
    @Primary
    @ConditionalOnMissingBean(ObjectMapper.class)
    public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {
        ObjectMapper objectMapper = builder.createXmlMapper(false).build();
        objectMapper.setSerializationInclusion(JsonInclude.Include.NON_EMPTY);
        objectMapper.getSerializerProvider().setNullValueSerializer(new JsonSerializer<Object>() {
            @Override
            public void serialize(Object o, JsonGenerator jsonGenerator, SerializerProvider serializerProvider) throws IOException {
                jsonGenerator.writeString("");
            }
        });
        return objectMapper;
    }
}

第六步：实现控制器

在控制器中编写代码以确保页面能够正常访问并获取JSON数据：

@Controller
@RequestMapping("/system/echarts")
public class SysEchartsController extends BaseControllers {
    private String prefix = "system/echarts";

    @RequiresPermissions("system:echarts:view")
    @GetMapping()
    public String user() {
        return prefix + "/echarts";
    }

    @GetMapping("/getEcharts")
    @ResponseBody
    public Option getOption() {
        Option option = new Option();
        option.tooltip().show(true);
        option.legend().data("销量");

        ValueAxis valueAxis = new ValueAxis();
        valueAxis.type(AxisType.category);
        valueAxis.data("AI喵经济", "开发喵AI", "开发喵学习", "开发喵周边", "AI喵能力", "AI喵星球");
        option.xAxis(valueAxis);

        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.type(AxisType.value);
        option.yAxis(categoryAxis);

        Bar bar = new Bar();
        bar.name("销量").data(5, 20, 40, 10, 10, 20);

        option.series(bar);
        return option;
    }
}

运行结果

完成上述步骤后，访问testEcharts.html页面，将展示成功渲染的Echarts图表，数据由后端接口动态获取并展示。

开发喵星球