NLog+富文本+折线图

2021-09-14 22:02:39 阅读：166 来源： 互联网

标签：日期销售额 editor import 折线图 NLog Logger 文本

一、NLog日志

在要使用日志的地方点击NewGet管理包，从中下载NLog文件
在要使用日志的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>

效果：　　

注意版本哦！

标签：日期,销售额,editor,import,折线图,NLog,Logger,文本
来源： https://www.cnblogs.com/li0536/p/15269834.html

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

ICode9

NLog+富文本+折线图