<template>
<div class="center" >
  <div class="left-box">
    <div id="chart" style="width: 600px; height: 400px;"></div>
  </div>
  <div class="right-box"></div>
</div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "indexcomponents",
  data(){
    return{

    }
  },
  mounted() {
    this.initChart()
  },
  methods:{
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))

      const option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 50, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1],
            ['Walnut Broswnie', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      };

      chart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
#chart{
  background: #F8F1E7;
}
  .center{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .left-box{
    width: 75%;

  }
  .right-box{
    width: 20%;
  }
</style>
