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

169 阅读 0 评论 112 点赞

我是靠谱客的博主无奈小甜瓜，这篇文章主要介绍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>

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