emsfront/src/views/ems/zddt/BarChart.vue

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

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/mixins/ems/resize'
// todo
// 数据获取、数据格式处理、日期在前端处理还是后端返回
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: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        legend: {
          left: 'right',
          bottom: '10',
        },
        tooltip: {},
        xAxis: { type: 'category' },
        yAxis: { },
        grid:{top:20},
        dataset:{
          source:[
            ['product','充电量','放电量'],
            ['第一天',10,20],
            ['第二天',20,30],
            ['第三天',20,30],
            ['第四天',20,10],
            ['第五天',200,80],
            ['第六天',210,300],
            ['第七天',200,30],
          ]
        },
        series: [
          {
            type: 'bar',//柱状图
            color:'#A796FF',//柱的颜色
          },
          {
            type: 'bar',//柱状图
            color:'#FFBE01',//柱的颜色
          }
        ]
      })
    }
  }
}
</script>


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