您的位置：首页 > Web前端 > Vue.js

记录下遇到到前端VUE 使用ui时间选择器获取后台数据,更新echarts图表的输出显示到html

2020-02-04 11:04 561 查看

这个问题折磨了我半天的时间,狂百度谷歌…收获甚少, 由于我前端知识甚少
, vue也是简单的一些会. 今天遇到ui插件组合百度插件整蒙了.
在这边记录下:

<div style="padding-top: 10px;">
日期：
<el-date-picker v-model="createDate" type="datetime"  value-format="yyyy-MM-dd" placeholder="选择日期时间" @change="startTimeStatus" :picker-options="pickerOptionsStart" style="margin-right: 10px;">
</el-date-picker>
至
<el-date-picker v-model="overDate" type="datetime" value-format="yyyy-MM-dd" placeholder="选择日期时间" @change="endTimeStatus" :picker-options="pickerOptionsEnd" style="margin-left: 10px;">

</el-date-picker>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="finTime()">查询</el-button>
</span>
</div>

这个是element-ui时间选择器

<div class="app-container">
<div class="box">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chart2"  style="height:600px;"></div>
</div>
</div>

这个是百度图表插件

<script type="text/babel">
var app = new Vue({
el: '#app',
data:function() {
return {
createDate: '',
overDate:'',
pickerOptionsStart: {
disabledDate: time => {
let endDateVal = this.overDate;
if (endDateVal) {
return time.getTime() > new Date(endDateVal).getTime();
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
let beginDateVal = this.createDate;
if (beginDateVal) {
return (
time.getTime() <
new Date(beginDateVal).getTime()
);
}
},
},
}
},
methods: {
// 时间开始选择器
startTimeStatus:function(value){
this.createDate = value
},
// 时间结束选择器
endTimeStatus:function(value){
this.overDate = value
},
},
created(){

},
mounted:function(){

}
})

这个使用是在这边拿过来的时间插件
原文链接：https://blog.csdn.net/weixin_44021417/article/details/91993316

,这边遇到的问题是如何根据选择的时间更新百度插件图表
解决的方式是:必须在echarts 的方法外加一层初始化.不然是不会显示的

this.$nextTick(()=>{
var  myChart1 = echarts.init(document.getElementById("chart2"));
...里面放的是它自带的功能
}

这样终于可以解决问题了. 这边插入全部代码,希望有遇到这个问题的人可以顺利解决此问题

<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../plugins/elementui/index.css">

</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>统计分析<small>年龄分布</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>统计分析</el-breadcrumb-item>
<el-breadcrumb-item>年龄分布</el-breadcrumb-item>
</el-breadcrumb>

</div>

<div style="padding-top: 10px;">
日期：
<el-date-picker v-model="createDate" type="datetime"  value-format="yyyy-MM-dd" placeholder="选择日期时间" @change="startTimeStatus" :picker-options="pickerOptionsStart" style="margin-right: 10px;">
</el-date-picker>
至
<el-date-picker v-model="overDate" type="datetime" value-format="yyyy-MM-dd" placeholder="选择日期时间" @change="endTimeStatus" :picker-options="pickerOptionsEnd" style="margin-left: 10px;">

</el-date-picker>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="finTime()">查询</el-button>
</span>
</div>
<div class="app-container">
<div class="box">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chart2"  style="height:600px;"></div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../echarts/echarts.js"></script>

<script type="text/javascript">
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
// 基于准备好的dom，初始化echarts实例

var app = new Vue({
el: '#app',
data:function() {
return {
createDate: '',
overDate:'',
pickerOptionsStart: {
disabledDate: time => {
let endDateVal = this.overDate;
if (endDateVal) {
return time.getTime() > new Date(endDateVal).getTime();
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
let beginDateVal = this.createDate;
if (beginDateVal) {
return (
time.getTime() <
new Date(beginDateVal).getTime()
);
}
},
},
}
},
methods: {
// 时间开始选择器
startTimeStatus:function(value){
this.createDate = value
},
// 时间结束选择器
endTimeStatus:function(value){
this.overDate = value
},finTime(){
this.$nextTick(()=>{
var  myChart1 = echarts.init(document.getElementById("chart2"));
/* var myChart1 = echarts.init(document.getElementById('chart2'));*/

// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);

axios.get("/statistical/getESC?createDate="+this.createDate+"&overDate="+this.overDate).then((res)=>{
myChart1.setOption({
title : {
text: '年龄分布占比',
subtext: '',
x:'center'
},
tooltip : {//提示框组件
trigger: 'item',//触发类型，在饼形图中为item
formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
},
legend: {
orient: 'vertical',
left: 'left',
data: res.data.data.ageNames
},
series : [
{
name: '年龄分布占比',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:res.data.data.ageCount,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
});
})
}
},
created(){

},
mounted:function(){
var myChart1 = echarts.init(document.getElementById('chart2'));

// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);

axios.get("/statistical/getNemberAge").then((res)=>{
myChart1.setOption({
title : {
text: '年龄分布占比',
subtext: '',
x:'center'
},
tooltip : {//提示框组件
trigger: 'item',//触发类型，在饼形图中为item
formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
},
legend: {
orient: 'vertical',
left: 'left',
data: res.data.data.ageNames
},
series : [
{
name: '年龄分布占比',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:res.data.data.ageCount,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
});
}
})

</script>
</html>

点赞
收藏
分享
文章举报

MRchen009 发布了8 篇原创文章 · 获赞 0 · 访问量 168 私信关注

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航