echarts全局引入和局部引入方式

最新推荐文章于 2024-10-28 20:01:15 发布

原创最新推荐文章于 2024-10-28 20:01:15 发布 · 5.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #javascript #前端 #vue

本文详细介绍了如何在项目中通过npm安装并正确引入ECharts库，包括全局引入的Vue挂载和按需引入的组件级使用方法。重点强调了初始化echarts实例时的全局与按需区别，避免常见错误。

想要使用echarts首先要下载依赖，项目文件夹根目录下打开cmd输入指令

npm install --save echarts

接下来是两种引用方式

echarts全局引入步骤：

1、在main.js中写入如下代码（注意引入是require不是import）

const echarts =require('echarts')
Vue.prototype.$echarts = echarts

2、使用

var myChart = this.$echarts.init(document.getElementById('main'));

echarts按需引入步骤：

1、在需要引用的组件写入如下代码

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    //获取需要操作的dom模板
    var chartDom = document.getElementById("main");
    //注意此处与全局不同
    var myChart = echarts.init(chartDom);

    var option;
    option ={xxxxxx}
     }
</script>

最容易出错的地方！！！一定要注意！！！