Vue中引入echarts

二者的区别（精简）

全局引入echarts并使用
1、在main.js中添加
// 导入echarts（最新）
import * as echarts from 'echarts'; 
// 并设置对应的属性
Vue.prototype.$echarts = echarts; 

2、在需要使用的组件中
var myChart = this.$echarts.init(this.$refs.chart);

3、注意，图表的名字要和在template中定义的一致，都是chart
        <div ref="chart" id="chart" style="width: 100%;height:400px;"></div>

4、其它的option 代码按照自己的需求在官网上直接改，并加上其它想要添加的部分

5、要在methods方法中初始化option 代码，并在此之前钩子函数mounted()，加载init()方法，确保dom元素已经挂载到页面中。
  mounted(){
    this.$nextTick(function(){
      this.init()
    })
  },
       // 基于准备好的dom，初始化echarts实例
      //  因为我的echarts在main.js入口文件里写，所以这里要用this代表Vue对象，并引用$echarts，属性，初始化echarts实例
       
  methods:{
    init(){。。。
    }
}

---

单个组件引入echarts并使用
1、直接在单个组件引入
import * as echarts from 'echarts'; 
2、var myChart = echarts.init(document.getElementById('chart'));
3、图表名字、修改
4、钩子函数mounted()和methods方法同上

若有不懂，看以下案例！

方法一：一个组件单独引入Vue

以下是伪代码

<template>
  <div class="home">
    <!-- 响应式布局+一般布局-->
    <!-- 现需要循环展示出script打开的多张图片地址，使用v-for  gutter代表图表之间的间隔-->
    <el-row :gutter="20">
      <!-- 引入图表，并进行响应式布局 -->         
      <!-- 较好的init方式，采用ref方式，而非原生的document.getElementById -->
      <el-col :span="24">
        <div ref="chart" id="chart" style="width: 100%;height:400px;"></div>
      </el-col>
      <!-- 其对应的逻辑写在script的methods方法中，并添加一个init()方法，记得改echarts对应图表的名字以及一些想要修改的代码 -->
    </el-row>
  </div>
</template>

<script>

// 引入echarts,之前也需要下载安装echarts
import * as echarts from 'echarts';
export default {
  name: 'home',
  data(){
    return {
      // 必须要加上require来解析当前的图片地址
      items:[
        require('../assets/1.webp'),
        require('../assets/2.webp'),
        require('../assets/3.webp'),
        require('../assets/4.webp')
      ]
    }
  },
  //  添加生命周期——钩子函数 加载init()方法
  // 在生命周期中实例化echarts对象（确保dom元素已经挂载到页面中）可以加一个nextTick
  mounted(){
    this.$nextTick(function(){
      this.init()
    })
  },
       // 基于准备好的dom，初始化echarts实例
      //  因为我的echarts在main.js入口文件里写，所以这里要用this代表Vue对象，并引用$echarts，属性，初始化echarts实例  
  methods:{
    init(){
        // 若是echarts只想在当前页面引用，可以直接引入，然后修改即可！
        var myChart = echarts.init(document.getElementById('chart'));
        // 以下全局，我引入echarts属性（若是多个页面需要引入echarts的话，一定要在main.js中引入
        // var myChart = this.$echarts.init(this.$refs.chart);
        // 指定图表的配置项和数据
        var option = {
        tooltip: {
        trigger: 'item'
     },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  },  
  // components: {
  //   HelloWorld
  // }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
</style>

方法二：Vue全局引入echarts

需要写在main.js中

import Vue from 'vue'

import ElementUI from 'element-ui';

import App from './App.vue'
import router from './router'
import store from './store'
// import echarts from 'echarts' 需要采用下面的这种写法
// 这些依赖文件，全部放置在node_modules中，而添加--save是将这些包添加进入package.json之中了
// 打包进入的生产环境和开发环境
// import * as echarts from 'echarts'; 
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false
// Vue.prototype.$echarts = echarts; 

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

有模块需要调用echarts对象时，需要如下写法

template标签中
      <el-col :span="24">
        <div ref="chart" id="chart" style="width: 100%;height:400px;"></div>
      </el-col>

script标签中
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import * as echarts from 'echarts';
export default {
  name: 'home',
  data(){
    return {
      // 必须要加上require来解析当前的图片地址
      items:[
        require('../assets/1.webp'),
        require('../assets/2.webp'),
      ]
    }
  },
  //   添加生命周期——钩子函数 加载init()方法（必须写在methods方法之前）
  // 在生命周期中实例化echarts对象（确保dom元素已经挂载到页面中）可以加一个nextTick
  mounted(){
    this.$nextTick(function(){
      this.init()
    })
  },
  methods:{
    init(){
        // 以下全局，我引入echarts属性（若是多个页面需要引入echarts的话，一定要在main.js中引入
        var myChart = this.$echarts.init(this.$refs.chart);
        // 指定图表的配置项和数据
        var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  },  
  // components: {
  //   HelloWorld
  // }
}
</script>