echarts响应式布局

###步骤一

	1.下载echarts
    npm install echarts --save
    2.main.js里引入
    import echarts from "echarts"
	Vue.prototype.$echarts = echarts

###步骤二

<template>
  <div class="hello">
    <div class="div1">
      <div id="main" style="width: 100%;height:100%; border: 1px solid;"></div>
    </div>
  </div>
</template>

###步骤三（div1的高宽必须固定的）

<style scoped>
.hello{
  width: 100%;
  height: 100%;
}
.div1{
  width: 60rem;
  height: 20rem;
}
</style>

步骤四

 mounted(){
    this.chart();
  },
  methods:{
    chart(){
      var myChart = this.$echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

       //若有多个echarts实例(响应式布局)
	   //根据窗口的大小变动图表 --- 重点
      window.onresize = function(){
           myChart.resize();
 		   //myChart1.resize();    //若有多个图表变动，可多写
       }
    }   
  }

</script>