快速构建数据可视化微服务系统（三）—— 5分钟入门Echart

通过上两篇文章就可以创建出一个简单的vue项目，为了让数据可视化，我们需要使用到可视化的工具——Echart。我们先看一下效果图：

 

​​

 

使用Echart只要几个非常简单的步骤：

 

1. 引入Echart
2. 创建容器
3. 设置图形

1、引入Echart

 

如果不是使用npm，那么需要在官网上下载Echart的包，然后放到自己的项目中，但是这里使用更加简单的npm引入的方法，只需要用到下边的命令：

 

npm install --save echarts

 

在npm安装完成之后，需要在mian.js中引入Echart的依赖：

 

 

// 引入echarts
import echarts from 'echarts'
//在vue中设置Echart
Vue.prototype.$echarts = echarts

2、创建容器

使用Echart创建图表，需要创建一个图表的容器。打开之前准备好的自定义组件，在里边创建一个div。然后配置好尺寸：长、宽，具体的代码如下：

 

<template>
  <div style="height: 400px;wi