您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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

目录

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的数学表达式和后端语言的不同导致我们无法单纯从前端(也有可能有别的方法作者暂时没想到)进行复杂计算,故此方法只能配合后端进行使用,该博客只单纯提供思路以及记录与反思。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进