vue vue-echartsのインストールとスクリーンの適応方法

npm i vue-echartsはmainにインストールする.jsグローバル導入import ECharts from‘vue-echarts/components/ECharts’導入require(‘echarts’);//全てのテーブルVueを導入する.コンポーネント(‘chart’,ECharts)は、コンポーネントを登録するか、必要に応じて次のようにロードします.
templateでこう書きます

  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/bar'
  import "echarts/lib/component/title.js";
  import "echarts/lib/component/legend.js";
  export default {
    name: '',
    components: {
      'mychart': ECharts
    },
 computed:{
     ying:function () {
       return {
           tooltip : {
             trigger: 'axis',
             axisPointer : {            //       ，       
               type : 'shadow'        //      ，   ：'line' | 'shadow'
             }
           },
           grid: {
             top:'10%',
             left: '8%',
             right: '4%',
             bottom: '1%',
             containLabel: true
           },
           xAxis:  {
             type: 'value'
           },
           yAxis: {
             type: 'category',
             color:['red'],
             data: ['  ','  ','  ','  ','  ','  ','  ']
           },
           series: [
             {
               name: '    ',
               type: 'bar',
               stack: '  ',
               label: {
                 normal: {
                   show: true,
                   position: 'insideRight'
                 }
               },
               data: [320, 302, 301, 334, 390, 330, 320]
             },
             {
               name: '    ',
               type: 'bar',
               stack: '  ',
               label: {
                 normal: {
                   show: true,
                   position: 'insideRight'
                 }
               },
               data: [120, 132, 101, 134, 90, 230, 210]
             },
             {
               name: '    ',
               type: 'bar',
               stack: '  ',
               label: {
                 normal: {
                   show: true,
                   position: 'insideRight'
                 }
               },
               data: [220, 182, 191, 234, 290, 330, 310]
             }
           ]
         };

適応、echartsのrefとして参照

Vue.prototype.echartsResize = function(ref){
      setInterval(() => {
        window.onresize = function () {
          ref.resize()
        }
      }, 100)
    }