Get started with vue-echarts CDN

<template>
  <div id="app">
    <div id="main" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import Echarts from 'vue-echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';

export default {
  components: {
    Echarts,
  },
  data() {
    return {
      options: {
        title: {
          text: 'ECharts Bar Chart',
        },
        tooltip: {},
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        },
        yAxis: {
          data: ['Product A', 'Product B', 'Product C'],
        },
        series: [
          {
            data: [10, 52, 200, 334, 390],
            type: 'bar',
            barWidth: '60%',
          },
        ],
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.main.echarts.setOption(this.options);
    });
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#main {
  width: 100%;
  height: 100%;
}
</style>