官網：https://echarts.apache.org/handbook/zh/get-started/
各個版本下載地址：https://echarts.apache.org/zh/download.html
以若依為例：
若依項目整合eCharts實現圖表統計功能 eCharts是一款強大的圖表統計工具，具體介紹可查看其官網 http://echarts.baidu.com/echarts2/index.html 下面記錄一下如何在若依項目中使用eCharts。 1、下載eCharts，地址為：http://echarts.baidu.com/download.html 此處需要選擇【完整】版的，另外如果需要調試的話，可以選擇【源代碼】版。 2、在若依項目ruoyi-admin的resources/static/js/plugins下新建echarts文件夾，將下載的echarts.min.js文件加入其中。 3、在相應template目錄下新建一個testEcharts.html文件，創建相應controller層用於簡單訪問該頁面。下面簡單說明下如何在testEcharts.html中實現Echarts官方新手入門http://echarts.baidu.com/echarts2/doc/start.html中第四個參考案例。 <!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 + "finance/budgetChart"; 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 : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"], type : 'category' } ], yAxis : [ { type : 'value' } ] }; function showChart(){ myChart.clear(); myChart.showLoading({text:'正在努力加載。。。'}); myChart.setOption(option ); } showChart(); </script> </body> </html> 進行對該頁面的訪問，出現如下圖表統計，即說明eCharts可以正常使用了。 4、以上的實現是將組裝eChats的數據固定寫死了，但在實際的開發過程中肯定是需要獲取真實的業務數據的。此刻有兩種方式拼裝eCharts數據，一是前端拼裝，即后台傳過來原始數據，再在前端拼裝option，二是后端拼裝，即后台直接返回拼裝好的option。我這邊選擇了后端拼裝，感覺更加靈活和方便。后端拼裝的實現可以依靠一大神寫的echarts-java映射類庫https://gitee.com/free/ECharts，只需在ruoyi-common項目下的pom.xml中加入其依賴即可。 此處需要特別注意版本問題，需要選擇3.0.0.2版本，目前最新是3.0.0.3版本，但是本人測試如果用最新版本會出現Uncaught Error: xAxis "0" not found的錯誤，返回xAxis和yAxis 屬性時返回的是xaxis和yaxis，將大寫的A變成了小寫的a，導致頁面無法渲染，這個問題的發現困擾了我大半天的時間，此處說明下防止新同學再跳坑中。 <!-- echarts-java映射類庫 --> <dependency> <groupId>com.github.abel533</groupId> <artifactId>ECharts</artifactId> <version>3.0.0.2</version> </dependency> 5、利用該類庫進行拼裝返回option的過程中發現一個問題，即對象映射成json時，很多null屬性也被映射成json了，這樣會導致echarts的某些重要屬性遭到null覆蓋掉，使得echarts加載報錯。 解決辦法：過濾掉json中的null和空字段。需要在ruoyi-framework項目的config包下增加JacksonConfig配置類： 此處參考了：https://blog.csdn.net/u012415035/article/details/79378010 @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; } } 6、在之前的controller中進行拼裝option處理，此處同樣去實現上面的圖標統計，具體代碼如下： /* * 獲取柱狀圖 json數據 * */ @GetMapping("/getOption") @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("襯衫","羊毛衫","雪紡衫","褲子","高更鞋","襪子"); 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; } 7、前端在showChart()方法中利用ajax調用該方法，返回option，設置到myCharts中即可 function showChart(){ myChart.clear(); myChart.showLoading({text:'正在努力加載。。。'}); $.ajax({ type : "GET", url : prefix + "/getOption", async : false, error : function(request) { $.modal.alertError("系統錯誤"); }, success : function(data) { if(data){ myChart.setOption(data); myChart.hideLoading(); }else{ alert("出錯"); } } }); } 8、關於圖表主題的指定可在官網下載喜歡的主題樣式文件即可，主題地址 http://echarts.baidu.com/download-theme.html 其使用方式如下： <script src="echarts.min.js"></script> <!-- 引入 vintage 主題 --> <script src="theme/vintage.js"></script> <script> // 第二個參數可以指定前面引入的主題 var chart = echarts.init(document.getElementById('main'), 'vintage'); chart.setOption({ ... }); </script> 自此以后台拼裝option渲染eCharts圖表的方式實現了。在后台想要結合真實的業務數據進行實現想必是很簡單的了 ———————————————— 版權聲明：本文為CSDN博主「Hotice888」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/Hotice888/article/details/105015861