NLog日志、富文本编辑器、折线图

一、NLog日志

1. 下载NuGet包

   

2. 创建一个NLog.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. 6个方法

   logger.Trace(“输出一条记录信息");
   ​
   logger.Debug(""输出一条Debug信息");
   ​
   logger.Info("输出一条消息类型信息");
   ​
   logger. warn("输出一条警告信息");
   ​
   logger.Error("输出一条错误信息");
   ​
   logger.Fatal("输出一条致命信息");

    

二、富文本编辑器

1. npm安装

   npm i wangeditor --save

2. 引用

   // 引入 wangEditor
   import wangEditor from 'wangeditor'

3. 写入函数

   mounted() {
       const editor = new wangEditor(`#demo1`)
       // 配置 onchange 回调函数，将数据同步到 vue 中
       editor.config.onchange = (newHtml) => {
          this.editorData = newHtml
       }
       // 创建编辑器
       editor.create()
       this.editor = editor
     }

4. 2个参数

   data(){
       return{
         editor: null,
         editorData: ''
       }
     }

5. 获取文本编辑器的值（写在添加方法之前，正则验证之后）

   this.resetForm.GoodsIntroduce=this.editor.txt.html();//获取文本编辑器的值

三、折线图

1. npm安装

   npm i v-charts echarts -S

    

2. 按需引入

   |- lib/
       |- line.common.js  -------------- 折线图
       |- bar.common.js  --------------- 条形图
       |- histogram.common.js  --------- 柱状图
       |- pie.common.js  --------------- 饼图
       |- ring.common.js  -------------- 环图
       |- funnel.common.js  ------------ 漏斗图
       |- waterfall.common.js  --------- 瀑布图
       |- radar.common.js  ------------- 雷达图
       |- map.common.js  --------------- 地图
       |- sankey.common.js  ------------ 桑基图
       |- heatmap.common.js  ----------- 热力图
       |- scatter.common.js  ----------- 散点图
       |- candle.common.js  ------------ k线图
       |- gauge.common.js  ------------- 仪表盘
       |- tree.common.js  -------------- 树图
       |- bmap.common.js  -------------- 百度地图
       |- amap.common.js  -------------- 高德地图

    

3. 代码

   <template>
     <div>
       <ve-line :data="chartData1"></ve-line>
       <ve-hist :data="chartData2"></ve-hist>
       <ve-pie :data="chartData3"></ve-pie>
     </div>
   </template>
   ​
   <script>
   import VeLine from 'v-charts/lib/line.common'
   import VeHist from 'v-charts/lib/histogram.common'
   import VePie from 'v-charts/lib/pie.common'
   export default {
     components: { VeLine,VeHist,VePie },
     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 }
           ]
         },
         chartData3: {
           columns: ['日期', '销售量'],
           rows: [
             { '日期': '1月1日', '销售量': 123 },
             { '日期': '1月2日', '销售量': 1223 },
             { '日期': '1月3日', '销售量': 2123 },
             { '日期': '1月4日', '销售量': 4123 },
             { '日期': '1月5日', '销售量': 3123 },
             { '日期': '1月6日', '销售量': 7123 }
           ]
         }
   ​
       }
     }
   }
   </script>

    

4. 效果