價(jià)值500元的canvas圖表是什么樣的？

基本需求

1.客戶需求：使用canvas做一個(gè)這種圖表根據(jù)輸入的數(shù)值之類的來(lái)生成 html+js。

2.單價(jià)：500元。

3.開(kāi)發(fā)工具：VS Code；開(kāi)發(fā)環(huán)境：Mac；編程語(yǔ)言：JavaScript

技術(shù)實(shí)現(xiàn)

1.由于紅線和黃線數(shù)據(jù)、密度不同，所以需要使用雙X軸和雙Y軸來(lái)實(shí)現(xiàn)，通過(guò) yAxis 的 interval 配置兩個(gè)Y軸刻度線對(duì)齊，通過(guò)隱藏其中一個(gè)X軸達(dá)到視覺(jué)上共用一個(gè)X軸的效果。

2.根據(jù)用戶輸入最大值、最小值和時(shí)間間隔，生成兩組隨機(jī)數(shù)據(jù)（分別對(duì)應(yīng)紅線和黃線）。使用 ECharts 繪制雙折線圖，由于紅線和黃線數(shù)據(jù)、密度不同，所以需要使用雙X軸和雙Y軸來(lái)實(shí)現(xiàn)，通過(guò) yAxis 的 interval 配置兩個(gè)Y軸刻度線對(duì)齊，通過(guò)隱藏其中一個(gè)X軸達(dá)到視覺(jué)上共用一個(gè)X軸的效果。

3.效果呈現(xiàn)

注：原創(chuàng)代碼， 技術(shù)：張家瑋

我是小江，歡迎添加好友，咱們一起暢聊技術(shù)！