vue 利用echarts和mathlive实现三元方程函数展示

最新推荐文章于 2024-02-05 08:09:23 发布
最新推荐文章于 2024-02-05 08:09:23 发布
阅读量1.8k 收藏 2
点赞数 2
文章标签： vue.js echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53000350/article/details/122660326
版权

目录

1.引用mathlive

2.引用echarts

3.methods方法

4.代码展示

5.注意 

首先，我在网上搜了很久echart三维画图的资料没有找到也走了很多弯路，故在解决问题后在这里记录一下遇到的困难以及解决方式，极其不推荐这种纯前端实现方式，因为大量的计算会导致浏览器页面直接崩溃或者报错，这里仅展示z=x+y此计算量和结果最小的效果。

作者使用mathlive的本意是可以将复杂的数学表达式进行计算，后用echarts进行可视化，但由于js的数学表达式和后端语言的不同导致我们无法单纯从前端（也有可能有别的方法作者暂时没想到）进行复杂计算，故此方法只能配合后端进行使用，该博客只单纯提供思路以及记录。

1.引用mathlive

首先，我在这里就遇到了问题，按照官方npm安装的方法，我试了很多次无论是更改引用路径或是更改配置的方法都无法解决，于是上网查阅资料但在我的页面里都无法解决问题，于是我和舍友研究了一个多小时终于解决了问题，我在这里是这样引用的

import Vue from 'vue/dist/vue.min'
import * as MathLive from "../public/js/mathlive.min";

Vue.use(MathfiledComponent, MathLive);

注意，这里Vue的引用必须使用这种引用方式才能避免报错，但这样的引用引出了一个问题即是我安装的chrome Vue devtool直接罢工了，作者还未找到解决的方法

但事情还未结束！安装了路由的朋友要注意了！我这样改完以后发现页面直接渲染失败，于是新开了个项目尝试发现并没有什么错误，在我苦思冥想地毯式查看代码发现，作者在路由的index.js页面同样的引用了Vue但没有改为以上代码的引用方式，导致渲染失败！朋友们在这样引用时一定要注意其他Vue的引用保持一致！！！

2.引用echarts

这里根据官方文档npm安装，直接上引用代码

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

这里我又又又遇到了问题，我发现单单安装echarts并不能画三维的图片，控制器会报错 angular echarts Component series.line3D not exists. Load it first.作者之前从未用过echarts三维作图故有点懵，查阅资料得知我们还需安装echarts-gl来支持三维作图。于是作者再次傻傻的根据官方文档npm install echarts-gl 结果终端又报错（名字冲突，拒绝下载），这里我又去查阅资料，得到以下安装方式：

npm i  echarts-gl@1.1.0 -S

再次引用

import 'echarts-gl'

 结果这里页面的控制器又又又又又报错s.getLabelsCoords is not a function 

再再再查阅资料得知这里我们需要更新echarts-gl的版本来避免

（这里感谢这位来自github的朋友的解惑）

于是我们直接终端输入 

npm i  echarts-gl@1.1.1 -S

 终于解决问题！

3.methods方法

<script>
export default {
  methods: {
    e() {
      this.drawLine();
    },
    //将表达式化为点存入数组，这里点数太多会导致浏览器直接崩溃或报错
    generateData() {
      let data = [];
      let x,y
      for (let i = -200; i <= 200; i += 1) {
        for (let j = -200; j <= 200; j += 1) {
          x= i/10
          y= j/10
          let z = eval(this.formula);
          data.push([x,y,z])
        }
      }
      return data;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        backgroundColor: "#fff",
        visualMap: {
          show: false,
          dimension: 2,
          min: 100,
          max: -100,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
        },
        xAxis3D: {
          type: "value",
        },
        yAxis3D: {
          type: "value",
        },
        zAxis3D: {
          type: "value",
        },
        grid3D: {
          viewControl: {
            projection: "orthographic",
          },
        },
        series: [
          {
            type: "line3D",
            data: this.generateData(),
            lineStyle: {
              width: 4,
            },
          },
        ],
      });
    },
    //mathlive相关方法
    sayIt: function (event) {
      this.$refs.mathfield.perform(["speak", "all"]);
    },
    setIt: function (event) {
      this.formula = "x=-b\\pm \\frac {\\sqrt{b^2-4ac}}{2a}";
    },
    displayKeystroke: function (keystroke, _ev) {
      this.keystroke = keystroke;
      return true;
    },
    asSpokenText: function () {
      return this.$refs.mathfield
        ? this.$refs.mathfield.getValue("spoken")
        : "";
    },
  },
};
</script>

