数据可视化-进阶知识

// 框架层对比
1. ECharts VS Highcharts：
    Highcharts 能够兼容 IE6+，ECharts 通过 VML 兼容低端浏览器
    Highcharts 文档体验略胜一筹
    Highcharts 收费，这是很多开发者转向 ECharts 的主要原因
    Highcharts 基于 svg 实现，ECharts 默认采用 canvas 渲染，4.0 支持 svg 渲染
    ECharts 国内知名度更高，国内企业认可度更高
2. ECharts VS AntV：
    AntV 文档阅读体验更符合互联网产品使用习惯
    AntV 产品体系拆分更加清晰，但一定程度上提升了学习成本
    ECharts 社区更强大
    ECharts 使用更加广泛
3. ECharts 优势总结：
    简单易用
    文档全面
    社区强大
    高知名度
----------------------------------------------------------------------------------------------
// Highcharts是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表
// 并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 系列包含 Highcharts JS，Highstock JS，
// Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库
1. Highcharts是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表
   Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表
   其中很多图表可以集成在同一个图形中形成混合图
2. Highstock是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表
   它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能
3. Highmaps 是一款基于 HTML5 的优秀地图组件。Highmaps 继承了 Highcharts 简单易用的特性
   利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表
----------------------------------------------------------------------------------------------
// AntV是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践
// AntV 包括以下解决方案：
// G2：可视化引擎
// G2Plot：图表库
// G6：图可视化引擎
// Graphin：基于 G6 的图分析组件
// F2：移动可视化方案
// ChartCube：AntV 图表在线制作
// L7：地理空间数据可视化
1. G2 案例：折线图
    引入 js 库
    编写渲染容器 DOM
    准备渲染数据
    获取渲染 DOM 对象
    初始化 G2 绘图对象（如：G2Plot.Line），配置绘图参数
    调用 render 完成渲染
    <script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script>
    <div id="g2-chart"></div>
    <script>
      const data = [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
      ];
      const chartDom = document.getElementById('g2-chart');
      const plot = new G2Plot.Line(chartDom, {
        title: {
          visible: true,
          text: 'g2折线图示例',
        },
        data,
        xField: 'year',
        yField: 'value',
        description: {
          visible: true,
          text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
        },
        point: {
          visible: true
        },
        label: {
          visible: true
        },
        color: '#FE740C',
        point: {
          visible: true,
          size: 5,
          color: 'white',
          style: {
            stroke: '#FE740C',
            lineWidth: 2,
            fillOpacity: 0.6,
          },
        },
        yAxis: {
          formatter: (v) => {
            return v + 'k';
          },
        },
      });
      plot.render();
    </script>
2. G6 案例：绘制矢量图
    引入 js 库
    编写渲染容器 DOM
    准备渲染数据
    获取渲染 DOM 对象
    初始化 G6 绘图对象（如：G6.Graph），配置绘图参数
    调用 render 完成渲染
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.4.8/dist/g6.min.js"></script>
    <div id="g6-chart"></div>
    <script>
      const data = {
        // 点集
        nodes: [
          {
            id: 'node1', // String，该节点存在则必须，节点的唯一标识
            x: 100, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            label: '起始点', // 节点文本
            size: 60, // 元素的尺寸
            labelCfg: {           // 标签配置属性
              position: 'center',// 标签的属性，标签在元素中的位置
              style: {            // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
                fontSize: 12,     // 标签的文字大小
                fill: '#ffffff',  // 标签的文字颜色
              }
            },
            style: {              // 包裹样式属性的字段 style 与其他属性在数据结构上并行
              fill: '#ff0000',    // 样式属性，元素的填充色
              stroke: '#888',     // 样式属性，元素的描边色
              lineWidth: 1,       // 节点描边粗细
            }
          },
          {
            id: 'node2', // String，该节点存在则必须，节点的唯一标识
            x: 300, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            label: '目标点1', // 节点文本
            size: 80, // 元素的尺寸
            labelCfg: {           // 标签配置属性
              position: 'center',// 标签的属性，标签在元素中的位置
              style: {            // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
                fontSize: 12,     // 标签的文字大小
                fill: '#ffffff',  // 标签的文字颜色
              }
            },
            style: {              // 包裹样式属性的字段 style 与其他属性在数据结构上并行
              fill: '#333',    // 样式属性，元素的填充色
              stroke: '#ccc',     // 样式属性，元素的描边色
              lineWidth: 2,       // 节点描边粗细
            }
          },
          {
            id: 'node3', // String，该节点存在则必须，节点的唯一标识
            x: 500, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            label: '目标点2', // 节点文本
            size: 100, // 元素的尺寸
            labelCfg: {           // 标签配置属性
              position: 'center',// 标签的属性，标签在元素中的位置
              style: {            // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
                fontSize: 12,     // 标签的文字大小
                fill: '#ffffff',  // 标签的文字颜色
              }
            },
            style: {              // 包裹样式属性的字段 style 与其他属性在数据结构上并行
              fill: 'green',    // 样式属性，元素的填充色
              stroke: '#ccc',     // 样式属性，元素的描边色
              lineWidth: 2,       // 节点描边粗细
            }
          }
        ],
        // 边集
        edges: [
          {
            source: 'node1', // String，必须，起始点 id
            target: 'node2', // String，必须，目标点 id
            label: '连接线1', // 边的文本
          },
          {
            source: 'node2', // String，必须，起始点 id
            target: 'node3', // String，必须，目标点 id
            label: '连接线2', // 边的文本
          },
        ],
      };
      const graph = new G6.Graph({
        container: 'g6-chart', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width: 800, // Number，必须，图的宽度
        height: 500, // Number，必须，图的高度
      });
      graph.data(data); // 读取 Step 2 中的数据源到图上
      graph.render(); // 渲染图
    </script>
3. L7 案例：气泡图
    引入 js 库
    编写渲染容器 DOM
    初始化地图对象 L7.Scene
    请求数据
    数据清洗
    初始化绘图对象（如：L7.PointLayer）
    调用 L7.Scene.addLayer 方法绘图
    <script src="https://unpkg.com/@antv/l7"></script>
    <div id="map"></div>
    <script>
    const scene = new L7.Scene({
        id: 'map',
        map: new L7.GaodeMap({
        style: 'dark', // 样式URL
        center: [120.19382669582967, 30.258134],
        pitch: 0,
        zoom: 6,
        token: '***',
        }),
    });
    scene.on('loaded', () => {
        fetch(
        'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
        )
        .then(res => res.json())
        .then(data => {
            data.features = data.features.filter(item => {
            return item.properties.capacity > 800;
            });
            const pointLayer = new L7.PointLayer({})
            .source(data)
            .shape('circle')
            .size('capacity', [ 0, 16 ])
            .color('capacity', [
                '#34B6B7',
                '#4AC5AF',
                '#5FD3A6',
                '#7BE39E',
                '#A1EDB8',
                '#CEF8D6'
            ])
            .active(true)
            .style({
                opacity: 0.5,
                strokeWidth: 0
            });

            scene.addLayer(pointLayer);
        });
    });
    </script>
----------------------------------------------------------------------------------------------
// ECharts
1. 引入 js 库
2. 编写渲染容器 DOM，添加 width 和 height 样式属性
3. 获取渲染 DOM 对象
4. 初始化 ECharts 对象
5. 编写 option 参数
6. 调用 setOption 完成渲染
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <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>