echarts 实时 vue 使用方法

感谢AI 的贡献

javascript 复制代码
<template>
  <div style="display: flex; justify-content: center;">
    <!-- 左侧折线图 -->
    <div ref="chartRef1" style="width: 45%; height: 400px; margin-right: 2%;"></div>
    <!-- 右侧折线图 -->
    <div ref="chartRef2" style="width: 45%; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ref, onMounted, reactive } from "vue";
import { pull_ics_coefficient} from "@/api/ics/index.js";
import axios from "axios";

export default {
  setup() {
    const chartRef1 = ref(null);
    const chartRef2 = ref(null);
    const chartInstance1 = ref(null);
    const chartInstance2 = ref(null);

    const chartData1 = reactive({
      xAxisData: [...Array(32).keys()],
      seriesData: [...Array(32).keys()],
    });

    const chartData2 = reactive({
      xAxisData: [...Array(32).keys()],
      seriesData: [...Array(32).keys()],
    });

    const initChart = () => {
      if (chartRef1.value && chartRef2.value) {
        chartInstance1.value = echarts.init(chartRef1.value);
        chartInstance2.value = echarts.init(chartRef2.value);

        updateChart1();
        updateChart2();
      }
    };
    const updateChart1 = () => {
      const options1 = {
        title: { text: "I 冲击效应" },
        xAxis: {
          min:0,
          max:31,
          type: "category",
          data: chartData1.xAxisData
        },
        yAxis: { type: "value" },
        series: [
          {
            data: chartData1.seriesData,
            type: "line",
            smooth: true,
          },
        ],
      };
      chartInstance1.value.setOption(options1);
    };
    const updateChart2 = () => {
      const options2 = {
        title: { text: "Q 冲击效应" },
        xAxis: {
          min:0,
          max:31,
          type: "category",
          data: chartData2.xAxisData
        },
        yAxis: { type: "value" },
        series: [
          {
            data: chartData2.seriesData,
            type: "line",
            smooth: true,
          },
        ],
      };
      chartInstance2.value.setOption(options2);
    };
    const simulateRealTimeData = () => {
      setInterval(() => {
        axios.post("/ics","req=1").then((res)=>{
          const result = res.data.split(',').map(Number);
          chartData1.seriesData = result.slice(0,32);
          updateChart1();
        }).catch(err=>{
          alert(err);
        });
        axios.post("/ics","req=2").then((res)=>{
          const result = res.data.split(',').map(Number);
          chartData2.seriesData = result.slice(0,32);
          updateChart2();
        }).catch(err=>{
          alert(err);
        });
      }, 2000);
    };
    onMounted(() => {
      initChart(); // 初始化图表
      simulateRealTimeData(); // 开始实时更新
    });
    return { chartRef1, chartRef2 };
  },
};
</script>

实话哈还是 typescript 更好些,写起来方便
AI 些 Rust 程序 一秒 8个错误 。。。。。。

actix_web

  1. ERP 程序本地需要一个小型的http server 用于管理程序的升级,和图片的显示和保存,以后也可以分开部署服务

AI 不靠谱,文档靠谱

先用python 模拟把前端搞完

本地客户端想拿到文件,RUST 内部方法 同步到httpserver路径下/或者远程路径下

解决的方法;不用跨域,也不用

https://juejin.cn/post/7221467185452843069
要不有前端的跨域的问题,原始的设计思想,后端决策都有Rust 处理

相关推荐
LuckyLay8 分钟前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu16827 分钟前
aksk前端签名实现
java·前端·javascript
烛阴33 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw038 分钟前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦1 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
南岸月明1 小时前
我与技术无缘,只想副业搞钱
前端
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky2 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin2 小时前
前端八股-promise
前端·javascript
星语卿2 小时前
浏览器重绘与重排
前端·浏览器