前言
公司要求完成一个简单的报表系统,因此我使用的是比较多人使用的eCharts,然后在vue的打包项目中使用,最终实现柱状图、折线图和饼状图的显示。该文章中所讲的是在vue中导入和使用eCharts,所讲的内容也皆为浅显易懂的内容,尽管不涉及特别新或者特别复杂的内容,但是适合需求的项目才是好项目,因而简单基础的内容更应该被提及。
完成后的效果图



准备工作:
安装依赖:
jquery依赖:npm install jquery -s
echarts依赖:npm install echarts -s
查看ECharts的demo代码:
本文章以图二柱状图作为例子:


忽略第一行代码。我们可以看到整个代码中只有一个option的json数据,里面包含了数据、样式和内容显示选项选择等。那么,接下来我们开始编写代码。
编写代码:
1.引入echarts对象:
鉴于准备工作中已经通过npm安装了echarts依赖,所以可以直接在vue文件中使用代码import echarts from “echarts”引入echarts对象,如图:

2.创建一个DOM对象,将echarts对象在该DOM对象上实例化:
创建一个div,通过ref来给该div注册引用信息(即给该div元素赋予一个索引名称,然后可以通过该索引名称访问该元素),如图:

在script中创建初始化函数initChart(自定义名称),用于在元素上实例化echarts对象,将echarts对象在该div元素上显示,使用的是echarts中的函数方法init,如图:

然后this.chart就是实例化后的echarts对象,使用setOption方法修改该组件中变量,选择自己需要显示的数据和样式,如图:

网友评论