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 处理

相关推荐
向阳2564 分钟前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
hepherd8 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI8 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见9 分钟前
浅拷贝与深拷贝
前端
艾克马斯奎普特10 分钟前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~14 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪14 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡16 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克17 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
奇怪的知识又增长了26 分钟前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端