vue项目中使用eCharts

前言

公司要求完成一个简单的报表系统，因此我使用的是比较多人使用的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方法修改该组件中变量，选择自己需要显示的数据和样式，如图：

组件选项设定

总结：每一步讲述都是十分简单易懂的步骤，希望对大家有所帮助。