【前端】vue 工程中加入 echarts 图表不显示的问题

vue 工程中加入 echarts 图表不显示的问题

一、问题原因

vue 引用 echarts 方式错误，高版本采用了低版本的引用方式

二、vue工程使用echarts

vue官方教程

1. 安装 echarts 组件

# 方法一	下载到工程目录的 node_moudles 目录 比较推荐		
npm install echarts --save
#方法二		下载到全局的包目录		（一般会出现引用问题）
npm install echarts -g

以上方式安装 echarts 包拉取时会下载最新的 echarts 组件，若想下载指定版本应该在组件名后指定版本，如下

npm install echarts@4.9,2 --save

2. 引用 echarts 组件

在 main.js 文件进行全局引用

//版本 4
import echarts from 'echarts'
//版本5
import * as echarts from 'echarts'

或针对单个 vue 组件可以使用以下方式（以下的组件加入 echarts 图表采用的便是这种引用方式）

 let echarts = require('echarts')

注意：版本不同，引入方式不同，引用方式错误会出现 js 代码中虽然增添 echarts 相关的代码，但是不会显示的问题

3. 创建 Echarts.vue 组件

将组件添加到 App.vue 中使用即可

<template>
  <div>