方式一 ：哪个组建中需要用到 echarts 就在该组件中直接引入

1 首先安装 echarts ：

npm install echarts --save

2 通过 import echarts from 'echarts'引入到指定组件 3 准备一个容器装要用到的echarts图表：

 <div id="main" style="width: 7.5rem;height:6rem;"></div>

4 基于准备好的dom，初始化echarts实例

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

5 指定图表的配置项和数据

里面的所有配置都是可以根据配置表进行改变的：
  var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

6 使用刚指定的配置项和数据显示图表。

 myChart.setOption(option);

总结整体代码如下所示：

<template>
    <div>
        <div id="main" style="width: 7.5rem;height:6rem;"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
}
</script>

<style>
</style>

方式二 ： 挂载在main.js的原型上（这样的方式是项目中的所有组件都可以使用）

1 在main.js引入echarts ：import echarts from 'echarts' 2 挂载 ：Vue.prototype.$echarts = echarts 总体代码和上面一样 只不过在初始化的时候有改变：

<template>
    <div>
        <div class="title">中国地图</div>
        <div id="main" style="width: 7.5rem; height:6rem;"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('main'));
        只有这里发生了改变
        var myChart = this.$echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
}
</script>

<style>
</style>

方式三 ：开发成vue的插件

利用插件的install方法将插件暴露出来 在plugins创建一个 echarts.js 文件用于配置echarts数据 1 首先引入echarts

import echarts from "echarts"

2 利用install 和 Object.defineProperties结合配置全局可用的插件

//install 方法专用在开发vue插件上
const install = function (Vue) {
    // Object.defineProperties 接受两个参数  第一个是接受配置的受体  第二个是要配置的内容  该方法有很高的优先级，方法和属性不可以随意修改
    Object.defineProperties(Vue.prototype, {
        $echarts: {
             // 在使用Object.defineProperties挂载方法的时候必须要写在get函数中才能生效
            get() {
                return {
                // 动态传入id  这里id还是前面装echarts的容器的id
                    line(id) {
                        var myChart = echarts.init(document.getElementById(id));

                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {},
                            legend: {
                                data: ['销量']
                            },
                            xAxis: {
                                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                            },
                            yAxis: {},
                            series: [
                                {
                                    name: '销量',
                                    type: 'bar',
                                    data: [5, 20, 36, 10, 10, 20]
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                }
            }
        }
    })
}

3 将自定义的插件在main.js中引入并且注册

import echarts from './views/plugins/echarts'
Vue.use(echarts)

4 在组件中使用

mounted() {
        console.log(this);
        this.$echarts.line('main')
        
    }

总结 ： 三个方法都可以使用echarts，在项目中使用哪个都可以。