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

相关推荐
码哥DFS几秒前
Flex布局原理
前端·css·css3
小样还想跑17 分钟前
axios无感刷新token
前端·javascript·vue.js
Java水解26 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户3802258598241 小时前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
时间会给答案scidag1 小时前
报错 400 和405解决方案
vue.js·spring boot
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
白杨木影子被拉长1 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
山有木兮木有枝_1 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子1 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序