关于Echarts在Vue中的使用（今天使用的时候遇到了坑，希望对跟我一样的学生有帮助）

最新推荐文章于 2023-05-18 10:46:39 发布

waiwaipark

最新推荐文章于 2023-05-18 10:46:39 发布

阅读量252

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/waiwaipark/article/details/124808990

版权

1.安装,

npm install echarts --save

2.导入

导入的时候我遇到了坑，不知道你们有不有和我遇到一样的情况，在这里使用 ES Module的方式导入不了，我这里是在mian.js里面这样写的

 import echarts from "echarts";
 Vue.prototype.$echarts = echarts;

各位小伙伴可以试试能用不

我是用CommonJS来解决的这个问题，在局部导入使用

var echarts = require("echarts");

接下来UU们可以试试在mounted钩子函数中是否能打印

mounted() {
    console.log(echarts);
   
  },

3.最后别忘了给选中的元素设置宽高

下面是我写的代码，可以参考一下

<template>
  <div class="app-container">
    <div
      class="item"
      id="main"
      style="width: 600px; height: 400px"
      ref="zzt"
    ></div>
    <div class="item" ref="bt"></div>
  </div>
</template>

<script>
import { mapGetters } from