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

问题:

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

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

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

最终解决效果：

代码如下

EchtTest.vue源码：

1.  
   <template>
2.  
   <div>
3.  
   <div ref="chart" style="width: 400px;height: 300px"></div>
4.  
   </div>
5.  
   </template>
6.  
   <script >
7.  
   // import * as echarts from 'echarts'
8.  
   // import {inject} from "vue";
9.  
    
10.  
    // const echarts = inject('echarts')
11.  
    export default{ // export 与其他地方要用此内容时的：import 是一对人儿。
12.  
    name:"EchtTest",
13.  
    data () {
14.  
    return {};
15.  
    },
16.  
    methods: {
17.  
    initCharts () {
18.  
    let myChart = this.$echarts.init(this.$refs.chart);
19.  
    // let myChart = echarts.init(this.$refs.chart);
20.  
    // 绘制图表
21.  
    myChart.setOption({
22.  
    title: { text: '在Vue中使用echarts' },
23.  
    tooltip: {},
24.  
    xAxis: {
25.  
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
26.  
    },
27.  
    yAxis: {},
28.  
    series: [{
29.  
    name: '销量',
30.  
    type: 'bar',
31.  
    data: [5, 20, 36, 10, 10, 20]
32.  
    }]
33.  
    });
34.  
    }
35.  
    },
36.  
    mounted () {
37.  
    this.initCharts();
38.  
    }
39.  
    }
40.  
    </script>

 App.vue源码：

1.  
   <template>
2.  
   <img alt="Vue logo" src="./assets/logo.png">
3.  
   <div>
4.  
    
5.  
   <HelloWorld msg="Welcome to Your Vue.js App"/>
6.  
   </div>
7.  
   <br/>
8.  
   <div>
9.  
   <EchtTest chart/>
10.  
    </div><br/>
11.  
    ---------------------------------------------
12.  
    <br/>
13.  
    <br/>
14.  
    </template>
15.  
     
16.  
    <script>
17.  
    // import * as echarts from 'echarts'
18.  
     
19.  
    import HelloWorld from './components/HelloWorld' //导入helloworld vue模块
20.  
    import EchtTest from './components/EchtTest.vue'
21.  
    // import {provide} from "vue";
22.  
     
23.  
    // provide('echarts',echarts)
24.  
     
25.  
    export default {
26.  
    name: 'App',
27.  
    components: {
28.  
    HelloWorld,EchtTest
29.  
    }
30.  
    }
31.  
    </script>
32.  
     
33.  
    <style>
34.  
    #app {
35.  
    font-family: Avenir, Helvetica, Arial, sans-serif;
36.  
    -webkit-font-smoothing: antialiased;
37.  
    -moz-osx-font-smoothing: grayscale;
38.  
    text-align: center;
39.  
    color: #2c3e50;
40.  
    margin-top: 60px;
41.  
    }
42.  
    </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"
  },

1.  
   {
2.  
   "name": "vuepract",
3.  
   "version": "0.1.0",
4.  
   "private": true,
5.  
   "scripts": {
6.  
   "serve": "vue-cli-service serve",
7.  
   "build": "vue-cli-service build",
8.  
   "lint": "vue-cli-service lint"
9.  
   },
10.  
    "dependencies": {
11.  
    "core-js": "^3.8.3",
12.  
    "echarts": "^5.4.0",
13.  
    "vue": "^3.2.13"
14.  
    },
15.  
    "devDependencies": {
16.  
    "@babel/core": "^7.12.16",
17.  
    "@babel/eslint-parser": "^7.12.16",
18.  
    "@vue/cli-plugin-babel": "~5.0.0",
19.  
    "@vue/cli-plugin-eslint": "~5.0.0",
20.  
    "@vue/cli-service": "~5.0.0",
21.  
    "eslint": "^7.32.0",
22.  
    "eslint-plugin-vue": "^8.0.3"
23.  
    },
24.  
    "eslintConfig": {
25.  
    "root": true,
26.  
    "env": {
27.  
    "node": true
28.  
    },
29.  
    "extends": [
30.  
    "plugin:vue/vue3-essential",
31.  
    "eslint:recommended"
32.  
    ],
33.  
    "parserOptions": {
34.  
    "parser": "@babel/eslint-parser"
35.  
    },
36.  
    "rules": {
37.  
    "vue/no-unused-components": "off",
38.  
    "no-unused-vars": "off"
39.  
    }
40.  
    },
41.  
    "browserslist": [
42.  
    "> 1%",
43.  
    "last 2 versions",
44.  
    "not dead",
45.  
    "not ie 11"
46.  
    ]
47.  
    }
48.  
     

main.js引入

1.  
   import { createApp } from 'vue'
2.  
   import App from './App.vue'
3.  
   import * as echarts from 'echarts'
4.  
   const app = createApp(App)
5.  
   app.config.globalProperties.$echarts = echarts
6.  
   app.mount('#app')

这篇好文章是转载于：学新通技术网