数据可视化

最新推荐文章于 2024-05-13 12:05:53 发布
最新推荐文章于 2024-05-13 12:05:53 发布
阅读量2.1k 收藏 12
点赞数 2
文章标签： 人工智能 几何学 计算机视觉
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46403734/article/details/122236328
版权

一、数据可视化应用场景

什么是数据可视化？

基本概念

::: tip
数据可视化，是关于数据视觉表现形式的科学技术研究
:::

这个概念向我们传达了两个信息：

  • 数据可视化是一门学科
  • 数据可视化与数据和视觉有关

数据可视化简单理解，就是将数据转换成易于人员辨识和理解的视觉表现形式，如各种 2D 图表、3D 图表、地图、矢量图等等，随着技术的不断进步，数据可视化的边界也在不断扩大

数据可视化的发展历史

起源

数据可视化起源于 20 世纪 60 年代诞生的计算机图形学

::: tip
计算机图形学(Computer Graphics，简称CG)是一种使用数学算法将二维或三维图形转化为计算机显示器的栅格形式的科学
:::

计算机图形学广泛应用于各个领域，深刻影响和改变着我们的生活。

计算机图形学应用领域

如果你想学习计算机图形学，可以从这里入门

数据可视化

在获得计算机图形学发展后，先后经历了科学可视化、信息可视化和数据可视化三个阶段，最初由科研人员提出科学建模和数据的可视化需求，在进入 20 世纪 90 年代后，出现大量单机数据可视化需求，EXCEL 是这个时期的代表，互联网时代各种产品兴起，大数据爆发式增长，促使数据可视化技术飞速发展

数据可视化应用场景

简单应用

特点
  • 单机离线
  • 数据量小、维度少
典型应用

  • Excel
    excel

  • XMind
    xmind

  • Visio
    visio

  • OminiGraffle
    omini

复杂应用

特征
  • 互联网应用
  • 数据量大，维度多
典型应用
  • 数据大屏

screen

  • 数据报表

report

  • 地图

map

数据可视化发展前景

发展趋势

  • 逐步成为前端工程师的标准技能
  • 具备可大大增长自身的竞争力
  • 未来具有广阔的发展前景
    • 数据可视化产品化或服务化，类似阿里云 datav、腾讯 云图
    • 往其他绘图领域发展，如浏览器游戏、3D 绘图、绘图工具等等

岗位需求

让我们通过一组招聘信息来看看具备了数据可视化技能有多受欢迎

  • 小米数据可视化岗位

可视化岗位1

  • 京东高薪前端岗位加分项

可视化岗位2

  • VIPKIDS高薪前端岗位加分项

可视化岗位2

数据可视化前端技术选型

数据可视化解决方案

前端数据可视化解决方案如下：

可视化解决方案

Skia

Skia 是 Chrome 和 Android 的底层 2D 绘图引擎，具体可参考百度百科，Skia 采用 C++ 编程，由于它位于浏览器的更底层，所以我们平常接触较少

对底层绘图感兴趣的同学可以从这个案例入手，了解一下 C++ 的可视化编程。

OpenGL

OpenGL（Open Graphics Library）是2D、3D图形渲染库，它可以绘制从简单的2D图形到复杂的3D景象。OpenGL 常用于 CAD、VR、数据可视化和游戏等众多领域。

Chrome

Chrome 使用 Skia 作为绘图引擎，向上层开放了 canvas、svg、WebGL、HTML 等绘图能力。

二、canvas

canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。

canvas标签

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

注意：必须指定宽高

<canvas id="charts" width="800" height="400"></canvas>

getContext()

context 是一个封装了很多绘图功能的对象，我们在页面中创建一个 canvas 标签之后，首先要使用 getContext() 获取 canvas 的上下文环境，目前 getContext() 的参数只有 2d，暂时还不支持 3d

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

const canvas = document.getElementById('charts');
const context = canvas.getContext('2d');//--->画笔

