【前端】数据可视化

阅读数: 2024-05-11

前言

教程文档位置：https://www.youbaobao.xyz/datav-docs/

基础阶段

概念

数据可视化是什么？

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

数据可视化的起源

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

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

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

数据可视化的应用场景

简单应用：单机离线、数据量小、维度少

Excel
XMind：思维导图制作工具
Visio: 流程图制作工具
OminiGraffle

复杂应用：互联网应用、数据量大，维度多

数据大屏
数据报表
地图

数据可视化解决方案

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

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

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

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

canvas

可参考：https://www.ionluo.cn/blog/posts/78bd14cd.html

canvas 参考手册

svg

可参考：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial

svg 参考手册

WebGL

可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial

这个是一个大学科，还是要一番心思去学习的

精彩案例：

案例1：3D 魔方

案例2：化学模型

案例3：3D 地球

案例4：3D 大脑

zrender

zrender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

想深入学习 zrender 的同学可以参考官方案例，源码可以在 zrender-docs 中找到

下面是一个简单的案例，绘制点、矩形、直线和圆形

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
  </head>
  <body>
    <div id="container" style="width: 800px;height: 800px;"></div>
    <script>
      var zr = zrender.init(document.getElementById('container'));
      var rect = new zrender.Rect({
        shape: {
          x: 0,
          y: 0,
          width: 50,
          height: 50
        },
        style: {
          fill: 'red',
          lineWidth: 0
        }
      });
      var line = new zrender.Polyline({
        shape: {
          points:[
            [100, 100],
            [250, 75],
            [300, 100]
          ]
        },
        style: {
          stroke: 'blue',
          lineWidth: 1
        }
      });
      var circle = new zrender.Circle({
        shape: {
          cx: 200,
          cy: 200,
          r: 50
        },
        style: {
          fill: 'red',
          stroke: 'green',
          lineWidth: 2
        }
      });
      var point = new zrender.Polyline({
        shape: {
          points:[
            [300, 300],
            [301, 301]
          ]
        },
        style: {
          stroke: 'red',
          lineWidth: 1
        }
      });
      zr.add(rect);
      zr.add(line);
      zr.add(circle);
      zr.add(point);
    </script>
  </body>
</html>

D3

D3（Data-Driven Documents）是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。

D3 是一个较为复杂的图形库，如果想入门 D3 可以从这里开始

这里为大家找了一个非常不错的 D3 入门案例：如何绘制思维导图，案例源码点击这里下载

Three.js

Three.js 是一个基于 WebGL 的 Javascript 3D 图形库

官方案例：旋转正方体

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.116.1/build/three.js"></script>
  </head>
  <body>
    <script>
      var camera, scene, renderer;
      var geometry, material, mesh;

      init();
      animate();

      function init() {
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
        camera.position.z = 1;
        scene = new THREE.Scene();
        geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
        material = new THREE.MeshNormalMaterial();
        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
      }

      function animate() {
        requestAnimationFrame( animate );
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        renderer.render( scene, camera );
      }
    </script>
  </body>
</html>

Highcharts

Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 系列包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库

Highcharts

Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <title>案例：折线图</title>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <style>
      #container {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var chart = Highcharts.chart('container', {
        title: {
          text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
        },
        subtitle: {
          text: '数据来源：thesolarfoundation.com'
        },
        yAxis: {
          title: {
            text: '就业人数'
          }
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle'
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false
            },
            pointStart: 2010
          }
        },
        series: [{
          name: '安装，实施人员',
          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
          name: '工人',
          data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
          name: '销售',
          data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
          name: '项目开发',
          data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
          name: '其他',
          data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }]
      });
    </script>
  </body>
</html>

数据可视化，选择Echarts还是Highcharts？

最为关键的是，Echarts免费，Highcharts用于商业用途时还需要授权，个人用时虽然免费，但会在图表上显示logo，有洁癖的话就只能绕道了。

Highstock

