vueでechartsを参照し、echartsをウィンドウに適応させる方法について

あら、会社はvueをバックグラウンド管理システムにしなければなりません.私も初めてこのようなタイプのプロジェクトをして、それからみんなはすべて知っていて、バックグラウンドの管理システムが欠かせないのはデータ統計図と表です
動向図の部分については、echartsを使用しています.
vueでechartsを使用するには:
一:npm install echarts--saveローカルディレクトリにechartsをインストールする
 
二:必要なコンポーネントにechartsを導入する
 
    import echarts from 'echarts/lib/echarts'     import 'echarts/lib/chart/line'     import 'echarts/lib/component/tooltip'     import 'echarts/lib/component/legendScroll'
(echartsファイル全体、すなわちimport echarts from'echarts'を導入してみましたが、コンソールが間違っています)
 
三:html部分

四：vue中配置参数部分

  在data里声名一个chart选项  chart:null

props:{
           className: {
             type:String,
             default:'yourClassName'
           },
           id:{
             type:String,
             default:'yourID'
           },
           width:{
             type:String,
             default:'100%'
           },
           height:{
             type:String,
             default:'400px'
           }
        },

   methods: {
           initChart() {
                this.chart = echarts.init(this.$refs.myEchart);
                //          
                this.chart.setOption({
                  tooltip: {
                    trigger: 'axis',
                  },
                  legend:{
                     icon:'rect',
                     itemWidth:15,
                     itemHeight:8,
                     itemGap:10,
                     data:['    ','    '],
                     right:'20px',
                     textStyle:{
                        fontSize:12,
                        color:'#ccc'
                     }
                  },
                  xAxis: [{
                    type: 'category',
                     boundaryGap : false,
                     data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17'],
                  }],
                  yAxis: [{
                    type: 'value',
                    splitLine:{
                      show:false
                    }
                  }],
                  series: [{
                    name: '    ',
                    type:'line',
                    smooth:true,
                    itemStyle: {normal: {areaStyle: {type: 'default',color:'#00d7bf',opacity:'0.2'},color:'#00d7bf'}},
                    lineStyle:{color:'#00d7df',opacity:0.2},
                    data:[12330, 12334, 13300, 13444, 13000, 12567, 13400,12450,13000,13200,12343,13452,12345,12333,12345,12456,13456]
                   },
                   {
                     name:'    ',
                     type:'line',
                     smooth:true,
                     itemStyle: {normal: {areaStyle: {type: 'default',color:'#c4b03d',opacity:'0.2'},color:'#c4b03d'}},
                     data:[11200, 16534, 10433, 10678, 11435, 10444, 11000,11450,11000,10200,11343,10452,11345,10333,11234,10234,10222]

                  }]
              })
           },

構成されたechartsをdomノードにマウントする

 mounted() {
            this.initChart();
        },

 
 
次に、echartsをウィンドウに適応させる部分について説明します.
methodsにinitメソッドを追加

init() {
             const self = this;//         this  ，  windows。    this  
             setTimeout(() => {
                window.onresize = function() {
                    self.chart = echarts.init(self.$refs.myEchart);
                    self.chart.resize();
                }
             },20)
           }

この方法をmountedに加える

 mounted() {
            this.initChart();
            this.init() // echarts     
        },

 
(完)