绘制线段

  • moveTo(x, y)：把路径移动到画布中的指定点，不创建线条
  • lineTo(x, y)：添加一个新点，然后在画布中创建从该点到最后指定点的线条
context.strokeStyle = 'yellowgreen';
context.moveTo(0, 0);
context.lineTo(100, 100);
context.stroke();

绘制矩形

  • fillRect(x, y, width, height) 绘制填充颜色的矩形
  • strokeRect(x, y, width, height) 绘制线条的矩形
context.fillStyle = "pink";
context.strokeStyle = "darkred";
context.fillRect(0, 0, 100, 100);
context.strokeRect(120, 0, 100, 100);

绘制圆形

  • arc(x, y, radius, starAngle, endAngle, anticlockwise)
    • x : 圆心的 x 坐标
    • y：圆心的 y 坐标
    • radius ： 半径
    • starAngle ：开始角度
    • endAngle：结束角度
    • anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针
context.beginPath();
context.arc(300, 350, 100, 0, Math.PI * 2, true);
//不关闭路径路径会一直保留下去
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill(); 
// 或
// context.stroke(); // 此时就会有问题

清除路径

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

context.beginPath()
context.closePath()

清除矩形区域

当在一个画布反复绘制图形，需要将上一次的图形清空

  • clearRect(x, y, width, height)

绘制文字

  • fillText(text, x, y, maxWidth)

案例：绘制一个柱状图

::: tip
一个少女心满满的例子带你入门 Canvas
:::

三、svg

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

基本的 SVG 元素

你可以深入 SVG 复杂的细节，但这对我们即将创建的图标不是必须的。以下列表涵盖了我们将用到的构建块。

  • <svg> 包裹并定义整个矢量图。<svg> 标签之于矢量图就如同 <html> 标签之于一个 web 页面。

  • <line> 创建一条直线。

  • <polyline> 创建折线。

  • <rect> 创建矩形。

  • <circle> 创建圆。

  • <ellipse> 创建圆和椭圆。

  • <polygon> 创建多边形。

  • <path> 通过指定点以及点和点之间的线来创建任意形状。

详细使用

所有标签都要包裹在 <svg> 中使用

  1. <line>
<!-- 
  x1 y1 是第一个点坐标
  x2 y2 是第二个点坐标
 -->
<line x1="" y1="" x2="" y2=""></line>
  1. <polyline>
<!-- 
  依次传入点坐标，即可绘制
 -->
<polyline points="
  x1 y1
  x2 y2
  x3 y3
  ...
"></polyline>
<!-- 你也可以把上面的代码写成： -->
<polyline points="x1 y1, x2 y2, x3 y3"></polyline>
<!-- 或 -->
<polyline points="x1 y1 x2 y2 x3 y3"></polyline>
  1. <rect>
<!-- 
  x y 左上角点坐标
  width 宽度
  height 高度
 -->
<rect x="" y="" width="" height=""></rect>
  1. <circle>
<!--  
  cx cy 圆心点坐标
  r 半径
  style 样式
-->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
  1. <ellipse>
<!-- 
  cx cy 圆心点坐标
  rx x轴半径
  ry y轴半径
 -->
<ellipse cx="" cy="" rx="" ry="" style="fill:black;"></ellipse>
  1. <polygon>
<polygon points="x1 y1, x2 y2, x3 y3" />
  1. <path>
<!--
  M 移动到初始位置
  L 画线
  Z 将结束和开始点闭合
-->
<path d="
  M x1 y1
  L x2 y2
  L x3 y3
  L x4 y4
  L x5 y5
  L x6 y6
  L x7 y7
  Z
"></path>

