后端加前端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!

相关推荐
baiduopenmap几秒前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
小牛itbull12 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i20 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_23 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun29 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜32 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端