不少的项目中要使用到可视化图表，下面我来详细介绍echarts在vue中2的使用方法：

在vue中安装echarts

以vscode编辑器和vue-cli为例

1. 用vue创建项目这里一笔带过

2. 打开终端使用命令行输入

 npm i echarts--save

在package.json中可以查看到

3.为了使用的方便我们选择将在vue的原型上加入echarts
打开 main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

这样就可以各个组件中都可以用 this.$echarts的方式来使用echarts了
4.新建一个单页面应用

<template>
    <div>
        <div class="echart1">

        </div>
    </div>
</template>

类名为echart1的盒子就是我们用echarts即将渲染图的盒子
5.在methods中写对应的函数模板为下创建了一个creatEchart（）函数
这里用this.$echarts.init的方法为echarts图表挂载到对应的盒子上，盒子的查找方式采用的是JS中的常用方法document.querySelector 来选中类名为echart1的盒子。

creatEchart(){
           let myChart=this.$echarts.init(document.querySelector('.echart1'))
           myChart.setOption({

           })
           window.addEventListener('resize',function(){
				myChart.resize()
			})
       }

setOption中写你需要的图表样式，在这里我也介绍下echarts官网的图表社区：
echarts社区
打开之后 对于你想要的图表点进去有option配置项

6.我们将其中的option配置复制替换到我们的creatEchart函数的myChart.setOption({option}）如下列代码所示：

myChart.setOption({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
           })

这样就算完成了 为了我们的图表自适应问题我们可以下在函数中加入：

 window.addEventListener('resize',function(){
	myChart.resize()
})

7.为了保证我们打开页面时，图表就加载完成，我们需要在mounted()中调用creatEchart()函数
这样就大功告成了，让我们来看看成果！

注意
有些图表样式如水球图等可能会报错，根据报错发现对于一些echarts自带的函数没有找到，所以可以

import echarts from 'echarts'

这样可以解决少部分的问题，在使用echarts中还有一些提示缺少echarts的某些组件可以通过安装引入的方式

npm i XXX

来安装缺少的插件。
最后附上完成的单页面应用代码，希望可以帮到大家。

附录

<template>
    <div>
        <div class="echart1">

        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
    data() {
        return {
            
        }
    },
    mounted() {
        this.creatEchart()
    },
    methods: {
       creatEchart(){
           let myChart=this.$echarts.init(document.querySelector('.echart1'))
           myChart.setOption({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
           })
           window.addEventListener('resize',function(){
				myChart.resize()
			})
       }
    },
    watch: {
        
    },
}
</script>
<style  scoped>
.echart1{
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background-color: skyblue;
}
</style>