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

相关推荐
mCell16 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip16 小时前
Node.js 子进程:child_process
前端·javascript
excel19 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel20 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript