# 前言

本文记录所学的一点可视化知识

数据可视化

Skia 是 Chrome 和 Android 的底层 2D 绘图引擎，Skia 采用 C++ 编程，由于它位于浏览器的更底层，所以我们平常接触较少。
OpenGL（Open Graphics Library）是2D、3D图形渲染库，它可以绘制从简单的2D图形到复杂的3D景象。OpenGL 常用于 CAD、VR、数据可视化和游戏等众多领域。
Chrome 使用 Skia 作为绘图引擎，向上层开放了 canvas、svg、WebGL、HTML 等绘图能力。

canvas

标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。

// 注意：必须指定宽高---canvas标签默认宽度与高度 300 * 150
// canvas标签的w|h务必通过canvas标签属性width|height设置
// 切记不能通过样式去设置画布的宽度与高度这样canvas的坐标体系会出现问题
<canvas id="charts" width="800" height="400"></canvas>

getContext()

1
2
3

// 使用 getContext() 获取 canvas 的上下文环境，目前 getContext() 的参数只有 2d，暂时还不支持 3d
const canvas = document.getElementById('charts');
const context = canvas.getContext('2d');

绘制线段

moveTo(x, y)：把路径移动到画布中的指定点，不创建线条
lineTo(x, y)：添加一个新点，然后在画布中创建从该点到最后指定点的线条

//canvas标签任何操作务必通过JS完成
//通过JS当中"笔"去完成
let canvas = document.querySelector('canvas');
//获取画布的笔【上下文】
let ctx = canvas.getContext('2d');
//绘制线段:绘制线段的起点的设置
ctx.moveTo(100,100);
//其他点的设置：可以有多个
ctx.lineTo(100,200);
ctx.lineTo(200,100);
//设置图形的填充的颜色
ctx.fillStyle = "red";
ctx.fill();
//设置线段的颜色与宽度
ctx.strokeStyle = "purple";
ctx.lineWidth="20"
//可以设置起点与最终的结束点连接在一起
ctx.closePath();
//stroke方法绘制线段
ctx.stroke();

绘制矩形

fillRect(x, y, width, height) 绘制填充颜色的矩形
strokeRect(x, y, width, height) 绘制线条的矩形

//获取DOM节点
let canvas = document.querySelector('canvas');
//获取上下文
let ctx = canvas.getContext('2d');
//绘制矩形第一种方式:参数为x、y、w、h
//这种的矩形没有办法设置填充颜色
ctx.strokeRect(100,200,100,200);
//第二种方式绘制矩形
//填充颜色可以替换
//绘制图形之前设置填充颜色
ctx.fillStyle = 'skyblue';
ctx.fill();
ctx.fillRect(300,200,100,200);

绘制圆形

arc(x, y, radius, starAngle, endAngle, anticlockwise)

x : 圆心的 x 坐标
y：圆心的 y 坐标
radius ：半径
starAngle ：开始角度
endAngle：结束角度
anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针

//获取DOM
let canvas = document.querySelector('canvas');
//获取上下文
let ctx = canvas.getContext('2d');
//绘制圆形
ctx.beginPath();
//绘制圆形的方法：x、y,r,起始弧度、结束的弧度,是否逆时针绘制
ctx.arc(100,100,50,0,2 * Math.PI,true);
//设置填充颜色
ctx.fillStyle = 'red';
ctx.fill();
//绘制圆形
ctx.stroke();

//绘制一个圆
ctx.beginPath();
ctx.arc(200,200,50,0,1,true);
ctx.stroke();

清除矩形与绘制文字

fillText(text, x, y, maxWidth)
clearRect(x, y, width, height)

<canvas width="600" height="400"></canvas>

//获取节点
let canvas = document.querySelector('canvas');
//获取上下文-笔
let ctx = canvas.getContext('2d');
//绘制矩形
ctx.fillRect(100,200,100,200);
//清除画布-整个画布被清除
//ctx.clearRect(0,0,600,400);
//清除部分画布
ctx.clearRect(100,200,50,100);
//设置文字大小
ctx.font="20px 微软雅黑";
ctx.fillStyle ='red';
//绘制文字
ctx.fillText("数据可视化",50,20);

清除路径

清除绘画的路径，多个图形就不会连接在一起

1 2	context.beginPath() context.closePath()

svg

SVG是一种基于XML的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。

基本的SVG元素

