Vue3 引入echarts示例，不显示图表

问题:

 为是了解echarts所有在创建vue项目的HelloWorld.vue同级加了一个EchtTest.vue,但是首页一直不显示图表，最后发现是测试图表大小

 <div ref=”chart” ></div> 改成下面：

<div ref=”chart” style=”width: 400px;height: 300px”></div>

最终解决效果：

代码如下

EchtTest.vue源码：

<template>
  <div>
    <div ref="chart" style="width: 400px;height: 300px"></div>
  </div>
</template>
<script >
// import * as echarts from 'echarts'
// import {inject} from "vue";

// const echarts  = inject('echarts')
export default{  // export 与其他地方要用此内容时的：import 是一对人儿。
  name:"EchtTest",
  data () {
    return {};
  },
  methods: {
    initCharts () {
      let myChart = this.$echarts.init(this.$refs.chart);
      // let myChart = echarts.init(this.$refs.chart);
      // 绘制图表
      myChart.setOption({
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    }
  },
  mounted () {
    this.initCharts();
  }
}
</script>

 App.vue源码：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>

    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
  <br/>
  <div>
    <EchtTest chart/>
  </div><br/>
  ---------------------------------------------
  <br/>
  <br/>
</template>

<script>
// import * as echarts from 'echarts'

import HelloWorld from './components/HelloWorld' //导入helloworld vue模块
import EchtTest from './components/EchtTest.vue'
// import {provide} from "vue";

// provide('echarts',echarts)

export default {
  name: 'App',
  components: {
    HelloWorld,EchtTest
  }
}
</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>

配置的步骤：

根据网上操作教程：用最新webstorm创建一个vue3的项目，然后在webstrom下面Terminal, 安装 echarts：

npm install echarts --save

但是网络不好一直安装失败，用cnpm install echarts –save, 安装成功之后,自动更新package.json

主要是更新依赖库：

“devDependencies”: {
    “@babel/core”: “^7.12.16”,
    “@babel/eslint-parser”: “^7.12.16”,
    “@vue/cli-plugin-babel”: “~5.0.0”,
    “@vue/cli-plugin-eslint”: “~5.0.0”,
    “@vue/cli-service”: “~5.0.0”,
    “eslint”: “^7.32.0”,
    “eslint-plugin-vue”: “^8.0.3”
  },

{
  "name": "vuepract",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "echarts": "^5.4.0",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/no-unused-components": "off",
      "no-unused-vars": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
const app = createApp(App)
app.config.globalProperties.$echarts = echarts
app.mount('#app')