后端加前端Echarts画图示例全流程(折线图,饼图,柱状图)

本文将带领读者通过一个完整的Echarts画图示例项目,演示如何结合后端技术(使用Spring Boot框架)和前端技术(使用Vue.js或React框架)来实现数据可视化。我们将实现折线图、饼图和柱状图三种常见的数据展示方式,通过具体的代码和步骤让读者掌握从零开始搭建项目到展示图表的全过程。

开发环境

后端

SpringBoot 2.6.13

Mybatis-Plus 3.4.3

前端

原生JavaScript

前期准备

数据库创建语句

sql 复制代码
CREATE TABLE sales_data (
    id INT AUTO_INCREMENT PRIMARY KEY,
    month VARCHAR(7) NOT NULL,
    amount DECIMAL(10, 2) NOT NULL
);

具体实现

实体类

java 复制代码
@Data
@TableName("sales_data")
public class SalesRecord {
    
    @TableId(type = IdType.AUTO)
    private Long id;
    
    private String month;
    
    private Double amount;
}

Mapper层

java 复制代码
@Mapper
public interface SalesRecordMapper extends BaseMapper<SalesRecord> {
    // 自定义查询方法,根据月份范围查询销售记录
    @Select("SELECT * FROM sales_data WHERE month BETWEEN #{startMonth} AND #{endMonth}")
    List<SalesRecord> findByMonthBetween(@Param("startMonth") String startMonth, @Param("endMonth") String endMonth);
}

Service层

java 复制代码
public interface SalesRecordService {
    List<SalesRecord> getAllSalesRecords();
    List<SalesRecord> getSalesRecordsByMonthRange(String startMonth, String endMonth);
}

Impl层

java 复制代码
@Service
public class SalesRecordServiceImpl extends ServiceImpl<SalesRecordMapper, SalesRecord> implements SalesRecordService {

    @Resource
    private SalesRecordMapper salesRecordMapper;

    @Override
    public List<SalesRecord> getAllSalesRecords() {
        return list();
    }

    @Override
    public List<SalesRecord> getSalesRecordsByMonthRange(String startMonth, String endMonth) {
        // 实现根据月份范围查询的逻辑,使用 repository 或者自定义 SQL 查询数据库
        return salesRecordMapper.findByMonthBetween(startMonth, endMonth);
    }
}

Controller层

java 复制代码
@RestController
@RequestMapping("/api/sales")
public class SalesRecordController {

    private final SalesRecordService salesRecordService;

    @Autowired
    public SalesRecordController(SalesRecordService salesRecordService) {
        this.salesRecordService = salesRecordService;
    }

    @GetMapping("/records")
    public List<SalesRecord> getAllSalesRecords() {
        return salesRecordService.getAllSalesRecords();
    }

    @GetMapping("/recordsByMonthRange")
    public List<SalesRecord> getSalesRecordsByMonthRange(
            @RequestParam("startMonth") String startMonth,
            @RequestParam("endMonth") String endMonth) {
        return salesRecordService.getSalesRecordsByMonthRange(startMonth, endMonth);
    }

}

前端页面

创建路径:src/main/resources/static/sales_bar_chart.html

柱形图(包含按照日期分页)

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sales Data Visualization</title>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <!-- 引入 jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- 时间范围选择表单 -->
<label for="startMonth">开始月份:</label>
<input type="month" id="startMonth" name="startMonth">
<label for="endMonth">结束月份:</label>
<input type="month" id="endMonth" name="endMonth">
<button onclick="updateChart()">更新图表</button>

<!-- 图表展示 -->
<div id="chart" style="width: 800px; height: 600px;"></div>

<script>
  // 初始化页面时渲染默认图表
  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

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sales Data Pie Chart</title>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个具有一定尺寸的 div,用于渲染图表 -->
<div id="pieChart" style="width: 600px; height: 400px;"></div>

<script>
  // 使用 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

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sales Data Line Chart</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- 定义一个具有一定尺寸的 div,用于渲染图表 -->
<div id="lineChart" style="width: 800px; height: 600px;"></div>

<script>
    // 使用 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!

相关推荐
阿伟来咯~16 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端21 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱24 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai33 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨34 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js