前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >价值500元的canvas图表是什么样的?

价值500元的canvas图表是什么样的?

原创
作者头像
小江说技术
发布2023-02-13 02:57:14
4820
发布2023-02-13 02:57:14
举报

基本需求

  1. 客户需求:使用canvas做一个这种图表根据输入的数值之类的来生成 html+js。

2.单价:500元。

3.开发工具:VS Code;开发环境:Mac;编程语言:JavaScript

技术实现

1.由于红线和黄线数据、密度不同,所以需要使用双X轴和双Y轴来实现,通过 yAxis 的 interval 配置两个Y轴刻度线对齐,通过隐藏其中一个X轴达到视觉上共用一个X轴的效果。

2.根据用户输入最大值、最小值和时间间隔,生成两组随机数据(分别对应红线和黄线)。使用 ECharts 绘制双折线图,由于红线和黄线数据、密度不同,所以需要使用双X轴和双Y轴来实现,通过 yAxis 的 interval 配置两个Y轴刻度线对齐,通过隐藏其中一个X轴达到视觉上共用一个X轴的效果。

3.效果呈现

注:原创代码, 技术:张家玮

看完技术大佬们的解题思路,有没有学到什么呢?

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档