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>

然后再要使用的地方实例化

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

　　最后测试一下并查看就OK了

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");
        }
    }
}  

二、富文本编辑器

• 富文本编辑器有多种，这里指的是wangEditor
• 使用npm i wangeditor --save 安装
• 安装完成之后在main.js中

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

　　最后测试一下

<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>

三、折线图

• 使用npm i v-charts echarts -S  安装
• 在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)
})

• 　　示例

<template>
  <div>
    <ve-line :data="chartData1"
             width="500"></ve-line>
    <ve-hist :data="chartData2"
             width="500"></ve-hist>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
import VeHist from 'v-charts/lib/histogram.common'

export default {
  data() {
    return {
      chartData1: {
        columns: ['日期', '销售额'],
        rows: [
          { 日期: '1月1日', 销售额: 123 },
          { 日期: '1月2日', 销售额: 1223 },
          { 日期: '1月3日', 销售额: 2123 },
          { 日期: '1月4日', 销售额: 4123 },
          { 日期: '1月5日', 销售额: 3123 },
          { 日期: '1月6日', 销售额: 7123 },
        ],
      },
      chartData2: {
        columns: ['日期', '销售额'],
        rows: [
          { 日期: '1月1日', 销售额: 123 },
          { 日期: '1月2日', 销售额: 1223 },
          { 日期: '1月3日', 销售额: 2123 },
          { 日期: '1月4日', 销售额: 4123 },
          { 日期: '1月5日', 销售额: 3123 },
          { 日期: '1月6日', 销售额: 7123 },
        ],
      },
    }
  },
  components: {
    VeLine,
    VeHist,
  },
}
</script>

效果：　　

 

 注意版本哦！