若依整合Echarts（190）

一、前端操作

eCharts是一款强大的图表统计工具

下面记录一下如何在若依项目中使用eCharts。

1、下载eCharts

地址为：
http://echarts.baidu.com/download.html
<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js>
  <script>
  
此处需要选择【完整】版的，另外如果需要调试的话，可以选择【源代码】版。

2、新建echarts文件夹

位置：ruoyi-admin模块的resources/static/js/plugins下新建echarts文件夹

将下载的echarts.min.js文件加入其中。

3、在相应template目录下新建一个testEcharts.html文件，创建相应controller层用于简单访问该页面。

我的位置：
html: templates/system/echarts/testEcharts.html
controller: ruoyi-admin/src/main/resources/SysEchartsController.java

具体代码如下：

<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="container-div">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <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"));

    // var option = {
    //     tooltip: {
    //         show: true
    //     },
    //     series : [
    //         {
    //             "name":"销量",
    //             "type":"bar",
    //             "data":[5, 20, 40, 10, 10, 20]
    //         }
    //     ],
    //     xAxis : [
    //         {
    //             data : ["AI喵经济","开发喵AI","开发喵学习","开发喵周边","AI喵能力","AI喵星球"],
    //             type : 'category'
    //         }
    //     ],
    //     yAxis : [
    //         {
    //             type : 'value'
    //         }
    //     ]
    // };

    function showChart(){
        myChart.clear();
        myChart.showLoading({text:'正在努力加载。。。'});
        // 将Echarts图表的值固定写法
        // myChart.setOption(option);
        // Echarts图表的值从后端获取
         $.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>

从以上代码可以看出，我们不仅可以将Echarts图表的值给固定，还可以发送请求到后端去获取，而后端获取也有两种方式，一种是后端直接返回json格式，另一种是后端返回数据，前端js去渲染，这里使用第一种方式：后端直接返回json格式，也就是拼接的option。
一起来看看后端操作吧！

二、后端操作

1、添加依赖

位置：在ruoyi-common模块下的pom.xml中加入依赖

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

2、添加配置

原因：在对象映射成json时，依赖导致很多null属性也被映射成json了，这样会导致echarts的某些重要属性遭到null覆盖掉，使得echarts加载报错。

解决方案：过滤掉json中的null和空字段。

解决办法：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();

        // 通过该方法对mapper对象进行设置，所有序列化的对象都将按改规则进行系列化
        // Include.Include.ALWAYS 默认
        // Include.NON_DEFAULT 属性为默认值不序列化
        // Include.NON_EMPTY 属性为 空（""） 或者为 NULL 都不序列化，则返回的json是没有这个字段的。这样对移动端会更省流量
        // Include.NON_NULL 属性为NULL 不序列化
        objectMapper.setSerializationInclusion(JsonInclude.Include.NON_EMPTY);

        // 字段保留，将null值转为""
        objectMapper.getSerializerProvider().setNullValueSerializer(new JsonSerializer<Object>() {
            @Override
            public void serialize(Object o, JsonGenerator jsonGenerator, SerializerProvider serializerProvider) throws IOException, JsonProcessingException {
                jsonGenerator.writeString("");
            }
        });
        return objectMapper;
    }
}

3、添加controller

在controller中使得页面可以正常访问并获取json数据，进行拼装option。

@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";
    }

    /*
     * 获取柱状图 json数据
     * */
    @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;
    }
}

开发喵星球