前端---数据可视化

数据可视化

技术运用 : 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(
    )
    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运行的效果图
    前端---数据可视化_第1张图片

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

你可能感兴趣的:(采坑之路)