VScode如何在vue 的项目中使用echarts?（教你从安装vue、echarts到demo的实现）

1.在终端先安装vue-cli

npm i -g @vue/cli

2.创建vue项目：

（1）打开终端，并在当前目录创建项目：

vue create 03-demo

（2）选择默认的第一个选项：Default([Vue 3] babel,eslint)

 此时项目03-demo便安装好了

 （3）返回当前的03-demo的目录，并安装echarts

npm install echarts

（4）在安装好后加上 --save 便能在package.json里看见它

npm install echarts --save

打开package.json可查看echarts的版本

可以看到echarts是5.4.2的版本

 （5）把vue启动起来

npm run serve

 启动完成之后在src文件中打开App.vue若出现像我一样报错：

 则打开设置搜索Vetur插件找到下图中的Validation: Template 并取消勾选后重启vscode

 就没有报错啦！

 并启动vue

npm run serve

 启动完成后可在终端看见你所创建的原始vue项目

 

（6）若想把你的echarts demo（我的demo是一个统计使用前端框架的人数）放在vue的项目里面则换成以下代码：

 保存之后若像我一样报错：

 将vue.config.js中的代码替换成当前代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false
})
"eslintConfig"; {
  "rules"; {
  "vue/no-unused-components"; "off"
  }
  }

 并重启vscode，且重新让vue启动

npm run serve

（7）引入echarts,并在export default删掉components: { HelloWorld }

import * as echarts from 'echarts'

 （8）引入echarts代码：

mounted:function(){
            // 初始化绘制图表的echarts实例
            var myChart = echarts.init(document.querySelector('#demo3'))
            //指定图表的配置
        var option={
            title:{
                text:"老陈echartsDemo3"
            },
            tooltip:{}, //提示框
            // 条形图 显示不同前端框架所使用的人数
            legend:{
                data:['人数']
            },
            // 水平轴显示
            xAxis:{
                data:['vue','react','angular','jquery']
            },
            //空 默认显示数字
            yAxis:{},
            //数据写在哪 series
            series:[
                {
                    name:"人数",
                    type:"bar",
                    data:[2000,1500,500,2200]
                }
            ]
        }
        //对实例对象设置配置
        myChart.setOption(option)
  }

 （9）显示效果如下：