Highstock 是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>案例：平安银行股价K线图</title>
    <script src="https://code.highcharts.com.cn/highstock/highstock.js"></script>
    <style>
      #container {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      Highcharts.setOptions({
        lang: {
          rangeSelectorZoom: ''
        }
      });
      fetch('https://data.jianshukeji.com/stock/history/000001')
        .then(data => data.json())
        .then(data => {
          if(data.code !== 1) {
			  	  alert('读取股票数据失败！');
				    return false;
          }
          data = data.data;
          var ohlc = [],
            volume = [],
            dataLength = data.length,
          // set the allowed units for data grouping
          groupingUnits = [[
            'week',                         // unit name
            [1]                             // allowed multiples
          ], [
            'month',
            [1, 2, 3, 4, 6]
          ]],
          i = 0;
          for (i; i < dataLength; i += 1) {
            ohlc.push([
              data[i][0], // the date
              data[i][1], // open
              data[i][2], // high
              data[i][3], // low
              data[i][4] // close
            ]);
            volume.push([
              data[i][0], // the date
              data[i][5] // the volume
            ]);
          }
          // create the chart
          var chart = Highcharts.stockChart('container', {
            rangeSelector: {
              selected: 1,
              inputDateFormat: '%Y-%m-%d'
            },
            title: {
              text: '平安银行历史股价'
            },
            xAxis: {
              dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%m-%d',
                week: '%m-%d',
                month: '%y-%m',
                year: '%Y'
              }
            },
            tooltip: {
              split: false,
              shared: true,
            },
            yAxis: [{
              labels: {
                align: 'right',
                x: -3
              },
              title: {
                text: '股价'
              },
              height: '65%',
              resize: {
                enabled: true
              },
              lineWidth: 2
            }, {
              labels: {
                align: 'right',
                x: -3
              },
              title: {
                text: '成交量'
              },
              top: '65%',
              height: '35%',
              offset: 0,
              lineWidth: 2
            }],
            series: [{
              type: 'candlestick',
              name: '平安银行',
              color: 'green',
              lineColor: 'green',
              upColor: 'red',
              upLineColor: 'red',
              tooltip: {
              },
              navigatorOptions: {
                color: Highcharts.getOptions().colors[0]
              },
              data: ohlc,
              dataGrouping: {
                units: groupingUnits
              },
              id: 'sz'
            }, {
              type: 'column',
              data: volume,
              yAxis: 1,
              dataGrouping: {
                units: groupingUnits
              }
            }]
          })
        })
    </script>
  </body>
</html>

Highmaps

Highmaps 是一款基于 HTML5 的优秀地图组件。Highmaps 继承了 Highcharts 简单易用的特性，利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>案例：欧洲时区</title>
  <script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
  <script src="https://code.highcharts.com.cn/highmaps/highmaps.js"></script>
</head>
<body>
<script src="https://img.hcharts.cn/mapdata/countries/us/us-all.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
  $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/us-population-density.json&callback=?', function(data) {
    console.log(data);
    // Make codes uppercase to match the map data
    $.each(data, function() {
      this.code = this.code.toUpperCase()
    })
    // Instanciate the map
    Highcharts.mapChart('container', {
      chart: {
        borderWidth: 1
      },
      title: {
        text: 'US population density (/km²)'
      },
      legend: {
        layout: 'horizontal',
        borderWidth: 0,
        backgroundColor: 'rgba(255,255,255,0.85)',
        floating: true,
        verticalAlign: 'top',
        y: 25
      },
      mapNavigation: {
        enabled: true
      },
      colorAxis: {
        min: 1,
        type: 'logarithmic',
        minColor: '#EEEEFF',
        maxColor: '#000022',
        stops: [
          [0, '#EFEFFF'],
          [0.67, '#4444FF'],
          [1, '#000022']
        ]
      },
      series: [{
        animation: {
          duration: 1000
        },
        data: data,
        mapData: Highcharts.maps['countries/us/us-all'],
        joinBy: ['postal-code', 'code'],
        dataLabels: {
          enabled: true,
          color: 'white',
          format: '{point.code}'
        },
        name: 'Population density',
        tooltip: {
          pointFormat: '{point.code}: {point.value}/km²'
        }
      }]
    })
  })
</script>
</body>
</html>

AntV

Echarts

百度地图

高德地图

数据报表项目

node === 11.15.0

npm === 6.7.0

演示地址：https://www.youbaobao.xyz/datav-report/

主要难点：

echats定制需求

在原图形上增加图标

删除原图形上的一些部分
百度地图的定制化图层

主要内容

核心指标
销售业绩
区域排名
分类排名
销售分布
转化率
热门搜索

