[JavaScript知识库]如何在Vue中使用echarts

安装echarts

npm install --save echarts

如出现以下错误，权限不足导致，按键盘快捷键win+x > a打开系统管理员权限的cmd
以下既是安装成功

引用echarts（全局引用）

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')

HelloWorld.vue
<template>
  <div id="char" style="width: 650px; height: 450px"></div>
</template>


<script>
export default {
  name: "Home",
  mounted() {
    const myChart = this.$echarts.init(document.getElementById("char"));
    const option = {
      title: {
        text: "echarts-入门示例",
        x: "center",
      },
      tooltip: {},
      legend: {
        top: 30,
        data: ["销量"],
      },
      xAxis: {
        type: "category",
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {
        type: "value",
      },
      series: {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    };
    myChart.setOption(option);
  },
};
</script>

运行项目

npm run serve

如果运行npm run serve报错：

Error: Cannot find module '@vue/cli-plugin-babel'
解决办法：
npm install babel-plugin-import -D

大功告成