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>

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

初始化echarts实例时，全局引入是this.$echarts.init()，按需引入是echarts.init()

最后

以上就是无奈小甜瓜为你收集整理的echarts全局引入和局部引入方式的全部内容，希望文章能够帮你解决echarts全局引入和局部引入方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。