百度数据可视化图表Echarts使用总结

最近因项目需求,要做一些数据可视化的展示。简单研究了Echarts之后对百度产生了一点好感。

一.需求分析

需求比较简单,利用接口返回的数据,以图表的形式展现在web页面上。

二.解决方案

因为临近考试,为了迅速完成需求,我选择了百度的Echarts库来实现数据可视化图表

数据接口采用java Springboot框架搭建

本文主要介绍Echarts在Vue中的使用方法

ECharts是一款基于JavaScript数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目

1.引入Echarts

先通过npm获取

1
npm install echarts --save

之后新建一个vue组件

1
2
3
<template>
<div id="myEcharts"></div> //这里的ID是用来将echarts挂载到DOM上的
</template>

2.绘画图表

首先打开官方示例文档https://echarts.apache.org/examples/zh/index.html

选择需要的图表,之后可以看到官方已经给出了完整的代码,直接拿来使用即可,十分方便。

image-20210625154114452

打开刚才新建的vue组件,在methods下新建一个函数

1
2
3
4
5
6
7
8
9
 drawLine(){
// 导入echarts
var echarts = require('echarts')
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById(myEcharts))
// 绘制图表
myChart.setOption({
//将官网示例中的代码copy下来即可
)}

最后再在mounted生命周期函数下,调用drawLine函数即可,但是在我的项目中,由于数据是异步获取的,所以我加了监听,当数据发生变化时,再绘制图表

1
2
3
4
5
6
7
watch: {
//showData是父组件传进来的参数,curShowData是展示的数据
'showData': function (n) {
this.curShowData = n
this.drawLine();
},

3.Echarts配置结构

Echarts可配置项十分丰富,并且也十分方便,只需要修改相应字段即可

配置项手册地址:https://echarts.apache.org/zh/option.html#title

官方给出了很详细的说明,可以在短时间内做出满足自己需求的图表

在下图中,option为图表的主要结构

image-20210625154833899

xAxis:图表的x轴,category:离散的类目数据,而data则是类目

yAxis:y轴,value即为数据轴,适用于连续数据

Series下的type则是图表类型,line表示这是一个折线图

更多字段说明请查阅官方配置项手册

三.实际效果

image-20210625155353119