echart图表使用

2、接口编写

该部分代码定义了UserController控制器类，用于处理与用户相关的请求。包含一个用于跳转页面的方法和一个返回用户详细数据（以 JSON 格式呈现）的接口。前者负责将用户导航至指定页面，后者通过构建ChartVO对象并填充数据，为前端展示图表提供所需的数据支撑。

@Controller
@RequestMapping("/admin")
public class UserController {@RequestMapping("/index")public String toUserDetail() {return "admin/index";}// 返回 JSON 数据@GetMapping("/user/detail/getChartData")@ResponseBodypublic ChartVO getUserDetail() {ChartVO chartVO = new ChartVO();chartVO.setEasy(1);chartVO.setMedium(2);chartVO.setHard(3);chartVO.setXAxis(new String[]{"1", "2", "7", "4", "5", "6", "4", "8", "1", "10"});chartVO.setNums(new Integer[]{1, 2, 3, 4, 5, 6, 7, 8, 9, 10});chartVO.setYAxis4(new String[]{"1", "2", "7", "4", "5", "6"});chartVO.setType4(new Integer[]{1, 2, 3, 4, 5, 6});chartVO.setYAxis3(new String[]{"1", "2", "7", "4", "5", "6"});chartVO.setType3(new Integer[]{1, 2, 3, 4, 5, 6});return chartVO;}
}

3、引入echart组件

ECharts 是一款基于 JavaScript 的数据可视化图表库，通过模块化的加载方式适配不同的环境（如 CommonJS、AMD 或全局变量）。该代码片段通过自执行函数判断当前环境，将 ECharts 挂载到全局对象中，为后续在前端页面中使用 ECharts 渲染图表提供基础。


/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/(function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :typeof define === 'function' && define.amd ? define(['exports'], factory) :(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.echarts = {}));
}

4、前端页面代码

通过 Thymeleaf 模板引擎动态引入页面的头部导航、侧边栏和页脚等公共模块，并定义了多个用于渲染 ECharts 图表的容器（如#pie、#line、#echart3、#echart4）。这些容器将与后续 JavaScript 代码配合，展示从后端获取的数据可视化图表。

<div class="wrapper"><!-- 引入页面头header-fragment --><div th:replace="admin/common/commons::header-nav"></div><!-- 引入工具栏sidebar-fragment --><div th:replace="admin/common/commons::sidebar-fragment(${path})"></div><!-- Content Wrapper. Contains page content --><div class="content-wrapper"><!-- Main content --><div class="content"><div class="container-fluid"><div class="analyze"><div class="fd-content-wrap fd-flex-wrap"><div class="fd-left-wrap fd-sr-wrap"><div class="fd-inner-wrap"><div class="echart" id="pie"></div></div></div><div class="fd-right-wrap"><div class="fd-inner-wrap fd-zc-wrap"><div class="echart" id="line"></div></div></div></div><div class="fd-content-wrap fd-flex-wrap"><div class="fd-left-wrap"><div class="fd-inner-wrap"><div class="echart" id="echart3"></div></div></div><div class="fd-right-wrap"><div class="fd-inner-wrap fd-szqsfx-chart-wrap"><div class="echart" id="echart4"></div></div></div></div></div></div></div><!-- /.content --></div><!-- /.content-wrapper --><!-- 引入页脚footer-fragment --><div th:replace="admin/common/commons::footer-fragment"></div>
</div>

5、前端js代码

通过echarts.init()方法创建图表实例，结合从后端获取的数据，定义图表的标题、颜色、提示框、坐标轴、数据系列等参数，最终使用setOption()方法将配置应用到图表中，实现 “薄弱点” 和 “通过题目较多的类型” 等数据的可视化展示。

<script th:inline="javascript">var myEchart4 = echarts.init(document.getElementById('echart4'));myEchart4.title = '坐标轴刻度与标签对齐';option4 = {// 标题title: {text: '薄弱点'},color: ['#3398DB'],tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '3%',right: '3%',top: '18%',  // 调整顶部间距containLabel: true},// 交换X轴和Y轴的定义yAxis: [{type: 'category',  // Y轴现在显示类别data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {alignWithLabel: true}}],xAxis: [{type: 'value'  // X轴现在显示数值}],series: [{name: '直接访问',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220],itemStyle: {normal: {color: function(params) {var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#E87fff', 'E87fff'];// 若返回的list长度不足，不足部分自动显示为最后一个颜色return colorList[params.dataIndex]},label: {show: true,position: 'right'  // 标签显示在条形的右侧}}}}]};myEchart4.setOption(option4);var myChart = echarts.init(document.getElementById('echart3'));myChart.title = '坐标轴刻度与标签对齐';option = {// 标题title: {text: '通过题目较多的类型'},color: ['#3398DB'],tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '3%',right: '3%',top: '18%',  // 调整顶部间距containLabel: true},// 交换X轴和Y轴的定义yAxis: [{type: 'category',  // Y轴现在显示类别data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {alignWithLabel: true}}],xAxis: [{type: 'value'  // X轴现在显示数值}],series: [{name: '直接访问',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220],itemStyle: {normal: {color: function(params) {var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#E87fff', 'E87fff'];// 若返回的list长度不足，不足部分自动显示为最后一个颜色return colorList[params.dataIndex]},label: {show: true,position: 'right'  // 标签显示在条形的右侧}}}}]};myChart.setOption(option);</script>