包裹并定义整个矢量图。标签之于矢量图就如同标签之于一个 web 页面。
创建一条直线。
创建折线。
创建矩形。
创建圆。
创建圆和椭圆。
创建多边形。
通过指定点以及点和点之间的线来创建任意形状。

<!-- svg双闭合标签：默认宽度与高度300 * 150  svg绘制图形务必在svg标签内部使用绘制图形 -->
<svg class="box">
  <!-- x1 y1第一个点的坐标  x2 y2 第二个点的坐标 -->
  <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
  <line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
  
  <!-- 绘制折线:可以多个点，多个点的时候，最好带有逗号 -->
  <polyline points="300 300, 50 100, 120 400,20,20" fill-opacity="0" stroke="cyan"></polyline>
  
  <!-- 绘制矩形 -->
  <!-- fill属性：设置填充颜色的  fill-opacity设置填充颜色的透明度  stroke：线的颜色 -->
  <!-- x y 左上角点坐标 width 宽度 height 高度 -->
  <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
  
  <!-- 绘制圆形 -->
  <circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'></circle>
  <!-- 绘制圆形|椭圆
       cx cy 圆心点坐标
       rx x轴半径
       ry y轴半径
  -->
  <ellipse cx="500" cy="500" rx="100" ry="50" style="fill:black;"></ellipse>
  
  <!-- 多边行 -->
  <polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0"/>
  
  <!-- 绘制任意图形
    M 移动到初始位置
    L 画线
    Z 将结束和开始点闭合
  -->
  <path fill-opacity="0" stroke="skyblue" d="
  M 10  10
  L 20 400
  L 30 120
  L 40 66
  L 50 99
  L 60 120
  L 70 99
  Z
"></path>
</svg>

echarts

多系列混合

一个echarts 实例可以包含多个图标，再series中可以写上多个

series:[    
     { 
         type:"bar",  //柱状图
         data:[],
     },
     {
         type:'line', // 折线图
         data:[]
     },
     {
         type:'pie', //饼图
         //饼图你可以显示文字，data写法如下
         data:[{name:'',value:10}]
     }
]

新特性：dataset

//基于准备好的DOM初始化echarts实例
let dom = document.querySelector('div');
//创建echarts实例
let mycharts = echarts.init(dom);
//数据集
let data = [
    ["衣服",10,22,'x',10],
    ["直播",12,55,'y',60],
    ["游戏",16,44,'z',50],
    ["电影",19,32,'t',70],
]
//指定图表的配置项与数据
mycharts.setOption({
      //设置字符集
      dataset:{
         //数据源
         source:data
      },
      //图表的标题
      title:{
          //主标题的设置
         text:'数据可视化',
         //子标题
         subtext:"echarts基本使用",
         //主标题的颜色
         textStyle:{
             color:'cyan'
         },
         //设置标题位置
         left:'center'
      },
      //x轴的配置项
      xAxis:{
          //数据
          data:["衣服",'直播','游戏','电影']
      },
      //y轴的配置项
      yAxis:{
          //显示Y轴的线
          axisLine:{
              show:true
          },
          //显示Y轴刻度
          axisTick:{
              show:true
          }
      },
      //系列的设置：绘制什么样类型的图表、数据的展示在这里设置
      series:[
       //柱状图    
           { 
               //图表类型的设置
               type:"bar",
               color:'red',
               encdoe:{
                   y:1
               }
           }
           ,
           // 折线图
           {
               type:'line',
               color:'pink',
               encode:{
                   y:2
               }
           },
           //饼图
           {
               type:'pie',
               encode:{
                   //饼图旁边的文字
                   itemName:3,
                   value:4
               }
           }
      ]
});

echarts组件

基本概念：定位、坐标系

定位：使用grid属性、坐标系：yAxis为数组写法（可有多个配置项）

// 使用grid绑定四个变量，每次改变重新调用配置项（可以使用input事件，每次改变值就重新render）
grid: [{
  left: _left,
  top: _top,
  right: _right,
  bottom: _bottom
}],

// ----------

yAxis: [{
  min: 0,
  max: 100
}, {
  min: 0,
  max: 100
}],
// yAxisIndex 表示使用哪个yAxis的对象
series: [
  { type: 'bar', seriesLayoutBy: 'row', yAxisIndex: 0 },
  { type: 'line', seriesLayoutBy: 'row', yAxisIndex: 1 }
]