峰谷图配置（面积图，基于echarts）

最新推荐文章于 2024-03-14 18:12:36 发布

「已注销」

最新推荐文章于 2024-03-14 18:12:36 发布

阅读量2.6k

点赞数 1

分类专栏：数据可视化图表配置文章标签：峰谷图面积图 echarts

本文链接：https://blog.csdn.net/qq_34295211/article/details/106828161

版权

本文介绍了如何在Vue项目中利用Echarts创建峰谷图，包括npm安装echarts，将echarts绑定到Vue原型，编写数据生成和图表配置函数，以及在模板中添加图表容器。通过实例展示了峰谷图的实现过程，并提供了动态效果。更多数据可视化配置可在相关专栏中查找。

摘要由CSDN通过智能技术生成

峰谷图或面积图也是数据可视化图表的一种常见类型。这个配置比较简单，下面就以一个销量峰谷图为例直接放效果图和代码了。下面是最终实现的效果动态图，提示框会跟随鼠标移动而确定位置：

为了有更好的适用性，这里把绘制峰谷图的操作都封装到了一个函数里面。以Vue项目为例，要完成这个峰谷图的配置所需步骤如下：

1：npm下载echarts模块。

2：在main.js文件中引入峰谷图相关的模块，并把echart主模块绑定到vue原型对象上，以便后续调用，代码如下：

// 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts')
// 引入图表
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

Vue.prototype.$chart = echarts

3. 编写时间点数据生成函数和峰谷图的配置函数，具体代码如下：

        // 时间点数据生成函数

最低0.47元/天解锁文章

峰谷图配置（面积图， 基于echarts）

峰谷图配置（面积图，基于echarts）