Vue2.0安装Echarts

1.在vue项目终端使用npm安装

npm install echarts --save

2.在main.js里引入

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

3.在准备好的容器里创建<div>并赋高度和宽度和id

<!-- 柱状图 -->
<div id="main" style="height: 290px; width: 550px;"></div>

4.在methods里创建一个函数,并且将表格图代码复制粘贴进去

        // 柱状图
        initCharts(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                text: '月销量'
                },
                // 提示框
                tooltip: {},
                // 图例
                legend: {
                data: ['销量']
                },
                // 表示x轴坐标
                xAxis: {
                data: ['oppo', 'vivo', 'iphone', '小米', '三星', '魅族']
                },
                // 表示y轴坐标
                yAxis: {},
                // 
                series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [3500, 2200, 4500, 6500, 200, 3000]
                }
                ]
            };
            myChart.setOption(option);
        },

然后创建一个mounted()生命周期,在里面调用函数

    mounted () {
        this.initCharts()
}

效果: