数据可视化

技术运用 : vue + echarts

前期遇到的问题:之前对可视化的东西不太了解,在刚做起来的时候踩了不少坑

1. 创建表格,这里是用的echarts

   //element-ui日期组件
   <el-date-picker
       v-model="value3"
       type="date"
       placeholder="选择日期"
       @change="dates"
       format="yyyy 年 MM 月 dd 日"
       value-format="yyyy-MM-dd"
     >
   </el-date-picker>
   <span style="font-size: 20px;">至</span>
   <el-date-picker
       v-model="value4"
       type="date"
       @change="dates"
       placeholder="选择日期"
       format="yyyy 年 MM 月 dd 日"
       value-format="yyyy-MM-dd">
    </el-date-picker>
    
     //表格的位置
    <div id="main" style="width: 600px;height:400px;"></div>
   

    data(){
   	            return {        
   	              value3: '',
   	              value4: '',
   	              arr:[],
   	              arr_date:[],
   	              arr_purchaseMoney:[]
   	           }
   	     }
   

2. 请求数据,将数据存储到之前定义数组中

   dates(){ 
            //获取输入框的起始及截止日期    
           let beginDate = this.value3;
           let endDate = this.value4;
           //请求reportinfo
           if (beginDate !=''&&  endDate != ''){
             this.tool
               .request({
                 url: "请求路径",
                 method: "请求方式",
                 params: {
                   beginDate: beginDate,
                   endDate: endDate
                 }
               })
               .then(res => {
                 if (res.code == 200) {
                   let arr1 = [];
                   arr1 = res.data;
                   //请求得到数据push到定义好的数组中
                   for (var i in arr1) {
                     this.arr_date.push(arr1[i].date);
                     this.arr_purchaseMoney.push(arr1[i].purchaseMoney);
                   } 
                   //开始绘制表格              
                   this.drawLine();
                   }
               })
           }
         },
    drawLine(){
           // 基于准备好的dom(<div id="main"></div>)
           let myChart = this.$echarts.init(document.getElementById('main'))
           // 绘制图表
            var option = {
              xAxis: {
                type: 'category',
                //横坐标
                data: this.arr_date,
              },
              yAxis: {
                type: 'value',
                //纵坐标
                data: this.arr_purchaseMoney 
              },
              series: [{
                type: 'line'                  
              }]
            };
            myChart.setOption(option);
   }
   

   3.这里添加一张demo运行的效果图
   

小结: 此时,实例化的表格填充数据基本已经完成了,还是要看看官方文档…