Vue框架学习3：echarts导入

完成基本的Vue框架搭建后，网站数据可视化也是学习的重要一环，本文主要是阐述如何在Vue中导入echarts。正确的学习打开方式应该是参照官网进行学习，但是官网的导入是针对html页面，对于如何导入vue还需要做一些小幅度修改。

echarts官网链接：获取 ECharts - 入门篇 - Handbook - Apache ECharts

第一步，获取Echarts。在项目终端运行以下命令：

npm install echarts --save

tips: 在我的项目运行环境中并没有权限安装库，解决这个问题需要以管理员权限运行cmd，进入项目目录，再运行上述命令。

第二步，导入Echarts。

官网中的导入方式主要是针对html文档页面，针对vue文件，主要包括以下几步：

1. 首先在main.js中输入以下代码：

import * as echarts from 'echarts'  //导入echarts
Vue.prototype.$echarts = echarts    //挂载echarts

2. 进入需要导入图表的页面文件.vue中

2.1 设置挂载对象

2.2 声明函数（export default中，与data() ，method()同级）

mounted() {
    this.initChart()
  },

2.3 初始化挂载对象

initChart() {
      var Chart = this.$echarts.init(document.getElementById('chart'))
      var option = {
        title: { text: 'ECharts 入门示例', subtext: '', x: 'center' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      } // 根据需要填充
      Chart.setOption(option)
    },

按上述设置完成后，根据需要在echarts官网复制对应option即可。