基于vue-element-template项目开发总结（三）

这一篇讲项目中常用插件的使用方式

1.vue-quill-editor
现在市面上有很多的富文本编辑器，我个人还是非常推荐vue-quill-deitor，界面简洁，操作简单，虽然只支持ie10+，但是我觉得已经足够了
安装：

npm install vue-quill-editor

安装依赖项：

npm install quill

在main.js中进行引入 注：css一定要引入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
  
Vue.use(VueQuillEditor)

在vue页面中使用

<div class="editorBox">
    <quill-editor
        class="quill" 
        v-model="content" 
        ref="myQuillEditor" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
    </quill-editor>
</div>

data中设置

methods:

这样咱们的富文本编辑器基本上就能正常使用了

2.echarts
安装echarts依赖

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

在main.js中全局引入

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在vue页面中使用（我这是没有另外再次封装的，就直接用）
（1）定义容器

<div class="report_bottom_container">
   <div class="report_bottom_container_left">
       <el-table
       :data="materialList"
       border
       v-loading="materialoading"
       style="width: 100%">
       <el-table-column
           prop="monitoring_date"
           label="日期">
       </el-table-column>
       <el-table-column
           prop="browse"
           label="浏览量"
           width="150">
       </el-table-column>
       <el-table-column
           prop="download"
           label="下载量"
           width="150">
       </el-table-column>
   </el-table>
   
   </div>
   <div class="report_bottom_container_right">
       <!-- 折线图容器 -->
       <div id="materiaCharts"></div>
   </div>
</div>

（2）data中准备存储数据的数组

 // 素材数据
  materialoading:true,
  materialList:[],
  downloadArr:[],
  browseArr:[],
  dataMateriaArr:[]

后台给我的数据是这样子的

（3）对返回的数据进行处理

getReportList().then(res => {
  if(res.code == 200){
       this.materialoading = false
       this.userloading = false
       this.userList = res.data.logindaily
       this.classifies = res.data.classifies
       this.materialList = res.data.DBdaily
       this.todayConsumer = res.data.RegisteredUsers
       this.todayMember = res.data.RegisteredMembers
       //用户新增echarts图数据处理
       let outdata =JSON.stringify(res.data.logindaily)
       let xqo = JSON.parse(outdata);
       for(var i in xqo){
           this.userArr.push(xqo[i].consumer)
           this.vipArr.push(xqo[i].member)
           this.dataArr.push(xqo[i].date)
       }
       // 素材echarts图数据处理
       let _outdata =JSON.stringify(res.data.DBdaily)
       let _xqo = JSON.parse(_outdata);
       for(var i in _xqo){
           this.downloadArr.push(_xqo[i].download)
           this.browseArr.push(_xqo[i].browse)
           this.dataMateriaArr.push(_xqo[i].monitoring_date)
       }
   }
})
},

(4)将处理好的数据生成折线图

// 素材数据折线图
drawMateriaLine(){
   var that = this
   // 基于准备好的dom，初始化echarts实例
   let myChart = this.$echarts.init(document.getElementById('materiaCharts'));
    window.addEventListener('resize', function () {
       myChart.resize()
   })
      // 指定图表的配置项和数据
   var option = {
       tooltip: {              //设置tip提示
           trigger: 'axis',
           axisPointer: {
               type: 'cross',
               label: {
                   backgroundColor: '#6a7985'
               }
           }
       },
       
       legend: {               //设置区分（哪条线属于什么）
           data:['浏览量','下载量']
       },
       grid: {
           left: '3%',
           bottom: '3%',
           containLabel: true
       },
       color: ['#0f78f4', '#dd536b'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
       xAxis: {                //设置x轴
           type: 'category',
           boundaryGap: false,     //坐标轴两边不留白
           data: that.dataMateriaArr,
           name: '时间',           //X轴 name
           nameTextStyle: {        //坐标轴名称的文字样式
               color: '#e1bb22',
               fontSize: 16,
               padding: [0, 0, 0, 20]
           },
           axisLine: {             //坐标轴轴线相关设置。
               lineStyle: {
                   color: '#e1bb22',
               }
           }
       },
       yAxis: {
           name: '数量',
           nameTextStyle: {
               color: '#39c362',
               fontSize: 16,
               padding: [0, 0, 10, 0]
           },
           axisLine: {
               lineStyle: {
                   color: '#39c362',
               }
           },
           type: 'value'
       },
       series: [
           {
               name: '浏览量',
               data:  that.browseArr,
               type: 'line',   
               smooth:true,            // 类型为折线图
               lineStyle: {                // 线条样式 => 必须使用normal属性
                   normal: {
                       color: '#0f78f4',
                   }
               },
           },
           {
               name: '下载量',
               // [120, 200, 150, 80, 70, 110, 130]
               data: that.downloadArr,
               smooth:true,
               type: 'line',
               lineStyle: {
                   normal: {
                       color: '#dd536b',
                   }
               },
           }
       ]
   };
   myChart.setOption(option);
},

效果

to be continue~