echarts数据显示功能完善

zhangshuaibao

2021-04-13 22e5d744b28c0df0f115476b44a75d1d46cac228

 src/components/BaseNav/PublicBounced/GasComponents/EChartsHourWasteWater.vue

@@ -14,17 +14,14 @@
                    <div class="pickerData">
                        <span> 开始时间:</span>
                        <span class="pickerTable">
                          <el-date-picker  type="datetime"   v-model="formInline.timeStart">
                          <el-date-picker type="datetime" v-model="formInline.timeStart">
                      </el-date-picker>
                      </span>
                    </div>
                    <div class="pickerData">
                        <span >结束时间:</span>
                        <span class="pickerTable">
                        <el-date-picker
                                type="datetime"
                                v-model="formInline.timeEnd"
                        >
                        <el-date-picker type="datetime" v-model="formInline.timeEnd">
                      </el-date-picker>
                      </span>
                    </div>
@@ -53,7 +50,7 @@
                   center
                   v-dialogDrag
        >
            <div class="el-dialog-div" style="height: 500px">
            <div class="el-dialog-div" style="height: 260px">
                <public-detailed-list v-bind="$attrs"></public-detailed-list>
            </div>
        </el-dialog>
@@ -78,8 +75,8 @@
      value: '',
      formInline: {
        region: '',
        timeStart: '',
        timeEnd: ''
        timeStart: '2021-04-12 17:00:00',
        timeEnd: '2021-04-13 16:00:00'
      },
      myChart: null,
      JsonHourWater: {
@@ -128,18 +125,7 @@
  },
  methods: {
    onSubmit () {
      console.log(1)

      // const date = [this.value1, this.value2, this.formInline.region]
      this.effChartShow(this.JsonHourWater.id, this.JsonHourWater.title, this.JsonHourWater.legend, this.JsonHourWater.xdata, this.JsonHourWater.ydatas, this.JsonHourWater.yname, this.JsonHourWater.id, this.JsonHourWater.datatype)
      // console.log(date)
      // if (date) {
      //   var date1 = new Date(date)
      //   date1 = new Date(date1.getTime() - (8 * 3600000))
      //   console.log(date1)
      // var dateUtil = new DateUtil()
      // var datePkg = dateUtil.getTowDate(date1, "a", 24 * 3600000 - 1);
      // var datatype = 2;
    },
    effChartShow: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.myChart = this.$echarts.init(this.$refs.main)
@@ -189,7 +175,7 @@
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                  width: 4
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
@@ -244,7 +230,7 @@
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                  width: 4
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
@@ -310,10 +296,14 @@
      },
      grid: { // 网格
        top: '20%',
        left: '5%'
        left: '7%',
        bottom: '10%'
      },
      legend: {
        data: legend
        data: legend,
        textStyle: {
          color: '#fff'
        }
      },
      dataZoom: [{
        type: 'inside',
@@ -340,7 +330,8 @@
          rotate: 20,
          interval: 0,
          textStyle: {
            color: '#fff'
            color: '#fff',
            fontSize: 10
          }
        },
        splitLine: { // 网格垂直线为 虚线