4.代码展示

<template>
  <div class="Paint3D-container">
    <div class="Paint3D-left">
      <h1>请输入你的三维表达式</h1>
      <mathlive-mathfield
        id="mf"
        ref="mathfiled"
        :options="{
          smartFence: false,
          virtualKeyboardMode: 'manual',
          virtualKeyboards: 'numeric symbols',
        }"
        :on-keystroke="displayKeystroke"
        @blur="e"
        v-model="formula"
        style="
          font-size: 32px;
          margin: 2em;
          padding: 8px;
          border-radius: 8px;
          border: 1px solid rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
          width: 100%;
          background: #fff;
        "
      >
      </mathlive-mathfield>
    </div>

    <div id="myChart" :style="{ width: '600px', height: '600px' }"></div>
  </div>
</template>

<script>
export default {
  name: "Paint3D",
  data() {
    return {
      //表达式
      formula: "",
      keystroke: "",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    e() {
      this.drawLine();
    },
    //将表达式化为点存入数组，这里点数太多会导致浏览器直接崩溃或报错
    generateData() {
      let data = [];
      let x,y
      for (let i = -200; i <= 200; i += 1) {
        for (let j = -200; j <= 200; j += 1) {
          x= i/10
          y= j/10
          let z = eval(this.formula);
          data.push([x,y,z])
        }
      }
      return data;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        backgroundColor: "#fff",
        visualMap: {
          show: false,
          dimension: 2,
          min: 100,
          max: -100,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
        },
        xAxis3D: {
          type: "value",
        },
        yAxis3D: {
          type: "value",
        },
        zAxis3D: {
          type: "value",
        },
        grid3D: {
          viewControl: {
            projection: "orthographic",
          },
        },
        series: [
          {
            type: "line3D",
            data: this.generateData(),
            lineStyle: {
              width: 4,
            },
          },
        ],
      });
    },
    //mathlive相关方法
    sayIt: function (event) {
      this.$refs.mathfield.perform(["speak", "all"]);
    },
    setIt: function (event) {
      this.formula = "x=-b\\pm \\frac {\\sqrt{b^2-4ac}}{2a}";
    },
    displayKeystroke: function (keystroke, _ev) {
      this.keystroke = keystroke;
      return true;
    },
    asSpokenText: function () {
      return this.$refs.mathfield
        ? this.$refs.mathfield.getValue("spoken")
        : "";
    },
  },
};
</script>

 

<style lang='less' scoped>
math-field:focus-within {
  outline: 1px solid rgba(64, 158, 255);
  border-radius: 8px;
}
.Paint3D-container {
  background: #e6e6e6;
  .Paint3D-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vh;
  }
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
  #myChart {
    margin: 60px 0px 0px 0px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  }
}
</style>

5.注意 

作者使用mathlive的本意是可以将复杂的数学表达式进行计算，后用echarts进行可视化，但由于js的数学表达式和后端语言的不同导致我们无法单纯从前端（也有可能有别的方法作者暂时没想到）进行复杂计算，故此方法只能配合后端进行使用，该博客只单纯提供思路以及记录与反思。

