vue后台管理项目数据报表功能的实现

首先在vue可视化管理面板中安装echarts运行依赖。

1. 导入echarts。在使用echarts的组件中导入。

import echarts from 'echarts'

2. 为echarts准备一个具备大小的Dom。

<div id="main" style="width: 600px;height:400px;"></div>

3. 将页面上准备好的div区域初始化为echarts实例。

mounted() {
var myChart = echarts.init(document.getElementById('main'));
}

4. 指定图表的配置项和数据。
5. 展示数据，显示图表。

本项目直接接收后台数据渲染出折线图