数据可视化
chrome使用skia作为绘图引擎，向上开放了canvas,svg,webGl,html等绘图能力
canvas
是html的新特性使用canvas元素在网页上通过js绘制图像
SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
webgl
3D绘图协议
zrender
zrender是二维绘图引擎它提供canvas,svg,vml等渲染方式,zrender也是echarts的渲染器
D3
three.js
基于 webgl 的js 3D图形库
canvas高级应用：图片压缩算法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="file" id="upload">
<script>
const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'];
const MAXSIZE = 3 * 1024 * 1024
function ImageToBase64(file, callback) {
let reader = new FileReader()
reader.addEventListener('load', function (e) {
const base64Image = e.target.result
callback && callback(base64Image)
reader = null
})
reader.readAsDataURL(file)
}
function compress(base64Image) {
let maxW = 1024
let maxH = 1024
console.log(base64Image)
const image = new Image()
image.addEventListener('load', function (e) {
let ratio;//图片的压缩比
let needCompress = false;//是否需要压缩
console.log(image.naturalWidth, image.naturalHeight)
if (maxW < image.naturalWidth) {
needCompress = true
ratio = image.naturalWidth / maxW
maxH = image.naturalHeight / ratio
}//经过处理后，实际图片的尺寸为1024*640
if (maxH < image.naturalHeight) {
needCompress = true
ratio = image.naturalHeight / maxH
maxW = image.naturalWidth / ratio
}
if (!needCompress) {
maxW = image.naturalWidth
maxH = image.naturalHeight
}//如果不需要压缩，需要图片的实际尺寸
const canvas = document.createElement('canvas')
canvas.setAttribute('id', '__compress__')
canvas.width = maxW
canvas.height = maxH
canvas.style.visibility = 'hidden'
document.body.appendChild(canvas)
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, maxW, maxH)
ctx.drawImage(image, 0, 0, maxW, maxH)
const compressImage = canvas.toDataURL('image/jpeg', 0.1)
const _image = new Image()
_image.src = compressImage
document.body.append(_image)
canvas.remove()
console.log('压缩比' + image.src.length / _image.src.length)
})
image.src = base64Image
document.body.appendChild(image)
}
const upload = document.getElementById('upload')
upload.addEventListener('change', function (e) {
const [file] = e.target.files
console.log(file)
if (!file) {
return;
}
const { type: fileType, size: fileSize } = file
if (!ACCEPT.includes(fileType)) {
alert(`不支持${fileType}`)
return
}
if (fileSize > MAXSIZE) {
alert(`文件超出1MB`)
upload.value = ""
return
}
//图片压缩
ImageToBase64(file, compress)
})
</script>
</body>
</html>
hightcharts
highcharts:js图表库
highstock:js股票图表控件
highmaps:html5地图组件
Antv
G2/G2plot
G6
L7
echarts自定义主题和svg渲染
使用canvas渲染或者svg渲染
echarts系列及多系列
一个坐标系绘制多个图
echarts4.0新特性：dataest
echarts组件
echarts定位
调节位置
grid :{
top:100,
left:"10%",
right:10,
bottom:100
}
echarts坐标系
单坐标
双坐标
多坐标
