创新实训（三）初版界面绘制以及可视化的实现

展示

界面思路

基本上是采用了顶栏、侧边栏、内容区三个部分的经典设计。背景加了图片。

可视化思路

可以看到主要分成以下几个部分：顶端是一个状态栏，分成初始化、训练模型、训练完成三个状态，再往下是三个按钮，单选框。然后就是一个表格，用来表示训练的轮次，以及相应的精确度展示，再往下是一个折线图。

折线图的实现

折线图使用的是第三方库echarts。
官网的介绍：一个基于 JavaScript 的开源可视化图表库。
官网：https://echarts.apache.org/handbook/zh/get-started/

echarts导入

npm install echarts --save

// 全局引入echarts组件用于绘制图表
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

折线图样式的修改

折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，具体的可以参考配置项手册 series.lineStyle 了解。这里，我们以设置颜色（color）、线宽（width）和折线类型（type）为例说明。
数据点的样式可以通过 series.itemStyle 指定填充颜色（color）、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）、不透明度（opacity）等。与折线样式的设置十分相似，这里不再展开说明。
在系列中，这数据点的标签通过 series.label 属性指定。如果将 label 下的 show 指定为true，则表示该数值默认时就显示；如果为 false，而 series.emphasis.label.show 为 true，则表示只有在鼠标移动到该数据时，才显示数值。
官网的实例：

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      lineStyle: {
        normal: {
          color: 'green',
          width: 4,
          type: 'dashed'
        }
      }
    }
  ]
};

示例二：

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 20
        }
      }
    }
  ]
};

数据动态绑定

基本的思路就是初始化引入图标，然后绑定好xy轴相应的数据，之后其会根据我们数据的变化动态的刷新展示。

为了数据变化时实时刷新表格，在监听到属性值发生改变时，重新渲染一次表格。
敲重点：echarts不会自动帮你渲染数据的，需要手动再次调用setOption函数。
再次敲重点，重点，重点：看到 this.myEcharts.setOption(this.option, true)这一行代码了吗？最后这个属性’true’真是nb坏了，没它不行。

上官方代码：setOption的函数定义，option是指图表的配置项和数据，notMerge是指是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根据新option 创建所有新组件。

这里参考了：https://blog.csdn.net/qq_41937069/article/details/117631059

我们主要的代码如下：

    // 根据训练情况改变图表
    chartChange() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(
          {
            // title: { text: "精确度" },
            tooltip: {},
            xAxis: {
              data: this.xdata,
              name: "epoch",
            },
            yAxis: {
              // scale: true,
              name: "accuracy",
              min:
                  Math.min(...this.ydata) - 0.1 >= 0
                      ? (Math.min(...this.ydata) - 0.1).toFixed(2)
                      : 0,
              max:
                  Math.max(...this.ydata) + 0.1 <= 1
                      ? (Math.max(...this.ydata) + 0.1).toFixed(2)
                      : 1,
              interval: 0.05,
            },
            series: [
              {
                name: "精确度",
                type: "line",
                data: this.ydata,
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: 15,
                  },
                },
              },
            ],
          },
          true
      );
    },