<!--站点地图页面柱状图组件-->
<template>
  <div class="bar-chart-container"></div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
export default {
  mixins: [resize],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOption(data){
      const source = [['日期','充电量','放电量']]
      data.forEach(item=>{
        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
      })
      this.chart.setOption({
        color:['#4472c4','#70ad47'],//所有充放电颜色保持统一
        grid: {
          top:30,
          containLabel: true
        },
        legend: {
          left: 'right',
          bottom: '15',
        },
        tooltip: {},
        xAxis: { type: 'category' },
        yAxis: { },
        dataset:{
          source
          // source:[//格式
          //   ['product','充电量','放电量'],
          //   ['第一天',10,20],
          //   ['第二天',20,30],
          // ]
        },
        series: [
          {
            type: 'bar',//柱状图
          },
          {
            type: 'bar',//柱状图
          }
        ]
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el)
    }
  }
}
</script>


<style scoped lang="scss">
.bar-chart-container{
  width:100%;
  height: 260px;
}
</style>
