Vue如何引入Echarts组件-蒲公英云

Vue如何引入Echarts组件

开发环境：VueCli脚手架搭起来的vue项目
开发工具：WebStorm
技术运用：Vue、Echarts

开发流程：
**

（1）npm 导入Echarts相关js文件

npm install echarts --save

（2）在main.js文件中引入：

// 引入 echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

（3）写一个vue实例：在这里主要注意

1、可以登录echarts官网找各种案例，这里贴一个他的网址：https://echarts.apache.org/examples/zh/index.html
2、然后在vue中主要是通过this. e c h a r t s . i n i t ( t h i s . echarts.init(this. echarts.init(this.refs.charts).setOption这一句话对他进行初始化，然后就可以将echarts中的各种实例代码复制到setOption中，这样就完成了他的引用，进而你可以进行数据修改成你所想要显示的数据，这样就完成了，对了，还有还有最重要的两点！

第一要给他绑定一个div,然后初始化号他的高度、宽度

第二就是将初始化图表的方法挂载到mounted中

大家可以仔细看一下我的这个案例，大家就一目了然了！！！
<template>
    <div ref="charts" style="width: 600px;height: 600px">
    </div>
</template>
<script>
    export default {
        name: "line-echarts",
        mounted(){
          this.echartsInit();
        },
        methods:{
            echartsInit(){
                this.$echarts.init(this.$refs.charts).setOption({
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [150, 230, 224, 218, 135, 147, 260],
                            type: 'line'
                        }
                    ]
                    }
                )
            }
        }
    }
</script>
<style scoped>
</style>