牛爷爷打电话
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
VaTex:vue latex的一个插件（基于katex），支持vue2和vue3
08-05
增值税 vue latex 公式显示插件，适用于 Vue2/Vue3。 简单封装katex。 也是的vue3版本，参考了很多代码，在此感谢。 安装 安装 vue-katex 与 katex 作为对等依赖 # With NPM npm i vatex katex # With Yarn yarn add vatex katex Vue2 开发者需要安装 composition-api yarn add @vue/composition-api 入门 Vue3 全球注册 import { createApp } from 'vue' import VueLatex from 'vatex' app . use ( VueLatex ) . mount ( '#app' ) 然后 < vue-latex : expression = " ' \\ frac{a_i}{1+x}
在线数学公式编辑器插件
03-12
在线数学公式编辑器插件 web在线 js 数学公式 特殊符号
django-mathfield:用于编写和显示 LaTeX 的 Django 模型字段
07-12
django-mathfield MathField 是 Django 的模型字段，它允许您输入 LaTeX 并将编译后的 HTML 存储在您的数据库中。 它带有一个供 Django 管理员使用的表单，可提供渲染的 LaTeX 的实时预览。 安装和设置 您的服务器需要有和 。 安装它： $ pip install django-mathfield 将'mathfield'添加到 Django 项目settings.py INSTALLED_APPS中。 将MathField添加到您的模型之一，如下所示： from django . db import models import mathfield class Lesson ( models . Model ): lesson_plan = mathfield . MathField () 在admin.py注册模型时
MathLive是一个用于渲染和编辑数学公式的Javascript库.zip
09-17
MathLive是一个用于渲染和编辑数学公式的Javascript库 ,mathlive是一个JavaScript库来渲染和编辑数学。 它速度快，体积小，并提供了一个易...
mathlive在vue中使用
徐同保的专栏
06-23 1198
mathlive在vue中使用
vue-mathlive:将Vue包装器用于MathLive数学编辑器的示例
05-12
MathLive Vue包装器提供了一个Vue组件，该组件实现了<mathlive> HTML标签。 该组件可用于使用MathLive库编辑公式。 该编辑器提供了丰富，可访问的编辑UI，包括用于移动设备的虚拟键盘，并且可以将输出提供为LaTeX，MathML或语音文本。 入门 MathLive库必须单独加载。 这提供了选择包装程序要使用的库的特定版本的选项。 接下来，应该导入包装器，然后使用Vue.use()将两者连接起来 注意：此存储库仅包含样本。 Vue包装器与主MathLive库打包在一起。 警告：如果在实例化mathfield组件时收到运行时错误，并且在控制台中从Vue发出警告“您正在使用仅运行时的Vue版本...”，请确保将runtimeCompiler: true添加到您的Vue配置中。 < script type =" module " > im
Vue + MathLive 实现数学公式可编辑
君之虞
11-12 6246
Vue + MathLive 实现数学公式可编辑 效果图 一.环境 webpack cli4.0 html2canvas 插件 二.配置 在index.html 下 引用 mathlive js <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
mathlive：一个易于数学输入的Web组件
02-06
MathLive：用于数学输入的Web组件 易于使用的Web组件，无论使用什么框架（甚至不使用框架），都可以轻松集成到项目中 精美，TeX品质的排版 易于使用的界面，用于公式编辑 专为带有大量虚拟键盘的移动设备设计 辅助功能支持：与屏幕阅读器兼容，并包括自定义的数学到语音支持 输出LaTeX ， MathML和MathJSON （抽象语法树） 而且很容易根据您的需求进行定制！ 有关更多信息，请参见或在尝试 使用MathLive 编辑数学 要在页面中添加mathfield元素，请使用<math-field>标记。 它就像<textarea>或<button> 。 您可以使用元素的
vue 三元表达式
x_nweBorder01k的博客
03-02 1189
<div :class="loginLocation == 'left'?'login-form-left':loginLocation == 'middle'?'login-form':'login-form-right'">
vue引入Echarts画折线图、平滑曲线图、转化数学公式详解
weixin_70032683的博客
10-04 2150
vue引入Echarts画折线图、平滑曲线图、转化数学公式详解
MathLive是一个用于渲染和编辑数学公式的Javascript库
08-08
MathLive是一个用于渲染和编辑数学公式的Javascript库
基于Vue和Echarts的员工数据大屏展示设计源码
最新发布
04-06
本项目是一个基于Vue和Echarts的员工数据大屏展示项目，包含74个文件，主要文件类型包括Vue组件、JavaScript脚本、图片、XML配置文件、Git忽略文件、JSON配置文件、Idea配置文件、Babel配置文件和编辑器配置文件。...
vue利用echarts简单实现具有中心节点的知识图谱代码
08-02
vue利用echarts简单实现具有中心节点的知识图谱，其中边缘节点可拖动，其大小可以根据传入的值而变化
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
基于vue+echarts 数据可视化大屏展示的方法示例
10-15
主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue、 echarts、iview 实现大数据可视化大屏模板.zip
06-10
vue、 echarts、iview 实现大数据可视化大屏模板.zip
一些可以参考的文档集合4
xuejianxinokok的专栏
04-19 931
20220419 Redis是怎样通讯的？_redis_ooooooh灰灰_InfoQ写作平台模型Redis 协议模型就是简单的请求-响应模型，和平常的 Http 协议有点类似。客户端发送 Redis 命令，然后服务端处理命令并返回结果给客户端。Redis 官方说这可能是最简单的网络协议模型了https://xie.infoq.cn/article/0496d06df156ad6a9ff365d08MySQL 是怎样通讯的？_Go_ooooooh灰灰_InfoQ写作平台前言我们平常使用数据库的场景一般是程
基于mathlive将数学公式编辑器集成到可视化搭建平台
趣谈前端
02-05 841
hi, 大家好, 我是徐小夕. 上篇文章和大家分享了刚开发完的可视化搭建产品——橙子试卷. 收到了很多用户的反馈和建议, 其中有一个建议我觉得非常有意思, 所以花了一天时间研究和实现了这个用户需求.具体需求如下:对于高等数学类课程的试卷, 能不能实现编辑数学公式的功能呢?经过了一系列的调研和可行性分析, 我觉得这个需求非常有价值, 而且应用面很广, 技术上从 web 的角度也是可以实现的, 所以我...
mathjax 入门（web显示数学公式，矢量的）
徐同保的专栏
06-23 828
mathjax 入门（web显示数学公式，矢量的）
vue和echarts实现大屏的浏览器全屏展示功能
09-05
Vue 是一种基于 JavaScript 的前端框架，用于构建用户界面。ECharts 是百度团队开发的一款基于 JavaScript 的数据可视化库，用于创建各种图表和大屏展示。 要实现大屏展示的浏览器全屏功能，可以结合 Vue 和 ECharts 来实现。下面介绍一种简单的实现方法。 首先，需要在 Vue 项目中引入 ECharts 库。可以通过 npm 或者直接下载 ECharts 的 JavaScript 文件，并在项目中引入。 接下来，在 Vue 组件中，使用 ECharts 创建需要展示的图表。可以通过配置项来定义图表的类型、样式、数据等。 然后，在 Vue 组件中使用全屏展示的功能。可以通过监听窗口大小变化的事件，在窗口大小变化时重新调整图表的大小以适应全屏展示。可以使用 Vue 的生命周期钩子函数或者添加事件监听器来实现。 具体实现方法可以参考以下步骤： 1. 在 Vue 组件的 template 中添加一个 div 用于放置图表，并为该 div 添加一个唯一的 id。 2. 在 Vue 组件的 created 钩子函数（或其他适当的生命周期钩子函数）中，使用 ECharts 的 API 创建图表，并将图表放置在步骤 1 中的 div 中。 3. 使用 Vue 的 mounted 钩子函数（或其他适当的生命周期钩子函数）来添加窗口大小变化的事件监听器。当窗口大小变化时，调用 ECharts 的 API 调整图表的大小。 4. 在 Vue 组件的 destroyed 钩子函数中，移除窗口大小变化的事件监听器，以避免内存泄漏和其他问题。 通过以上步骤，就可以实现基于 Vue 和 ECharts 的浏览器全屏展示功能。当浏览器窗口大小变化时，图表会自动调整大小以适应全屏展示。这样可以提升用户体验，使得大屏展示更加美观和实用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值