数据可视化
灵感胜于汗水 Lv5
  2022-03-20 22:45:45 2022-03-20 22:45      1.9k 字  

canvas

canvas基本使用

canvas标签

1
2
3
4
5
6
7
<!--canvas：画布，html5新增-->
<!--有默认宽高：300 * 150-->
<!--浏览器默认canvas标签是一张图片-->
<!--给canvas添加文本和子节点无效-->
<!--需要通过js操作画布显示内容-->
<!--不要通过样式设置canvas的宽高，而通过标签的属性来设置-->
<canvas width="500px" height="300px"></canvas>

通过js操作canvas

1
2
3
4
5
6
7
8
9
10
11
12
13
let canvas = document.querySelector('canvas')
// 获取画布上下文
let ctx = canvas.getContext('2d')
// 绘制线段(起点)
ctx.moveTo(100, 200)
ctx.lineTo(200, 250)//终点（第二个点）
ctx.lineTo(150, 300)//第三点
ctx.closePath()//连接起点和第三个点
ctx.fillStyle = 'red'//设置填充的颜色
ctx.fill()//填充
ctx.strokeStyle = 'blue'//设置线段颜色
ctx.lineWidth = '5'//设置线段宽度
ctx.stroke()//画出线/三角形边框

绘制矩形

1
2
3
4
5
6
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
//绘制矩形：参数为 左上点坐标和宽高
ctx.strokeRect(100,200,300,100)
//填充矩形：默认黑色
ctx.fillRect(100,400,300,100)

绘制圆形

1
2
3
4
5
6
7
8
9
10
11
12
13
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
//开始绘制圆形
ctx.beginPath()
//画圆:arc(x,y,r,sAngle,eAngle,counterclockwise);
//x,y:圆心，r：半径，sAngle：起始弧度，eAngle：结束弧度，(0到2PI绘制一个完整的圆)
//counterclockwise：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
ctx.arc(300, 200, 100, 0, 2 * Math.PI)
//设置填充颜色
ctx.fillStyle = 'red'
ctx.fill()
//完成绘制
ctx.stroke()

清除画布与绘制文字

1
2
3
4
5
6
7
8
9
10
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
ctx.fillRect(200,100,300,200)
//清除画布(一个矩形范围内)
ctx.clearRect(0,0,700,500)
//设置字体
ctx.font='20px 微软雅黑'
ctx.fillStyle='red'//文字颜色
//绘制文字(参数：文本内容和起始位置)
ctx.fillText('数据可视化',50,20)

svg

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--默认宽高：300*150,可通过样式设置宽高-->
<!--在svg内部使用相应的标签绘图-->
<svg class="box">
  <!--画线:属性包括两点的坐标，stroke：线的颜色（必选），stroke-width：线的宽度-->
  <line x1="100" y1="100" x2="200" y2="300" stroke="red" stroke-width="5"></line>
  <!--折线：points：各个点的坐标-->
  <!--会自动填充颜色（黑色），fill-opacity：填充颜色透明度-->
  <polyline points="300 300,50 100,120 400" stroke="green" fill-opacity="0"></polyline>
  <!--矩形：默认填充黑色,fill:设置填充颜色-->
  <rect x="400" y="200" width="150" height="50" fill="pink"></rect>
  <!--圆形：自动填充黑色，style：设置样式，r：半径，cx、cy：圆心坐标-->
  <circle r="50" cx="100" cy="100" style="stroke: skyblue;fill: none"></circle>
  <!--椭圆：rx：水平半径，ry：垂直半径-->
  <ellipse rx="100" ry="50" cx="400" cy="400" style="stroke: skyblue;fill: none"></ellipse>
  <!--多边形-->
  <polygon points="300 100,400 200,350 300" stroke="blue" fill="none"></polygon>
  <!--任意图形-->
  <!--d:M:起点，L：线终点，Z：连接起点-->
  <path d="M 10 10 L 120 70 L 30 140 L 60 340 L 432 110 Z" fill="none" stroke="red"></path>
</svg>

ECharts

ECharts官网

引入ECharts

1
2
<!--引入ECharts-->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>

import引入：

1
import * as echarts from 'echarts'

基本使用

1
2
<!--准备一个容器-->
<div style="width: 800px;height: 500px" id="main"></div>

初始化echarts实例：

1
const myCharts = echarts.init(document.getElementById('main'));

绘制柱状图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
myCharts.setOption({
  //标题
  title:{
    text:'数据可视化',//主标题
    subtext:'echarts基本使用',//副标题
    textAlign:'center',//居中对齐
    left:'center',//title 组件离容器左侧的距离。
  },
  //x轴配置
  xAxis:{
    //数据
    data:['衣服','食品','游戏','电影'],
  },
  //y轴配置
  yAxis: {
    axisLine:{//线
      show:true
    },
    axisTick:{//刻度
      show:true
    }
  },
  //系列的设置：图表的类型和数据
  series:[
    {
      //图标类型
      type:'bar',//bar：柱状图，line：折线图
      data:[10,30,40,20],//数据
      color:'pink',//颜色
    }
  ]
})

