第八次课-echarts图表统计-乐观锁

echarts图表统计

简介

ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

官方网站：https://echarts.apache.org/handbook/zh/get-started/

特别注意：不能在created里使用。要在页面渲染成功后使用，也就是在mounted中可以用

使用教程

先安装

npm install echarts --save

<template>
<div id="main" style="width: 400px;height: 300px" ></div>
</template>

<script>

import * as echarts from 'echarts';
export default {
    data(){
        return{}
    },
    methods:{
        

    },
    mounted(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
            }
        ]
        };

        option && myChart.setOption(option);
      
    }
}

</script>

<style>

</style>

建议：可以统计每个讲师的视频播放量总和的柱状图，直观地展示出哪个老师更受欢迎

核心sql语句

SELECT

 t.`name`,
 SUM(v.play_count) as total
 FROM edu_video v

LEFT JOIN edu_course c on c.id=v.course_id
LEFT JOIN edu_teacher t on c.teacher_id=t.id

GROUP BY   c.teacher_id

Java核心代码

public EchartsDto groupByTeacher() {

        EchartsDto echartsDto= new EchartsDto();
        echartsDto.setTeacherName(new ArrayList<>());
        echartsDto.setPlayCount(new ArrayList<>());

        List<Eacharts> list =videoMapper.groupByTeacher();
        list.stream().map(
                m ->{
                    echartsDto.getTeacherName().add( m.getName());
                    echartsDto.getPlayCount().add( m.getTotal());
                    return m;
                }
        ).collect(Collectors.toList());


        return echartsDto;
    }

前端要的一个横坐标的数组，一个是纵坐标的数组

@Data
public class EchartsDto {

    List<String> teacherName;
    List<Long> playCount;
}

乐观锁

参考文章：https://blog.csdn.net/qq_34337272/article/details/81072874

版本号机制

一般是在数据表中加上一个数据版本号 version 字段，表示数据被修改的次数。当数据被修改时，version 值会加一。当线程 A 要更新数据值时，在读取数据的同时也会读取 version 值，在提交更新时，若刚才读取到的 version 值为当前数据库中的 version 值相等时才更新，否则重试更新操作，直到更新成功。

举一个简单的例子 ：假设数据库中帐户信息表中有一个 version 字段，当前值为 1 ；而当前帐户余额字段（ balance ）为 $100 。

操作员 A 此时将其读出（ version=1 ），并从其帐户余额中扣除 $50（ $100-$50 ）。

在操作员 A 操作的过程中，操作员 B 也读入此用户信息（ version=1 ），并从其帐户余额中扣除 $20 （ $100-$20 ）。

操作员 A 完成了修改工作，将数据版本号（ version=1 ），连同帐户扣除后余额（ balance=$50 ），提交至数据库更新，此时由于提交数据版本等于数据库记录当前版本，数据被更新，数据库记录 version 更新为 2 。

操作员 B 完成了操作，也将版本号（ version=1 ）试图向数据库提交数据（ balance=$80 ），但此时比对数据库记录版本时发现，操作员 B 提交的数据版本号为 1 ，数据库记录当前版本也为 2 ，不满足 “ 提交版本必须等于当前版本才能执行更新 “ 的乐观锁策略，因此，操作员 B 的提交被驳回。

这样就避免了操作员 B 用基于 version=1 的旧数据修改的结果覆盖操作员 A 的操作结果的可能。

库存 100

张三 100+1 =101 upadte version =1 2

0 101

李四 100+1=101

1 2

mybatisPlus如何使用乐观锁

MyBatis Plus 提供了一些方便的注解和方法来简化开发。你需要在实体类中使用 @Version 注解标记版本号字段，并在更新操作时 MyBatis Plus 会自动处理乐观锁机制。

下面是一个简单的示例：

假设你有一个实体类 DataEntity：

javaCopy Codeimport com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.Version;

@TableName("data")
public class DataEntity {
    @TableId
    private Long id;

    private String name;

    @Version
    private Integer version; // 版本号字段

    // 省略其他字段、构造方法和 getter/setter 方法
}

接下来，你的 Mapper 接口应该继承自 MyBatis Plus 提供的 BaseMapper 接口，它提供了许多常用的数据库操作方法，并支持乐观锁。

javaCopy Codeimport com.baomidou.mybatisplus.core.mapper.BaseMapper;

public interface DataMapper extends BaseMapper<DataEntity> {
}

在 Service 层中，你可以使用 MyBatis Plus 提供的 updateById 方法来更新数据。这个方法会自动处理乐观锁，如果更新失败（版本号不匹配），会抛出 OptimisticLockingException 异常。

javaCopy Codeimport org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
public class DataService {
    @Autowired
    private DataMapper dataMapper;

    @Transactional
    public void updateData(Long id, String newName) {
        DataEntity data = dataMapper.selectById(id);
        if (data != null) {
            // 模拟其他线程修改数据
            try {
                Thread.sleep(1000); // 假设其他线程需要一段时间才能完成修改
            } catch (InterruptedException e) {
                e.printStackTrace();
            }

            data.setName(newName);
            dataMapper.updateById(data); // 自动处理乐观锁
        } else {
            throw new RuntimeException("Data not found with id: " + id);
        }
    }
}

在这个示例中，updateData 方法通过 updateById 方法更新数据，MyBatis Plus 会自动处理乐观锁。如果在更新时版本号不匹配，则会抛出 OptimisticLockingException 异常。