前言
公司要求完成一个简单的报表系统，因此我使用的是比较多人使用的eCharts，然后在vue的打包项目中使用，最终实现柱状图、折线图和饼状图的显示。该文章中所讲的是在vue中导入和使用eCharts，所讲的内容也皆为浅显易懂的内容，尽管不涉及特别新或者特别复杂的内容，但是适合需求的项目才是好项目，因而简单基础的内容更应该被提及。
完成后的效果图
柱状图
折线图
饼状图
准备工作：
安装依赖：
jquery依赖：npm install jquery -s
echarts依赖：npm install echarts -s
查看ECharts的demo代码：
本文章以图二柱状图作为例子：
echarts官网的Demo
echarts官网的Demo代码
忽略第一行代码。我们可以看到整个代码中只有一个option的json数据，里面包含了数据、样式和内容显示选项选择等。那么，接下来我们开始编写代码。
编写代码：
1.引入echarts对象：
鉴于准备工作中已经通过npm安装了echarts依赖，所以可以直接在vue文件中使用代码import echarts from “echarts”引入echarts对象，如图：
引入echarts对象
2.创建一个DOM对象，将echarts对象在该DOM对象上实例化：
创建一个div，通过ref来给该div注册引用信息（即给该div元素赋予一个索引名称，然后可以通过该索引名称访问该元素），如图：
用于实例化echarts的元素
在script中创建初始化函数initChart（自定义名称），用于在元素上实例化echarts对象，将echarts对象在该div元素上显示，使用的是echarts中的函数方法init，如图：
实例化echarts对象
然后this.chart就是实例化后的echarts对象，使用setOption方法修改该组件中变量，选择自己需要显示的数据和样式，如图：
组件选项设定
