在vue中使用Echarts的自适应问题

1.在vue中添加Echarts图表使用详解

使用npm添加package.json文件中的配置并下载相关npm包依赖

npm install echarts --save

 然后在需要创建图表的组件中引入

  // 引入echarts  
import echarts from "echarts"

在模板中创建所需的dom

<div class="echarts-wrap">    
      <div class="item1-l" ref="myChart"></div>
      <div class="item1-r" ref="myPie"></div>
</div>
        

写入js

 <script>
   export default {
     name: "Index",
     data() {
       return {
         myChart: null,   //关键一
         myPie: null,
       }
     },
     mounted() {
       this.drawLine();
       this.drawPie();
       this.init(); //让echarts窗口自适应   //关键二
     },
     methods: {
       drawLine() {
         // 基于准备好的dom，初始化echarts实例
         this.myChart = echart