项目的需求我先说一下,点击曲线弹出一个弹框,在选择条件,点击搜索展示曲线。
![](https://i-blog.csdnimg.cn/blog_migrate/267e4f4d633ca7884e90199042135af5.png)
点击出现弹框的代码如下
<span
class="quxian"
style="float: right; cursor: pointer; font-size: 12px; opacity: 0.7"
@click="showDialogLine(item.realTimeDatas)"
>曲线 </span
>
复制代码
搜索框的条件代码如下
<el-dialog
title="设备曲线"
:modal="false"
:modal-append-to-body="false"
:visible.sync="dataVisible"width="80%"
@close="close()"
>
<div class="contain-line">
<el-row :gutter="20">
<el-col :span="8">
<span>开始时间:</span>
<el-date-picker
v-model="value1"type="datetime"placeholder="选择开始时间"value-format="yyyy-MM-dd HH:mm:ss"size="small"
>
</el-date-picker>
</el-col>
<el-col :span="8">
<span>结束时间:</span>
<el-date-picker
v-model="value2"type="datetime"placeholder="选择结束时间"value-format="yyyy-MM-dd HH:mm:ss"size="small"
>
</el-date-picker
></el-col>
<el-col :span="8">
<el-button
style="width: 70px"type="primary"
@click="search(item.realTimeDatas, value1, value2)"size="small"
>搜索</el-button
>
</el-col>
<div class="check_group">
<el-checkbox-group v-model="checkboxGroup">
<el-checkbox
v-for="(item, index) in choose"
:key="index"
:label="item.pointCode"name="check"class="check-button"v-show="item.pointCode.indexOf('Y', 'c') !== -1"
></el-checkbox>
</el-checkbox-group>
</div>
</el-row>
<div id="Sub-echartLine" style="width: 100%; height: 250px"></div>
</div>
</el-dialog>
复制代码
打开弹框后
// 打开弹框
showDialogLine(realTimeDatas) {
this.dataVisible = true;
...
},`
复制代码
点击搜索后
asyncsearch(realTimeDatas,beginTime,endTime){
let postData = this.checkboxGroup;
// console.log(postData);await axios
.post(
this.HOST +
"/curves/codes?token=" +
store.state.token +
"&beginTime=" +
beginTime +
"&endTime=" +
endTime,
postData
)
.then((res) => {
console.log(res.data.data);
if (res.data.code == 0) {
if (res.data.data != null && res.data.data != undefined) {
// 曲线图this.$nextTick(() => {
var myChart = this.$echarts.init(
document.getElementById("Sub-echartLine")
);
var xData = ["1", "2", "3", "4"];
var yData = ["1", "2", "3", "4"];
var option = {
// color: [// "#c23531",// "#d48265",// "#ca8622",// "#2bbd10",// "#d9219e",// "#f9f902",// ],xAxis: [
{
data: xData,
axisLine: {
show: true, // Y轴lineStyle: {
color: "#fff", // 颜色
},
},
},
],
dataZoom: [
{
type: "inside",
// realtime: true,start: 0,
end: 500,
},
],
yAxis: {
axisTick: {
//y轴刻度线// show: true,
},
axisLine: {
show: true, // Y轴lineStyle: {
color: "#fff", // 颜色
},
},
splitLine: {
// 表格里面Y轴线条show: true,
color: "#fff",
},
},
grid: {
left: "10%",
right: "4%",
bottom: "2%",
containLabel: true,
},
series: [
{
type: "line",
data: yData,
smooth: true,
},
],
};
myChart.clear();
myChart.setOption(option);
//随着屏幕大小调节图表window.addEventListener("resize", () => {
myChart.resize();
});
console.log(option);
});
}
}
})
.catch((error) => {
console.log(error);
});
},
复制代码
可是最后曲线还是不出来,只是打开和关闭弹框闪现一下,我也不知道为什么?希望大家能够帮帮我