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

2021-09-14 22:37:06 阅读：191 来源： 互联网

标签：文本编辑销售量日期 NLog editor import Logger 图形化

一、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,editor,import,Logger,图形化
来源： https://www.cnblogs.com/sjt9/p/15269939.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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