vue中使用echarts

安装看上一篇：https://www.jianshu.com/p/a67d78f3a3a9

注意：表格不显示可能是因为没有给他设置大小宽高。

<template>

    <div id="echarts" style="position: absolute; top: 50px; left:200px;width: 300px;height: 300px">

  </div>

</template>

<script>

  import echarts from 'echarts'

  export default {

    name: 'hello',

    data() {

      return {

        mychart: null

      }

},

    mounted() {

      this.shipchart();

},

    methods: {

     shipchart() {

        this.mychart = echarts.init(document.getElementById('echarts'))

        this.mychart.setOption({

          xAxis: {

            type: 'category',

            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

},

          yAxis: {

            type: 'value'

          },

          series: [{

            data: [120, 200, 150, 80, 70, 110, 130],

            type: 'bar',

            barWidth: "50%"

          }]

})

}

}

}

</script>

<style scoped>

</style>