<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-12 18:23:10
 -->
<!--
<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"
      :yAxis="yAxis"
      :legend="legend"
    ></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>')
      },
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      // backgroundColor: 'rgba(255,255,255,0.8)',
      textStyle: {
        color: '#fff'
      }
    }
    this.yAxis= {
      type: 'value',
      axisTick: {            // 坐标轴小标记
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#404040',  //更改坐标轴文字颜色
          fontSize: 12      //更改坐标轴文字大小
        }
      },
      //设置网格线颜色
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#d9d9d9'],
          width: 1,
          type: 'dashed'
        }
      }
    }

    this.legend = {
      x: 'left',
      itemWidth: 8,
      itemHeight: 8
    }
    return {};
  }
  /* methods() {

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