vue2 echarts resize报错

一、开发环境

(一) 安装配置 Node.js

1、下载安装 Node.js

下载地址：https://nodejs.org/zh-cn/ 。

文件名：node-v16.13.1-x64.msi。

2、检测 PATH 环境变量

点击 开始运行"cmd" 。

运行 "path"C:\Program Files\nodejs\。

3、检查 Node.js 版本

运行 "node --version"v16.13.0 。

(二) 安装配置 Visual Studio Code

1、下载 Visual Studio Code

下载地址：https://code.visualstudio.com/ 。

文件名：VSCodeUserSetup-x64-1.63.0 。

2、安装 Visual Studio Code

在安装过程中，勾选 "添加到PATH" 。

3、配置语言

打开插件面板，搜索 ChineseChinese (Simplified) (简体中文) Language Pack for Visual Studio Code 。

4、安装插件

依次安装插件：HTML CSS SupportESLintVeturvue-helper 。

二、新建项目

(一) 启动命令行工具

1、右键 开始windows powershell (管理员) ，打开命令行。

2、执行 D: 命令，切换至D盘。

(二) 创建项目

依次执行以下命令：

1、执行 npm install -g @vue/clivue 客户端工具 。

2、执行 vue create dataviewDefault (Vue 3 Preview) ，然后回车安装。

三、工作区

(一) 打开项目

1、启动 Visual Studio Code 。

2、点击 文件打开文件夹dataview 文件夹。

(二) 打开终端

1、点击 查看终端 。

(三) 运行项目

1、执行 npm run serve 来运行项目。

2、启动浏览器并访问：http://localhost:8080/ 。

四、组件

(一) 新建组件

1、在 src/componentsCovid.vue 文件。

(二) 根标签

所有组件由 templatescriptstyle 三个标签组成。

template 标签内必须且只能有一个子标签。

示例代码如下：

<template>
   <div id="main"></div>
 </template>
 
 <script>
 export default {
   data() {
     return {
 
     }
   },
   mounted() {
 
   },
   methods: {
 
   }
 }
 </script>
 
 <style>
 #main { width: 600px; height: 400px; }
 </style>

(三) 注册组件

1、在 App.vue 中注册组件：

<template>
   <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
   <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
   <!-- 第3步：添加组件 -->
   <Covid />
 </template>
 
 <script>
 // import HelloWorld from './components/HelloWorld.vue'
 // 第1步：导入组件
 import Covid from './components/Covid.vue'
 
 export default {
   name: 'App',
   components: {
     // HelloWorld
     // 第2步：注册组件
     Covid
   }
 }
 </script>
 
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
 </style>

五、添加数据

(一) 添加数据文件

以下操作二选一，视情况而定：

1、在 publiccovid.json 文件，将数据拷贝并粘贴到文件中。

2、将数据文件拷贝并粘贴到 public 目录下。

(二) 配置 axios

1、点击 终端新建终端npm install axiosaxios 。（若项目中已提供，则跳过此步骤）

2、打开 main.jsaxios ：

// 旧代码：
 // import { createApp } from 'vue'
 // import App from './App.vue'
 
 // createApp(App).mount('#app')
 
 // 新代码：
 import { createApp } from 'vue'
 import App from './App.vue'
 
 const app = createApp(App)
 
 // 全局注册axios
 import axios from 'axios'
 app.config.globalProperties.$http = axios
 
 app.mount('#app')

(三) 读取数据

1、在 Covid.vuecovid.json 数据。

<script>
 export default {
   mounted() {
     this.loadData()
   },
   methods: {
     loadData() {
       // 发起get请求，真实场景中将路径更换为webapi地址
       this.$http.get('covid.json', {})
         .then((res) => {
           // 输出读取到的数据
           console.log(res.data)
         })
     }
   }
 }
 </script>

2、此时刷新 http://localhost:8080/Console 控制台输出的数据。

六、配置图表

(一) 配置 echarts

1、拷贝 echarts.min.jspublic 目录下。

2、在 Covid.vueecharts ：

<script>
 // 第1步：导入echarts
 const echarts = require('../../public/echarts.min.js')
 export default {
   mounted() {
     this.loadData()
   },
   methods: {
     loadData() {
       // 发起get请求，真实场景中将路径更换为webapi地址
       this.$http.get('covid.json', {})
         .then((res) => {
           // 输出读取到的数据
           console.log(res.data)
           // 第2步：图表默认配置
           const option = {
             title: {
               text: '新冠数据统计'
             },
             legend: {
               data: ['Email', 'Union Ads', 'Video Ads']
             },
             xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
             },
             yAxis: {
               type: 'value'
             },
             series: [
               {
                 name: 'Email',
                 type: 'line',
                 stack: 'Total',
                 data: [120, 132, 101, 134, 90, 230, 210]
               },
               {
                 name: 'Union Ads',
                 type: 'line',
                 stack: 'Total',
                 data: [220, 182, 191, 234, 290, 330, 310]
               },
               {
                 name: 'Video Ads',
                 type: 'line',
                 stack: 'Total',
                 data: [150, 232, 201, 154, 190, 330, 410]
               }
             ]
           }
           // 第3步：渲染图表
           var chartDom = document.getElementById('main')
           var myChart = echarts.init(chartDom)
           myChart.setOption(option)
         })
     }
   }
 }
 </script>

(二) 转换数据

1、生成 legendxAxisseries 中所需求的数据，更新配置：

<script>
 // 第1步：导入echarts
 const echarts = require('../../public/echarts.min.js')
 export default {
   mounted() {
     this.loadData()
   },
   methods: {
     loadData() {
       // 发起get请求，真实场景中将路径更换为webapi地址
       this.$http.get('covid.json', {})
         .then((res) => {
           // 输出读取到的数据
           console.log(res.data)
           // 第2步：图表默认配置
           const option = {
             title: {
               text: '新冠数据统计'
             },
             legend: {
               data: ['Email', 'Union Ads', 'Video Ads']
             },
             xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
             },
             yAxis: {
               type: 'value'
             },
             series: [
               {
                 name: 'Email',
                 type: 'line',
                 stack: 'Total',
                 data: [120, 132, 101, 134, 90, 230, 210]
               },
               {
                 name: 'Union Ads',
                 type: 'line',
                 stack: 'Total',
                 data: [220, 182, 191, 234, 290, 330, 310]
               },
               {
                 name: 'Video Ads',
                 type: 'line',
                 stack: 'Total',
                 data: [150, 232, 201, 154, 190, 330, 410]
               }
             ]
           }
           // 第4步：生成数据
           var legendArr = ['累计确诊总数', '累计出院', '接受医学观察']
           var xaxisArr = []
           var ljqzzsArr = []
           var ljcyArr = []
           var jsyxgcArr = []
           var dataArr = res.data.data
           for (var i = 0; i < dataArr.length; i++) {
             xaxisArr.push(dataArr[i].jzrq)
             ljqzzsArr.push(dataArr[i].ljqzzs)
             ljcyArr.push(dataArr[i].ljcy)
             jsyxgcArr.push(dataArr[i].jsyxgc)
           }
           // 第5步：更新配置
           option.legend.data = legendArr
           option.xAxis.data = xaxisArr
           option.series[0].name = '累计确诊总数'
           option.series[0].