一个容器显示多个图表

在series中配置多个图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
series: [
      {
        //图标类型
        type: 'bar',//bar：柱状图，line：折线图
        data: [10, 30, 40, 20],//数据
        color: 'pink',//颜色
      },
      {
        type: 'line',
        data: [10, 30, 40, 20],//数据
        color: 'gray'
      },
      {
        type: 'pie',//pie:饼图
        data: [{name: '衣服', value: 10}, {name: '食品', value: 30}, {name: '游戏', value: 40}, {name: '电影', value: 20}],
        width: 300,//包括文字内容的大小范围
        height: 150,
        left: 500,//距离左侧的距离
        radius: 50,//半径
      }
    ]

dataset数据集

准备数据集（二维数组）

1
2
3
4
5
6
7
//数据集
const data = [
  ['衣服', 10, 20, '饮料', 22],
  ['食品', 30, 10, '电器', 44],
  ['游戏', 40, 40, '小说', 11],
  ['电影', 20, 30, '音乐', 33],
]

在echarts的配置对象中设置字符集

1
2
3
4
5
//设置字符集
dataset:{
  //数据源
  source:data,
},

xxxxxxxxxx26 1//序列化2var serialize = function (root) {3  if (!root) return ‘#‘4  let result = root.val + ‘‘5  result += serialize(root.left)6  result += serialize(root.right)7  return result8};9​10//反序列化11var deserialize = function (data) {12  const arr = data.split(‘_’)13​14  function createTree(arr) {15    const val = arr.shift()16    if (val === ‘#’) {17      return null18   }19    const head = new TreeNode(val)20    head.left = createTree(arr)21    head.right = createTree(arr)22    return head23 }24​25  return createTree(arr)26};js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
series: [
  {
    //图标类型
    type: 'bar',//bar：柱状图，line：折线图
    // data: [10, 30, 40, 20],//数据
    color: 'pink',//颜色
    encode: {
      x: 0,
      y: 1,
    }
  },
  {
    type: 'line',
    // data: [10, 30, 40, 20],//数据
    color: 'gray',
    encode: {
      x: 0,
      y: 2,
    }
  },
  {
    type: 'pie',//pie:饼图
    // data: [{name: '衣服', value: 10}, {name: '食品', value: 30}, {name: '游戏', value: 40}, {name: '电影', value: 20}],
    width: 300,//包括文字内容的大小范围
    height: 150,
    left: 500,//距离左侧的距离
    radius: 50,//半径
    encode: {
      //饼图旁边的文字
      itemName: 3,
      value: 4,
    }
  }
]

组件

提示组件

1
2
3
4
5
6
7
//提示组件(鼠标悬浮时显示)
tooltip:{
  textStyle:{
    //文字颜色
    color:'red'
  }
}

系列切换组件

给图表添加name属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
series: [
  {
    name:'柱状图',
    type: 'bar',
    encode: {
      x: 0,
      y: 1,
    }
  },
  {
    name:'折线图',
    type: 'line',
    encode: {
      x: 0,
      y: 2,
    }
  },
],
//系列切换组件
legend:{
  data:['柱状图','折线图'],
  right: '20%'
}

工具栏组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 工具栏组件
toolbox: {
  show: true,
  feature: {
    dataZoom: {
      yAxisIndex: "none"
    },
    dataView: {
      readOnly: false
    },
    magicType: {
      type: ["line", "bar"]
    },
    restore: {},
    saveAsImage: {}
  }
},

双坐标

两个x轴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
myCharts.setOption({
  title: {
    text: 'echarts坐标系',
    left: 'center',
    textAlign: 'center',
  },
  //多个坐标系，使用数组
  xAxis: [
    {
      data: ['衣服', '食品', '游戏', '电影'],
    },
    {},
  ],
  yAxis: {},
  series: [
    {
      type: 'scatter',//散点图
      data: [
        [11, 87],
        [34, 45],
        [64, 23],
        [43, 54],
        [12, 40],
      ],
      xAxisIndex: 1,//使用第二个x轴
    },
    {
      type: 'bar',
      data: [10, 30, 40, 20],
      xAxisIndex: 0,//使用第一个x轴
    }
  ]
})
  • 本文标题：数据可视化
  • 本文作者：灵感胜于汗水
  • 创建时间：2022-03-20 22:45:45
  • 本文链接：https://cjhsyc.github.io/2022/03/20/数据可视化/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！