数据可视化

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

echarts自定义主题和svg渲染

在这里插入图片描述
使用canvas渲染或者svg渲染

echarts系列及多系列

一个坐标系绘制多个图

echarts4.0新特性：dataest

echarts组件

echarts定位

调节位置

grid :{
  top:100,
  left:"10%",
  right:10,
  bottom:100
}

echarts坐标系

单坐标
双坐标
多坐标

在这里插入图片描述

数据报表项目

项目初始化
安装element : vue add element 直接配置按需加载