[JavaScript知识库]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.$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>

完结，撒花！！