hitch-sb-antd/src/views/opc/modules/BaseChartInfo.vue

<template>
  <a-modal
    title="历史曲线"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :footer="null"
    :width="800"
    @cancel="handleCancel"
  >
    <div class="chart">
      <a-row type="flex" justify="space-between">
        <a-col :span="24">
          <a-form :form="form">
            <a-row type="flex" justify="end">
              <a-col :span="10">
                <a-form-item label="开始时间" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
                  <a-date-picker
                    :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN"
                    v-model="queryParam.searchStartTime" />
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item label="结束时间" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
                  <a-date-picker
                    :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN"
                    v-model="queryParam.searchEndTime" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-form-item >
                  <a-button type="primary" @click="getInfo">查询</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <div>
        <div id="chart"></div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
  data () {
    return {
      form: this.$form.createForm(this),
      visible: false,
      confirmLoading: false,
      queryParam: {},
      chart1: null,
      dataList1: [],
      dataList: [
        { time: '2009/7/20 0:00', value: 32, type: 'aa' },
        { time: '2009/7/20 1:00', value: 8, type: 'bb' },
        { time: '2009/7/20 2:00', value: 28, type: 'aa' },
        { time: '2009/7/20 2:00', value: 6, type: 'bb' },
        { time: '2009/7/20 4:00', value: 5, type: 'aa' },
        { time: '2009/7/20 4:00', value: 13, type: 'bb' },
        { time: '2009/7/20 6:00', value: 12, type: 'aa' },
        { time: '2009/7/20 6:00', value: 31, type: 'bb' },
        { time: '2009/7/20 8:00', value: 1, type: 'aa' },
        { time: '2009/7/20 8:00', value: 16, type: 'bb' }
      ]
    }
  },
  created () {
  },
  mounted () {

  },
  methods: {
    base () {
      this.visible = true
      this.$nextTick(() => {
        this.createChart(this.dataList)
      })
    },
    getInfo () {

    },
    createChart (data) {
      this.chart1 && this.chart1.destroy()
      this.chart1 = new Chart({
        container: 'chart',
        autoFit: true,
        height: 440,
        padding: [16, 50, 64]
      })
      this.chart1.data(data)
      this.chart1.scale({
        time: {
          type: 'time',
          tickCount: 8,
          mask: 'M/DD HH:mm'
        },
        value: {
          min: 0
        }
      })
      this.chart1.legend({
        position: 'top',
        offsetY: 4
      })

      this.chart1.tooltip({
        showCrosshairs: true,
        shared: true
      })

      this.chart1.option('slider', {
        start: 0.001,
        end: 1,
        trendCfg: {
          isArea: false
        }
      })

      this.chart1
        .line()
        .position('time*value')
        .color('type')
      this.chart1.interaction('element-visible-filter')
      this.chart1
        .point()
        .color('type')
        .position('time*value')
      this.chart1.render()
    },
    handleCancel (e) {
      console.log('Clicked cancel button')
      this.visible = false
    }
  }
}
</script>

<style>

</style>