# vue+echarts+springboot

**Repository Path**: qishang777/vue-echarts-springboot

## Basic Information

- **Project Name**: vue+echarts+springboot
- **Description**: vue+echarts+springboot数据可视化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2022-03-20
- **Last Updated**: 2022-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue+echarts+springboot

#### 介绍
vue+echarts+springboot数据可视化

#### 软件架构
软件架构说明

vue2.0+springboot+echarts+mysqlc

所有数据均为模拟数据，从mysql查询


#### 安装教程

1.  npm run install
2.  npm  run serve
3.  后端运行在8001端口

### 封装组件渲染图表

所有的 ECharts 图表都是基于 `components/chart/charts.vue` 封装组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小

```vue
<template>
  <div>
    <div ref="chart" :style="style"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "ChartsCharts",
  props: {
    option: {
      type: Object,
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "22vh",
    },
  },
  data() {
    return {
      Myecharts: null,
    };
  },
  computed: {
    style() {
      return {
        width: this.width,
        height: this.height,
      };
    },
  },
  mounted() {
    var Myecharts = echarts.init(this.$refs.chart);
    this.Myecharts = Myecharts;
    Myecharts.setOption(this.option)
    window.addEventListener("resize", function () {//随窗口大小改变
      Myecharts.resize();
    });
  },
  methods: {},
  watch: {
    option: {
      deep: true,
      handler(newOption) {
        this.Myecharts.setOption(newOption);
      },
    },
  },
};
</script>
<style lang="less" scoped>
</style>
```

### 屏幕适配

使用vw和vh实现屏幕自适应

```scss
//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math"; 
 
//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;
 
//px转为vw的函数
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}
//px转为vh的函数
@function vh($px) {  
  @return math.div($px , $designHeight) * 100vh;
}
```

### 请求数据

基于vuex+websocket实现数据传输，组件之间数据互不影响通过watch监听vuex数据实时的变化进行数据更新

```vue
<template>
  <div>
    <charts :option="option"></charts>
  </div>
</template>

<script>
import charts from "./charts.vue";
import { mapState } from "vuex";
export default {
  components: { charts },
  name: "ChartLeftPie",
  data() {
    return {
      option: {},
    };
  },
  mounted() {
    this.updateChart();
  },
  watch: {
    LeftPie: {
      deep: true,
      handler(a, b) {
        this.updateChart();
      },
    },
  },
  computed: {
    ...mapState({ LeftPie: "LeftPie" }),
  },
  methods: {
    updateChart() {
      const option = {
        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          bottom: "0%",
          // 修改小图标的大小
          itemWidth: 10,
          itemHeight: 10,
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "年龄分布",
            type: "pie",
            // 这个radius可以修改饼形图的大小
            // radius 第一个值是内圆的半径 第二个值是外圆的半径
            radius: ["40%", "60%"],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            // 图形上的文字
            label: {
              show: false,
              position: "center",
            },
            // 链接文字和图形的线是否显示
            labelLine: {
              show: false,
            },
            data: this.LeftPie,
          },
        ],
      };
      this.option = option;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
```

### 后端数据websocket配置

通过sendMessageSercice把多个Sercice整合在一起，使用定时time类5秒查询一次数据库，

```java
@Slf4j
@Component
@ServerEndpoint(value = "/websocket/{id}",encoders = {ServerEncoder.class})
public class WebSocketServer{
    //在线连接数,应该把它设计成线程安全的
    private static int onlineCount = 0;
    @Autowired
    private static SendMessageSercice sendMessageSercice;
    @Autowired
    public void setSendMessageSercice(SendMessageSercice sendMessageSercice){
        this.sendMessageSercice = sendMessageSercice;
    }
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    //虽然@Component默认是单例模式的，但springboot还是会为每个websocket连接初始化一个bean，所以可以用一个静态set保存起来。
    public static CopyOnWriteArraySet<WebSocketServer> webSocketSet
            = new CopyOnWriteArraySet<>();
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    //会话窗口的ID标识
    private String id = "";

    /**
     * 链接成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("id") String id) {
        log.info("onOpen >> 链接成功");
        this.session = session;
        //将当前websocket对象存入到Set集合中
        webSocketSet.add(this);
        //在线人数+1
        addOnlineCount();
        log.info("有新窗口开始监听：" + id + ", 当前在线人数为：" + getOnlineCount());
        this.id = id;
//        sendMessageSercice = applicationContext.getBean(SendMessageSercice.class);
        try {
//            sendMessage("有新窗口开始监听：" + id + ", 当前在线人数为：" + getOnlineCount());
            sendMessageSercice.sendDataToWeb();
        } catch (Exception e) {
            log.error(e.toString());
        }


    }
    /**
     * 链接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        log.info("onClose >> 链接关闭");
        //移除当前Websocket对象
        webSocketSet.remove(this);
        //在内线人数-1
        subOnLineCount();
        log.info("链接关闭，当前在线人数：" + getOnlineCount());
    }
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message
     * @param session
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("接收到窗口：" + id + " 的信息：" + message);

        //发送信息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage("接收到窗口：" + id + " 的信息：" + message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    @OnError
    public void onError(Session session, Throwable e) {
        e.printStackTrace();
    }
    /**
     * 推送消息
     *
     * @param message
     */
    private  void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
    private void sendObject(Object object) throws IOException, EncodeException {
        this.session.getBasicRemote().sendObject(object);
    }
//　*　id为null时是群发
//     * @param map
//     * @param id
//     */
    public static void sendData(String id, Object map) {
        for (WebSocketServer item : webSocketSet) {
            try {
                if (id == null) {
                    item.sendObject(map);
                } else if (item.id.equals(id)) {
                    item.sendObject(map);
                }
            } catch (Exception e) {
                e.printStackTrace();
                continue;
            }
        }
    }
    private void subOnLineCount() {
        WebSocketServer.onlineCount--;
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    private void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }

}

```