起始文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hand Coded SVG</title>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      background: #e9e9e9;
    }

    body {
      margin: 0;
      text-align: center;
    }

    .grid {
      width: 750px;
      height: 500px;
      margin: 0 auto;
      padding-top: 100px;
      padding-left: 100px;
      background-image: url('grid.png');
      position: relative;
    }

    .grid::before {
      content: "";
      border-left: 1px solid #7c7cea;
      position: absolute;
      top: 0;
      left: 100px;
      width: 750px;
      height: 600px;
    }

    .grid::after {
      content: "";
      border-top: 1px solid #7c7cea;
      position: absolute;
      top: 100px;
      left: 0;
      width: 850px;
      height: 500px;
    }

    svg {
      stroke: #000;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
  </style>
</head>

<body>

  <div class="grid">

  </div>

</body>

</html>

::: tip

四、ECharts 基本概念

echarts官网

ECharts 入门

入门案例：销售柱状图

::: details

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      chart.setOption({
        title: {
          text: '快速入门ECharts开发'
        },
        xAxis: {
          data: ['食品', '数码', '服饰', '箱包']
        },
        yAxis: {},
        series: {
          type: 'bar',
          data: [100, 120, 90, 150]
        }
      })
    </script>
  </body>
</html>

:::

思考：ECharts 的绘图流程是怎样的？

::: details

  1. 引入 js 库
  2. 编写渲染容器 DOM，添加 width 和 height 样式属性
  3. 获取渲染 DOM 对象
  4. 初始化 ECharts 对象
  5. 编写 option 参数
  6. 调用 setOption 完成渲染
    :::

进阶案例：多 ECharts 实例

::: details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 300px;
      }
      #chart2 {
        width: 800px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div>这是第一个 echarts 图表</div>
    <div id="chart"></div>
    <div>这是第二个 echarts 图表</div>
    <div id="chart2"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chartDom2 = document.getElementById('chart2')
      const chart = echarts.init(chartDom)
      const chart2 = echarts.init(chartDom2)
      const option1 = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }]
      };
      const option2 = {
        legend: {
          data: ['高度(km)与气温(°C)变化关系']
        },
        tooltip: {
          trigger: 'axis',
          formatter: 'Temperature : <br/>{b}km : {c}°C'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        yAxis: {
          type: 'category',
          axisLine: {onZero: false},
          axisLabel: {
            formatter: '{value} km'
          },
          boundaryGap: false,
          data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
        },
        series: [{
          name: '高度(km)与气温(°C)变化关系',
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 3,
            shadowColor: 'rgba(0,0,0,0.4)',
            shadowBlur: 10,
            shadowOffsetY: 10
          },
          data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        }]
      }
      chart.setOption(option1)
      chart2.setOption(option2)
    </script>
  </body>
</html>

:::

ECharts 基本概念: 系列

系列（series）是指：一组数值映射成对应的图

系列

案例：多系列混合

::: details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        xAxis: {
          data: ['一季度', '二季度', '三季度', '四季度']
        },
        yAxis: {},
        series: [{
          type: 'pie',
          center: ['65%', 60],
          radius: 35,
          data: [{
            name: '分类1', value: 50
          }, {
            name: '分类2', value: 60
          }, {
            name: '分类3', value: 55
          }, {
            name: '分类4', value: 70
          }]
        }, {
          type: 'line',
          data: [100, 112, 96, 123]
        }, {
          type: 'bar',
          data: [79, 81, 88, 72]
        }]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

:::

ECharts 4.0 新特性：dataset

ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性能将逻辑和数据分离，带来更好的复用，并易于理解。

系列2

案例：dataset 移植

::: details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        xAxis: {
          type: 'category'
        },
        yAxis: {},
        dataset: {
          source: [
            ['一季度', 79, 100, '分类1', 50],
            ['二季度', 81, 112, '分类2', 60],
            ['三季度', 88, 96, '分类3', 55],
            ['四季度', 72, 123, '分类4', 70],
          ]
        },
        series: [{
          type: 'pie',
          center: ['65%', 60],
          radius: 35,
          encode: { itemName: 3, value: 4 }
        }, {
          type: 'line',
          encode: { x: 0, y: 2 }
        }, {
          type: 'bar',
          encode: { x: 0, y: 1 }
        }]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

:::

ECharts 基本概念: 组件

ECharts 中除了绘图之外其他部分，都可抽象为 「组件」。例如，ECharts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）…

