Simple use of Echarts in Vue project

Install Echarts dependencies

npm install echarts -S

Create chart

First it needs to be introduced globally
in main.js

// 引入 Echarts 
import echarts from 'echarts' 
Vue.prototype. $ Echarts = echarts

In index.vue

<template>
  <div id="myChart" :style="{width: '500px', height: '500px'}"></div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // Initialize Echarts instance 
        let myChart = this . $ Echarts.init (document.getElementById ('myChart' ))
         // Draw chart 
        myChart.setOption ((
            title: {text: 'Simple use of Echarts in Vue' },
            tooltip: {},
            xAxis: {
                data: [ "Shirt", "Cardigan", "Chiffon Shirt", "Pants", "High Heels", "Socks" ]
            },
            yAxis: {},
            series: [{
                name: 'Sales' ,
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
</script>

Finish: above