2019-05-29 VUE - 使用echart

npm install echarts --s 安装echarts 

<template>

<div>

<div id="chart">

        <div id='myChart' ref="myEchartPillar"></div>

    </div>

</div>

</template>

<script>

import echarts from 'echarts';

export default {

  name: 'hello',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  },

  mounted(){

    this.drawLine();

  },

  methods: {

    drawLine(){

        // 基于准备好的dom，初始化echarts实例

        let myChart = echarts.init(this.$refs.myEchartPillar);

        // 绘制图表

        myChart.setOption({

            title: { text: '在Vue中使用echarts' },

            tooltip: {},

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'line',

                data: [5, 20, 36, 10, 10, 20]

            }]

        });

    }

  }

}

</script>

<style>

#chart{

padding: 0 50px;

}

#myChart{

width: 100%;

height: 400px;

}

</style>