前端---数据可视化
数据可视化技术运用 : vue + echarts前期遇到的问题:之前对可视化的东西不太了解,在刚做起来的时候踩了不少坑创建表格,这里是用的echarts<el-date-pickerv-model="value3"type="date"placeholder=&a
·
数据可视化
技术运用 : vue + echarts
前期遇到的问题:之前对可视化的东西不太了解,在刚做起来的时候踩了不少坑
-
创建表格,这里是用的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:[] } }
-
请求数据,将数据存储到之前定义数组中
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运行的效果图
小结: 此时,实例化的表格填充数据基本已经完成了,还是要看看官方文档…
更多推荐
已为社区贡献2条内容
所有评论(0)