echarts dialog组件（轮子）

1. 父文件引用子组件：

	<dataEcahrtsZs :zsItem="zsItem"
                   :zsVisiable="zsVisiable"
                   @zsClose="zsCloseDialog">
    </dataEcahrtsZs>
    <script>
    import dataEcahrtsZs from "../dialogs/data-echarts-zs.vue";
    export default {
    	components: {
		    dataEcahrtsZs,
		  },
		  data() {
    		return {
    			zsVisiable:false,
    			zsItem: {
        			title: "",
     			},
   			 }
    	}
    	method(){
    		zsCloseDialog(val) {
		      this.zsVisiable = false;
		    },
    	}
    }
    </script>

2. 子组件

<template>
  <el-dialog @open="initStations"
             :title="this.zsItem.title"
             @close="closeDialog"
             width=auto
             :destroy-on-close="true"
             :close-on-click-modal="false"
             :visible.sync="zsVis">
    <el-divider></el-divider>
    <el-form>
      <el-row type="flex"
              :gutter="20">
        <el-col :span="7">
          <el-form-item label="设备位置">
            <el-select v-model="location"
                       @change="initStationNames()"
                       placeholder="请选择">
              <el-option v-for="item in stations"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="设备名称">
            <el-select v-model="stationName"
                       :disabled="this.ifLocation"
                       @change="initNoiseData()"
                       :placeholder="this.SecondSelectText">
              <el-option v-for="item in stationNames"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="起止时间">
            <el-date-picker @change="initNoiseData()"
            :clearable="false"
                            v-model="time"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div id="funcTable"
         style="margin:24px 0 12px 0; min-height:350px; width:100%; border:1px solid #dfdfdf"></div>
  </el-dialog>
</template>

<script>
//首先初始化时间格式工具，可直接复制到js里面
Date.prototype.Format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //24小时制
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
  return fmt;
};
export default {
  name: "dataEcahrtsZs",
  props: {
    zsVisiable: Boolean,
    zsItem: Object,
  },
  data() {
    return {
      SecondSelectText: "请选择设备位置",
      ifLocation: true,
      zsVis: false,
      stations: [],
      noiseArr: [],
      arrtime: [],
      arrtime1: [],
      errorCode: "",
      newStartTime: "",
      newEndTime: "",
      stationName: "",
      location: "",
      stationNames: [],
      locations: [], //设备位置信息select数组
      isShow: true, //是否显示提示信息
      showInf: false, //是否显示导入返回信息
      importOpts: {
        uploadExcelUrl: "/xxxx",
        applicationName: "xxx",
        configId: "",
        text: "",
        rootOrgCode: "",
        rootOrgId: "",
        rootDLevelCode: "",
      },
      fileList: [],
      information: {
        success: "",
        successCount: "",
        errorId: "",
        type: "",
        errorCount: "",
        originName: "",
      },
      loading: "",
      tempId: "",
      title: "导入数据",
      dialogVisibleNoise: false,
      time: [],
      name: "",
      noiseDialog: false,
    };
  },
  beforeMount() {},
  mounted() {},
  watch: {
    zsVisiable(newValue, oldValue) {
      this.zsVis = newValue;
    },
  },
  methods: {
    closeDialog() {
      (this.location = ""), (this.stationName = ""), (this.ifLocation = true), (this.time = []), (this.SecondSelectText = "请选择设备位置");
      this.$emit("zsClose", true);
    },
    //其次，对方法进行封装
    formatTime(timeSecond) {
      var d = new Date(timeSecond); //注意timeSecond是毫秒
      return d.Format("yyyy-MM-dd hh:mm:ss");
    },

    funcTable() {
      var myChart; //全局变量
      var charts = {
        unit: "噪声 (db)",
        names: ["噪声"],
        lineX: this.arrtime,
        value: [this.arrtime1],
      };
      var lineY = [];

      for (var i = 0; i < charts.names.length; i++) {
        var x = i;
        var data = {
          name: charts.names[i],
          type: "line",
          smooth: false,
          symbolSize: 5,
          data: charts.value[i],
        };
        lineY.push(data);
      }
      lineY[0].markLine = {};
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = this.$echarts.init(document.getElementById("funcTable"));
      myChart.setOption({
        color: "#039382",
        title: {
          // text: '历史数据-曲线',
          textStyle: {
            fontWeight: "normal",
            fontSize: 16,
            color: "",
          },
          left: "45%",
          top: "4%",
        },
        // backgroundColor: '',
        tooltip: {
          // color: '#039382'
          // trigger: 'axis',
        },

        legend: {
          show: false,
          top: "4%",
          data: charts.names,
          textStyle: {
            fontSize: 14,
            // color: 'F1F1F3',
          },
          right: "4%",
        },
        grid: {
          top: "10%",
          left: "4%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          show: true,
          type: "category",
          boundaryGap: false,
          data: charts.lineX,
          axisLabel: {
            textStyle: {
              color: "",
            },
            formatter: function (params) {
              return params.split(" ")[0] + "\n" + params.split(" ")[1];
            },
          },
        },
        yAxis: {
          show: true,
          splitArea: {
            show: true,
            areaStyle: {
              color: "",
            },
          },
          name: charts.unit,
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: lineY,
      });
    },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
.el-main {
  width: 100%;
  height: 100%;
  padding: 0px;
}
.Grid {
  display: flex;
}
::v-deep .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 4px;
}
::v-deep .el-icon-picture-outline-round:before {
  size: 20px;
  margin-right: 0.05rem;
}
::v-deep .el-dialog__body {
  background-color: white;
}
::v-deep .el-dialog .el-dialog__body {
  text-align: initial;
  padding: 15px 30px 15px 30px;
}
::v-deep .el-dialog__header {
  height: 0.1rem;
}
::v-deep .el-dialog__body .el-form {
  padding: 8px 8px 8px 8px;
}

::v-deep .el-dialog__title {
  margin: 0 0 0 15px;
  font-weight: 700;
}
.buttonGroup {
  margin-top: 16px;
  display: flex;
  justify-content: space-around;
}
.buttonItem {
  flex-grow: 0;
  /* flex: 1; */
}
.searchFormItem {
  margin-top: 8px;
  flex: 1;
}
::v-deep .el-dialog .el-dialog--center {
  width: 680px;
}
::v-deep .el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: auto;
}
</style>