组件

案例：各种组件

::: details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        title: {
          text: '数据可视化',
          subtext: '慕课网数据可视化体系课'
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {},
        legend: {
          data: [{
            name: '分类',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
              color: 'red'
            }
          }, '折线图', '柱状图'],
          left: 100
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [{
          show: true,
          start: 30,
          end: 70
        }],
        dataset: {
          source: [
            ['一季度', 79, 100, '分类1', 50],
            ['二季度', 81, 112, '分类2', 60],
            ['三季度', 88, 96, '分类3', 55],
            ['四季度', 72, 123, '分类4', 70],
          ]
        },
        grid: [{
          left: 50,
          top: 70
        }],
        series: [{
          name: '分类',
          type: 'pie',
          center: ['65%', 60],
          radius: 35,
          encode: { itemName: 3, value: 4 }
        }, {
          name: '折线图',
          type: 'line',
          encode: { x: 0, y: 2 }
        }, {
          name: '柱状图',
          type: 'bar',
          encode: { x: 0, y: 1 }
        }]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

:::

ECharts 基本概念：定位

大多数组件都提供了定位属性，我们可以采用类似 CSS absolute 的定位属性来控制组件的位置，下面这个案例可以通过修改 grid 组件定位来控制图表的位置

定位

::: details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      top: <input type="text" id="top">
      left: <input type="text" id="left">
      right: <input type="text" id="right">
      bottom: <input type="text" id="bottom">
    </div>
    <div id="chart"></div>
    <script>
      let _left = 0
      let _top = 0
      let _bottom = 0
      let _right = 0
      const topInput = document.getElementById('top')
      const leftInput = document.getElementById('left')
      const bottomInput = document.getElementById('bottom')
      const rightInput = document.getElementById('right')
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      function addInputEvent(dom, key) {
        dom.addEventListener('input', function(e) {
          value = e.target.value
          switch(key) {
            case 'top':
              _top = value
              break
            case 'left':
              _left = value
              break
            case 'bottom':
              _bottom = value
              break
            case 'right':
              _right = value
              break
          }
          render()
        })
      }
      function render() {
        const option = {
          title: {
            text: '数据可视化',
            subtext: '慕课网数据可视化体系课'
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          dataset: {
            source: [
              ['一季度', 79, 100, '分类1', 50],
              ['二季度', 81, 112, '分类2', 60],
              ['三季度', 88, 96, '分类3', 55],
              ['四季度', 72, 123, '分类4', 70],
            ]
          },
          grid: [{
            left: _left,
            top: _top,
            right: _right,
            bottom: _bottom
          }],
          series: [{
            name: '折线图',
            type: 'line',
            encode: { x: 0, y: 2 }
          }]
        }
        chart.setOption(option)
      }
      window.onload = function() {
        topInput.value = _top
        leftInput.value = _left
        bottomInput.value = _bottom
        rightInput.value = _right
        addInputEvent(topInput, 'top')
        addInputEvent(leftInput, 'left')
        addInputEvent(bottomInput, 'bottom')
        addInputEvent(rightInput, 'right')
        render()
      }
    </script>
  </body>
</html>

:::

ECharts 基本概念：坐标系

很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 ECharts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系 等。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。

一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。

案例：散点图

我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 xAxis、yAxis 和一个 scatter（散点图系列），ECharts 会为它们创建 grid 并进行关联：

坐标系

::: details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        xAxis: {},
        yAxis: {},
        dataset: {
          source: [
            [13, 44],
            [51, 51],
            [51, 32],
            [67, 19],
            [19, 33]
          ]
        },
        series: [{
          type: 'scatter',
          encode: { x: 0, y: 1 }
        }]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

:::

案例：双坐标系

再来看下图，两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis：

坐标系

::: details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        legend: {},
        tooltip: {},
        xAxis: {
          type: 'category'
        },
        yAxis: [{
          min: 0,
          max: 100
        }, {
          min: 0,
          max: 100
        }],
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1]
          ]
        },
        series: [
          { type: 'bar', seriesLayoutBy: 'row', yAxisIndex: 0 },
          { type: 'line', seriesLayoutBy: 'row', yAxisIndex: 1 }
        ]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