主要技术

vue2.6 + vue-router + element-ui + echarts + vue-echats

创建项目

# 安装 vue-cli （已安装可跳过）
npm install -g @vue-cli@4.3.1

# 初始化项目 datav-report-dev
# 不指定淘宝镜像可能会失败
vue create datav-report-dev --registry=http://registry.npm.taobao.org
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

# 切换到当前项目目录
cd datav-report-dev

# 运行
npm run serve

# 安装 element-ui
vue add element --registry=http://registry.npm.taobao.org
? How do you want to import Element? Import on demand
? Choose the locale you want to load zh-CN

# 安装echarts
npm i -S echarts@4.7.0

可以安装nrm来管理镜像源

1
2
3

npm install -g nrm
nrm add http_taobao http://registry.npm.taobao.org/
nrm use http_taobao

TopView 用原生 echarts (最好也是用vue-echarts, 这里仅仅是为了演示)

SalesView 用 vue-echarts

MapView 和 BottomView 用 v-echarts

知识点汇总

卡片公共组件抽取

定义 mixins

import CommonCard from '../components/CommonCard/index'

export default {
  components: {
    CommonCard
  }
}

消费 mixins

import commonCardMixin from '../../mixins/commonCardMixin'

export default {
	mixins: [commonCardMixin]
}

定义插槽(CommonCard/index.vue)

<div class="common-card">
  <div class="title">{{title}}</div>
  <div class="value">{{value}}</div>
  <div class="chart">
    <slot></slot>
  </div>
  <div class="line" />
  <div class="total">
    <slot name="footer"></slot>
  </div>
</div>

使用插槽

<common-card
    title="累计销售额"
    value="¥ 32,039,165"
  >
  <template>
    <div class="total-sales-chart" />
  </template>
  <template v-slot:footer>
    <span>昨日销售额 </span>
    <span class="emphasis">¥ 30,000,000 </span>
  </template>
</common-card>

vue 中使用 echats

// main.js
import ECharts from 'echarts'
Vue.prototype.$echarts = ECharts

// 使用 
const myChart = this.$echarts.init(document.getElementById('xxx'))
myChart.setOption({
  // ...
})

vue-echats

// npm i  vue-echarts
// main.js



import VueECharts from 'vue-echarts'
Vue.component('v-chart', VueECharts)

v-echats

echarts 配置用法

series

隐藏线条

1
2
3

lineStyle: {
  width: 0
}

隐藏数据点

1
2
3

itemStyle: {
  opacity: 0
}

折线图填充面积区域颜色

1
2
3

areaStyle: {
  color: 'purple'
}

将折线图平滑显示

1	smooth: true

柱状图聚合

series: [{
  type: 'bar',
  stack: '总量',
  data: [100]
}, {
  type: 'bar',
  stack: '总量',
  data: [250]
}]

自定义绘图

{
  type: 'custom',
  stack: '总量',
  data: [100],
  renderItem: (params, api) => {
    const value = api.value(0)
    const endPoint = api.coord([value, 0])

    return {
      type: 'group',
      position: endPoint,
      children: [{
        type: 'path',
        shape: {
          d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
          x: -5,
          y: -20,
          width: 10,
          height: 10,
          layout: 'cover'
        },
        style: {
          fill: '#45c946'
        }
      }, {
        type: 'path',
        shape: {
          d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
          x: -5,
          y: 10,
          width: 10,
          height: 10,
          layout: 'cover'
        },
        style: {
          fill: '#45c946'
        }
      }]
    }
  }
}

xAxis

消除 x 轴两侧边距

1	boundaryGap: false

状图宽度

1 2	barWidth: '60%' barWidth: 10

条形图

xAxis: {
  type: 'value'
},
yAxis: {
  type: 'category'
}

优化点

增加resize重绘

1	window.addEventListener("resize", myChart.resize);

数据大屏项目

数据可视化组件库

移动报表项目

Openlayer

课程文档：https://www.yuque.com/xzd_gis/open/ke30zyvvaodvz6h4

课程地址：https://space.bilibili.com/3493113282693454/channel/seriesdetail?sid=3347872

代码位置：https://gitee.com/cheerfulion/my_public_demos/tree/master/openlayer_learning

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/89e577bc.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！