NLog日志+富文本编辑器+图形化显示数据

本文主要是介绍NLog日志+富文本编辑器+图形化显示数据，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、NLog日志

    1、在要使用日志的地方点击NewGet管理包，从中下载NLog文件

    2、在要使用日志的API中创建一个config后缀文件，并复制粘贴

<?xml version="1.0" encoding="utf-8" ?>
<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 
    <targets>
        <target name="logfile" xsi:type="File" fileName="file.txt" />
        <target name="logconsole" xsi:type="Console" />
    </targets>
 
    <rules>
        <logger name="*" minlevel="Info" writeTo="logconsole" />
        <logger name="*" minlevel="Debug" writeTo="logfile" />
    </rules>
</nlog>

    3、在需要使用的地方进行实例化

private static readonly NLog.Logger Logger = NLog.LogManager.GetCurrentClassLogger();

    4、进行测试

public static class Program
{
    private static readonly NLog.Logger Logger = NLog.LogManager.GetCurrentClassLogger();
 
    public static void Main()
    {
        try
        {
           Logger.Info("Hello world");
           System.Console.ReadKey();
        }
        catch (Exception ex)
        {
           Logger.Error(ex, "Goodbye cruel world");
        }
    }
} 

二、富文本编辑器

    1、富文本编辑器有多种，这里指的是wangEditor

    2、使用npm i wangeditor --save 安装

    3、安装完成之后在main.js中

import E from 'wangeditor'
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()

    4、进行测试

<template>
  <div class="page">
    <div id="demo1"></div>
    <button type="button" class="btn" @click="getEditorData">获取当前内容</button>
  </div>
</template>
 
<script type="text/ecmascript-6">
// 引入 wangEditor
import wangEditor from 'wangeditor'
 
 
export default {
  data() {
    return {
      editor: null,
      editorData: ''
    }
  },
  mounted() {
    const editor = new wangEditor(`#demo1`)
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
       this.editorData = newHtml
    }
 
// 配置 server 接口地址
editor.config.uploadImgServer = '/upload-img'
 
    // 创建编辑器
    editor.create()
    this.editor = editor
  },
  methods: {
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
    }
  },
  components: {
 
  }
}
</script>
 
<style scoped>
   
</style>

三、折线图

    1、使用npm i v-charts echarts -S  安装 

    2、如果不能使用，请使用npm i v-charts echarts @4.9.0 -S 

    3、在main.js中全部引入

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'
 
Vue.use(VCharts)
 
new Vue({
  el: '#app',
  render: h => h(App)
})

   3、 例子

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
export default {
  components: { VeLine },
  data () {
    return {
      chartData: {
        columns: ['日期', '销售量'],
        rows: [
          { '日期': '1月1日', '销售量': 123 },
          { '日期': '1月2日', '销售量': 1223 },
          { '日期': '1月3日', '销售量': 2123 },
          { '日期': '1月4日', '销售量': 4123 },
          { '日期': '1月5日', '销售量': 3123 },
          { '日期': '1月6日', '销售量': 7123 }
        ]
      }
    }
  }
}
</script>

    4、效果

这篇关于NLog日志+富文本编辑器+图形化显示数据的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！