:::

案例：多坐标系

再来看下图，一个 ECharts 实例中，有多个 grid，每个 grid 分别有 xAxis、yAxis，他们使用 xAxisIndex、yAxisIndex、gridIndex 来指定引用关系：

坐标系

::: details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        legend: {},
        tooltip: {},
        xAxis: [{
          type: 'category',
          gridIndex: 0
        }, {
          type: 'category',
          gridIndex: 1
        }],
        yAxis: [{
          gridIndex: 0
        }, {
          gridIndex: 1
        }],
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
          ]
        },
        grid: [{
          bottom: '55%'
        }, {
          top: '55%'
        }],
        series: [
          // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
        ]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

:::

巨人张
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用数据可视化来发现新趋势：基于人工智能的数据可视化
禅与计算机程序设计艺术
06-29 6437
作者：禅与计算机程序设计艺术 《91. 用数据可视化来发现新趋势：基于人工智能的数据可视化》 引言 1.1. 背景介绍 随着互联网和移动互联网的快速发展，数据已经成为了一种重要的资产。人
30个值得推荐的数据可视化工具--转
weixin_34294649的博客
12-18 2767
转自：https://www.toutiao.com/a6636178277931155971/?tt_from=mobile_qq&utm_campaign=client_share&timestamp=1545128403&app=news_article&utm_source=mobile_qq&iid=54300962571&utm_medi...
【数据可视化】大作业（意向考研高校的数据可视化）
Lenhart001的博客
06-18 7044
将该高校的地理位置以地图的形式展示。将该高校近几年计算机相关专业的考研（或高考）录取成绩、人数信息，专业师资队伍，考试科目及内容等等以合适的柱状图、折线图、饼图等方式表示出来，图表能够清晰得呈现不同数据的变化，使得观察图表的人能够迅速得获取信息。录取成绩、人数信息、专业师资队伍柱状图、折线图、饼图对个人感兴趣的导师、研究方向等多属性、多维度、多关系数据选用关系、词云等可视化方法，使数据清晰有效地表达。研究方向关系、词云其它自由发挥部分学校名称：山东理工大学。
数据可视化-课堂记录
最新发布
IT从业者的成长历程
05-13 1300
数据可视化课堂记录
高级数据分析可视化低代码技术框架选型初步分析
肖永威的专栏
01-11 2337
做为数据分析、算法研发者，数据分析可视化IT技能一般都比较弱，或者不具备，迫切需求低代码工具，快速把数据分析结果展现给客户，本文从Python可视化工具、Python Web框架等维度对比分析低代码技术方案。
20款优秀的数据可视化工具 (建议收藏)
热门推荐
简说Python的博客
06-05 1万+
↑↑↑关注后"星标"简说Python人人都可以简单入门Python、爬虫、数据分析简说Python推荐 来源：网络 大家好，我是老表～如今学习应用数据可视化的渠道有很多...
Tableau数据可视化实战.pdf
08-09
Tableau数据可视化实战 在本书中，我们将深入探讨 Tableau 数据可视化的实战应用。Tableau 作为一款非常强大的数据可视化工具，已经被全球数万家企业所采用。通过本书的学习，读者将能够快速掌握 Tableau 的使用，...
计算机设计大赛-数据可视化赛道-大数据可视化数据大屏可视化项目.zip
11-12
计算机设计大赛-数据可视化赛道-大数据可视化数据大屏可视化模板.zip是一个包含大数据可视化数据大屏可视化模板的压缩文件。该模板旨在为参赛者在计算机设计大赛的数据可视化赛道中提供帮助，以展示具有吸引力和交互...
数据可视化分析.pdf
08-08
数据可视化分析.pdf
数据可视化：matplotlib_1
09-17
数据可视化：matplotlib_1
数据可视化技术分析
11-15
数据可视化技术分析 完整ppt数据可视化技术分析 完整ppt数据可视化技术分析 完整ppt数据可视化技术分析 完整ppt
大数据可视化技术
qq_45786520的博客
06-24 9190
数据可视化的标准 实用性 完整性 真实性 艺术性 交互性 数据可视化流程 数据采集 数据预处理：数据质量、数据清洗、数据集成 数据可视化映射 用户感知 数据可视化的作用 数据表达：是通过计算机图性技术来更加友好地显示数据信息，以便人们理解和分析数据。 数据操作：是以计算机提供界面、接口和协议等条件为基础完成人鱼数据的交互需求，数据操作需要友好便捷的人家交互技术、表转化的接口和通信协议来完成对数据集的操作。 数据分析：是通过计算机获得多维、多源、异构和海量数据所隐含信息的核心手段，它是数据存储、数据
【大数据处理与可视化】六、数据可视化
慢热型网友的博客
05-29 2628
找出河北省占地面积和游客数量位居前三的景点.这里使用了"总面积","游客量"两列数据.为了能够直观的看到这里两列数据,使用直方图.x轴: 景点的名称y轴: 表示占地面积和游客数量从生成的条形图可以看出,接待游客数量处于前三名的景点分别是:秦皇岛北戴河,西柏坡-天戴山,娲皇宫景点占地面积前三分别是:避暑山庄外八庙,野三坡,秦皇岛北戴河。在实验过程中遇到了很多硬件或者是软件上的问题，请教老师，询问同学，上网查资料，都是解决这些问题的途径。3.能够通过借助网络资源，通过自主学习解决数据可视化中遇到的问题。
数据可视化的介绍
qq_44308961的博客
02-26 1753
数据可视化
初识前端数据可视化
qq_62102968的博客
02-20 4810
目录 概念 前端数据可视化的开发工具 前端三件套 Echarts.js Highcharts.js D3.js Vue.js python 编译器 概念 什么是前端？前端，通俗来说就是网页呈现给我们看的那部分。比如hao123这个页面，就是前端部分 同时，按F12即可查看其前端代码，如图 那什么是可视化呢 ，众嗦粥汁，一些数据就是一些奇奇怪怪的数字，比如xx比率啥的，而把这种奇奇怪怪的数字，转化成图片、表格、柱形图等，能够让我们巧妙的观察数据，就是可视化了。 如图...
数据可视化dataset
10-29
数据可视化dataset是指包含可视化元素的数据集。通常，数据集是由各种数据点或观测值组成的，而数据可视化dataset则是用图表、图形、地图等可视化工具将这些数据点呈现出来的。数据可视化dataset的目的是帮助人们更好地理解和解释数据，从而支持决策和发现数据中的模式或关联性。 数据可视化可以通过各种图表和图形来展示数据。例如，柱状图可以用于比较不同组的数据值，折线图可以显示数据随时间变化的趋势，散点图可以展示两个变量之间的关系等等。此外，还可以使用地图来显示地理信息和空间分布。通过将数据转化为视觉元素，人们可以更直观地理解数据的含义和趋势。 数据可视化dataset的好处是提供可视化的洞察力和直观性。通过将数据转化为图表和图形，人们可以更容易地发现数据中的模式、趋势、异常值等。此外，数据可视化还可以帮助人们在大量数据中快速识别和理解关键点，避免过度依赖复杂的数据分析工具。 数据可视化dataset还可以促进沟通和共享数据的目的。通过使用可视化工具，人们可以更容易地与他人分享和解释数据，促进相互之间的理解和交流。此外，数据可视化还可以通过提供互动性的功能（例如，通过悬停显示数据点的详细信息）来进一步增强对数据的理解和发现。 总之，数据可视化dataset是一种将数据转化为可视化元素的方法，旨在帮助人们更好地理解和解释数据。通过使用各种图表、图形和地图等可视化工具，人们可以更直观地发现数据的模式、趋势和异常值，并促进数据的交流和共享。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值