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

相关推荐
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇4 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk5 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务