vue+echarts+htmlCanvas

最新推荐文章于 2024-04-05 00:19:16 发布

Closure999

最新推荐文章于 2024-04-05 00:19:16 发布

阅读量635

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Xiaoxiao_Zheng/article/details/117229004

版权

本文介绍如何在Vue项目中结合ECharts绘制24小时数据图表，特别是使用xAxis的time类型来自动标注峰值，并详细阐述了数据配置和系列设置。同时，讲解了如何通过引入相关库实现ECharts图表的图片下载，满足多图导出需求。

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

vue+echarts+htmlCanvas

文章目录

vue+echarts+htmlCanvas
需求
一、echarts画图
二、下载生成图片
- 1.引入库
- 2.下载

需求

1 默认画出24小时数据；并标出峰值位置
2 导出多个echarts图，生成图片或者pdf
在这里插入图片描述

一、echarts画图

1. xAxis type 类型使用 time

2. series配置

series: [
          {
   
            name: "潮位",
            type: "line",
            itemStyle: {
   
              normal: {
   
                color: "#ff7f50",
                lineStyle: {
   
                  color: "#ff7f50"
                }
              }
            },
            data: this.list[i].tide,
            markPoint: {
   
              symbolSize: