该文介绍了如何利用JavaScript和ECharts库，在Mac环境下用VSCode开发一个基于canvas的图表，根据输入的最大值、最小值和时间间隔生成双线图（红线和黄线），通过双X轴和双Y轴处理不同密度的数据，并确保Y轴刻度线对齐，同时隐藏一个X轴以达到视觉上的共享效果。
基本需求
客户需求：使用canvas做一个这种图表根据输入的数值之类的来生成 html+js。
单价：500元。
开发工具：VS Code；开发环境：Mac；编程语言：JavaScript
技术实现
1.由于红线和黄线数据、密度不同，所以需要使用双X轴和双Y轴来实现，通过 yAxis 的 interval 配置两个Y轴刻度线对齐，通过隐藏其中一个X轴达到视觉上共用一个X轴的效果。
2.根据用户输入最大值、最小值和时间间隔，生成两组随机数据（分别对应红线和黄线）。使用 ECharts 绘制双折线图，由于红线和黄线数据、密度不同，所以需要使用双X轴和双Y轴来实现，通过 yAxis 的 interval 配置两个Y轴刻度线对齐，通过隐藏其中一个X轴达到视觉上共用一个X轴的效果。
3.效果呈现
注：原创代码， 技术：张家玮
看完技术大佬们的解题思路，有没有学到什么呢？想做兼职的来看我们的公众号哦！
我是小江，欢迎添加好友，咱们一起畅聊技术！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
