<template>
  <div class="barbody">
    <v-chart ref="chart" :forceFit="true" :height="height" :data="data" :scale="scale" :padding="padding">
      <v-tooltip />
      <v-axis />
      <v-legend />
      <v-line position="month*temperature" :color="['city',['#f40004', '#f9c002', '#fdff00','#c8e7fd']]" />
      <v-area position="month*temperature" :color="['city',['#f400042e', '#f9c0022e', '#fdff002e','#c8e7fd2e']]"  :tooltip="false"  />
      <v-point position="month*temperature"  :color="['city',['#f40004', '#f9c002', '#fdff00','#c8e7fd']]" :size="4" :v-style="style" :shape="'circle'"/>
    </v-chart>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set')
import { ChartEventMixins } from '@/components/chart/mixins/ChartMixins'

export default {
  name: 'ChartLine',
  mixins: [ChartEventMixins],
  props: {
    dataSource: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 254
    }
  },
  data() {
    return { padding: ['auto', '30', '60', '40'], style: { stroke: '#fff', lineWidth: 1 } }
  },
  computed: {
    scale() {
      return [
        {
          dataKey: 'month',
          min: 0,
          max: 1
        }
      ]
    },
    data() {
      console.log(this.dataSource)
      let dv = new DataSet.View().source(this.dataSource)
      // 计算数据百分比
      dv.transform({
        type: 'fold',
        fields: ['公告', '通知'],
        key: 'city',
        value: 'temperature'
      })
      return dv.rows
    }
  },
  mounted() {}
}
</script>
<style scoped>
.barbody {
  margin-top: 0px;
}
</style>
