在vue中使用echarts实现动态数据展示,以及echarts图表自适应

在平常的项目中,echarts图表我们也是使用的非常多的,通常我们从后端拿到数据,需要在图表上动态的进行呈现,接下来我们就模拟从后端获取数据然后进行呈现的方法

首先我们通过以下这条命令来安装echarts依赖

npm install echarts --save

然后在需要用到echarts的页面中进行引入

import echarts from "echarts";

需要实现的页面

在vue中使用echarts实现动态数据展示,以及echarts图表自适应_第1张图片

点击对应的按钮,切换对应的数据

在vue中使用echarts实现动态数据展示,以及echarts图表自适应_第2张图片

 具体代码如下



你可能感兴趣的:(echarts,Vue2,echarts,vue.js,前端)