<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-12 10:48:17
 -->
<!--
<bar-chart :funnelData="funnelData" :charHeight="charHeight"></bar-chart>

import barChart from '@/components/active/bar-chart.vue';
-->

<template>
  <div class="bar-chart">
    <ve-histogram
      :data="barChartData"
      :settings="chartSettings"
      :colors="colors"
      :height="charHeight"
      :tooltip="tooltip"
    ></ve-histogram>
    <div class="chart-title font-12 color-000 text-center">- 近15天趋势图 -</div>
  </div>
</template>
<script>
export default {
  name: 'bar-chart',
  props: {
    barChartData: {
      type: [Array, Object],
      default() {
        return {}
      }
    },
    charHeight: {
      type: String,
      default() {
        return '300px'
      }
    }
  },
  components: { },
  data() {
    this.chartSettings = {
      //showLine: ['传播系数']
    }
    this.colors = ['#5B8FF9','#5AD8A6', '#FF6383']
    this.tooltip = {
      trigger: 'axis',
      formatter (v) {
      	let tpl = [v[0].axisValue+'日']
        v.forEach(i => {
          tpl.push(`${i.marker} ${i.seriesName}：${i.data}`)
        })
        return tpl.join('<br>')
      }
    }
    return {};
  }
  /* methods() {

  } */
};
</script>
<style lang="less" scoped>
.bar-chart {
  .chart-title {
    height: 34px;
    line-height: 34px;
    margin-top: -36px;
  }
}
</style>
