做网站可以用微软雅黑字体么,扬中网站建设开发,做建材交易网站的上市公司,长沙seo技术培训本文将带领读者通过一个完整的Echarts画图示例项目#xff0c;演示如何结合后端技术#xff08;使用Spring Boot框架#xff09;和前端技术#xff08;使用Vue.js或React框架#xff09;来实现数据可视化。我们将实现折线图、饼图和柱状图三种常见的数据展示方式#xff… 本文将带领读者通过一个完整的Echarts画图示例项目演示如何结合后端技术使用Spring Boot框架和前端技术使用Vue.js或React框架来实现数据可视化。我们将实现折线图、饼图和柱状图三种常见的数据展示方式通过具体的代码和步骤让读者掌握从零开始搭建项目到展示图表的全过程。 开发环境
后端
SpringBoot 2.6.13
Mybatis-Plus 3.4.3
前端
原生JavaScript
前期准备
数据库创建语句
CREATE TABLE sales_data (id INT AUTO_INCREMENT PRIMARY KEY,month VARCHAR(7) NOT NULL,amount DECIMAL(10, 2) NOT NULL
);具体实现
实体类
Data
TableName(sales_data)
public class SalesRecord {TableId(type IdType.AUTO)private Long id;private String month;private Double amount;
}
Mapper层
Mapper
public interface SalesRecordMapper extends BaseMapperSalesRecord {// 自定义查询方法根据月份范围查询销售记录Select(SELECT * FROM sales_data WHERE month BETWEEN #{startMonth} AND #{endMonth})ListSalesRecord findByMonthBetween(Param(startMonth) String startMonth, Param(endMonth) String endMonth);
}
Service层
public interface SalesRecordService {ListSalesRecord getAllSalesRecords();ListSalesRecord getSalesRecordsByMonthRange(String startMonth, String endMonth);
}Impl层
Service
public class SalesRecordServiceImpl extends ServiceImplSalesRecordMapper, SalesRecord implements SalesRecordService {Resourceprivate SalesRecordMapper salesRecordMapper;Overridepublic ListSalesRecord getAllSalesRecords() {return list();}Overridepublic ListSalesRecord getSalesRecordsByMonthRange(String startMonth, String endMonth) {// 实现根据月份范围查询的逻辑使用 repository 或者自定义 SQL 查询数据库return salesRecordMapper.findByMonthBetween(startMonth, endMonth);}
}
Controller层
RestController
RequestMapping(/api/sales)
public class SalesRecordController {private final SalesRecordService salesRecordService;Autowiredpublic SalesRecordController(SalesRecordService salesRecordService) {this.salesRecordService salesRecordService;}GetMapping(/records)public ListSalesRecord getAllSalesRecords() {return salesRecordService.getAllSalesRecords();}GetMapping(/recordsByMonthRange)public ListSalesRecord getSalesRecordsByMonthRange(RequestParam(startMonth) String startMonth,RequestParam(endMonth) String endMonth) {return salesRecordService.getSalesRecordsByMonthRange(startMonth, endMonth);}}
前端页面
创建路径src/main/resources/static/sales_bar_chart.html
柱形图包含按照日期分页
!DOCTYPE html
html langen
headmeta charsetUTF-8titleSales Data Visualization/title!-- 引入 ECharts --script srchttps://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js/script!-- 引入 jQuery --script srchttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js/script
/head
body
!-- 时间范围选择表单 --
label forstartMonth开始月份/label
input typemonth idstartMonth namestartMonth
label forendMonth结束月份/label
input typemonth idendMonth nameendMonth
button onclickupdateChart()更新图表/button!-- 图表展示 --
div idchart stylewidth: 800px; height: 600px;/divscript// 初始化页面时渲染默认图表renderDefaultChart();// 渲染默认图表function renderDefaultChart() {var xhr new XMLHttpRequest();xhr.open(GET, http://localhost:8099/api/sales/records);xhr.onload function () {if (xhr.status 200) {var salesData JSON.parse(xhr.responseText);renderChart(salesData);} else {console.error(Failed to fetch sales data:, xhr.statusText);}};xhr.onerror function () {console.error(Request failed.);};xhr.send();}// 更新图表函数根据用户选择的时间范围发送请求function updateChart() {var startMonth document.getElementById(startMonth).value;var endMonth document.getElementById(endMonth).value;var xhr new XMLHttpRequest();xhr.open(GET, http://localhost:8099/api/sales/recordsByMonthRange?startMonth${startMonth}endMonth${endMonth});xhr.onload function () {if (xhr.status 200) {var salesData JSON.parse(xhr.responseText);renderChart(salesData);} else {console.error(Failed to fetch sales data:, xhr.statusText);}};xhr.onerror function () {console.error(Request failed.);};xhr.send();}// 渲染 ECharts 图表function renderChart(data) {var chart echarts.init(document.getElementById(chart));var months data.map(function (item) {return item.month;});var amounts data.map(function (item) {return item.amount;});var option {title: {text: Monthly Sales Amount},tooltip: {},xAxis: {data: months},yAxis: {},series: [{name: Sales Amount,type: bar,data: amounts}]};chart.setOption(option);}
/script
/body
/html饼图
创建路径src/main/resources/static/pie-chart-ajax.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleSales Data Pie Chart/title!-- 引入 ECharts --script srchttps://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js/script
/head
body
!-- 定义一个具有一定尺寸的 div用于渲染图表 --
div idpieChart stylewidth: 600px; height: 400px;/divscript// 使用 AJAX 请求后端数据var xhr new XMLHttpRequest();xhr.open(GET, http://localhost:8099/api/sales/records); // 修改为实际的后端 API 路径xhr.onload function () {if (xhr.status 200) {var salesData JSON.parse(xhr.responseText);renderPieChart(salesData);} else {console.error(Failed to fetch sales data:, xhr.statusText);}};xhr.onerror function () {console.error(Request failed.);};xhr.send();// 渲染 ECharts 饼图function renderPieChart(data) {var pieChart echarts.init(document.getElementById(pieChart));// 构建饼图所需的数据格式var pieData data.map(function(item) {return {name: item.month,value: item.amount};});// 配置饼图的选项var option {title: {text: 销售数据分布},tooltip: {trigger: item,formatter: {a} br/{b} : {c} ({d}%)},legend: {orient: vertical,left: left,data: data.map(function(item) { return item.month; }) // 设置图例数据},series: [{name: 销售数据,type: pie,radius: 55%,center: [50%, 60%],data: pieData // 使用从后端获取的数据}]};// 使用配置项设置图表pieChart.setOption(option);}
/script
/body
/html折线图
创建路径src/main/resources/static/sales_long_chart.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleSales Data Line Chart/title!-- 引入 ECharts --script srchttps://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js/script!-- 引入 jQuery --script srchttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js/script
/head
body
!-- 定义一个具有一定尺寸的 div用于渲染图表 --
div idlineChart stylewidth: 800px; height: 600px;/divscript// 使用 AJAX 请求后端数据var xhr new XMLHttpRequest();xhr.open(GET, http://localhost:8099/api/sales/records); // 修改为实际的后端 API 路径xhr.onload function () {if (xhr.status 200) {var salesData JSON.parse(xhr.responseText);renderLineChart(salesData);} else {console.error(Failed to fetch sales data:, xhr.statusText);}};xhr.onerror function () {console.error(Request failed.);};xhr.send();// 渲染 ECharts 折线图function renderLineChart(data) {var lineChart echarts.init(document.getElementById(lineChart));// 构建折线图所需的数据格式var xAxisData data.map(function(item) {return item.month;});var seriesData data.map(function(item) {return item.amount;});// 配置折线图的选项var option {title: {text: 销售数据趋势},tooltip: {trigger: axis,formatter: {a} br/{b} : {c}},xAxis: {type: category,data: xAxisData // 设置 X 轴数据},yAxis: {type: value},series: [{name: 销售额,type: line,data: seriesData // 设置折线图数据}]};// 使用配置项设置图表lineChart.setOption(option);}
/script
/body
/html希望本文对你有所帮助。如果你有任何疑问或建议欢迎在评论区留言讨论。Happy coding!
