数据可视化入门：让你的数据说话

大家好，我是蔓蔓。在独立开发过程中，我经常需要做数据可视化来展示产品数据。今天我来和大家分享数据可视化的入门知识和实战技巧。

选择合适的图表

图表选择指南

javascript 复制代码

// 1. 对比类别 → 柱状图
// 2. 显示趋势 → 折线图
// 3. 占比关系 → 饼图/环形图
// 4. 分布情况 → 散点图/直方图
// 5. 层级关系 → 树图/旭日图
// 6. 地理数据 → 地图

使用ECharts快速开发

基础图表

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 800px; height: 400px;"></div>
  
  <script>
    const chart = echarts.init(document.getElementById('chart'));
    
    const option = {
      title: { text: '销售数据' },
      tooltip: { trigger: 'axis' },
      legend: { data: ['销售额', '访问量'] },
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月']
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: [820, 932, 901, 934, 1290, 1330],
          itemStyle: { color: '#1890ff' }
        },
        {
          name: '访问量',
          type: 'line',
          data: [320, 220, 341, 374, 490, 430],
          itemStyle: { color: '#52c41a' }
        }
      ]
    };
    
    chart.setOption(option);
  </script>
</body>
</html>

响应式图表

javascript 复制代码

class ChartManager {
  constructor() {
    this.charts = new Map();
    this.initResizeObserver();
  }

  init(container, options) {
    const chart = echarts.init(container);
    chart.setOption(options);
    
    this.charts.set(container, chart);
    
    return chart;
  }

  initResizeObserver() {
    const observer = new ResizeObserver((entries) => {
      entries.forEach(entry => {
        const chart = this.charts.get(entry.target);
        if (chart) {
          chart.resize();
        }
      });
    });
    
    // 观察所有图表容器
    this.charts.forEach((_, container) => {
      observer.observe(container);
    });
  }

  dispose(container) {
    const chart = this.charts.get(container);
    if (chart) {
      chart.dispose();
      this.charts.delete(container);
    }
  }
}

// 使用
const manager = new ChartManager();
const chart = manager.init(document.getElementById('chart'), options);

React中的数据可视化

jsx 复制代码

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function ECharts({ option, style = { width: '100%', height: '400px' } }) {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    
    chart.setOption(option);
    
    const handleResize = () => {
      chart.resize();
    };
    
    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('resize', handleResize);
      chart.dispose();
    };
  }, [option]);

  return <div ref={chartRef} style={style}></div>;
}

// 使用
function Dashboard() {
  const chartOption = {
    title: { text: '用户增长趋势' },
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
    yAxis: { type: 'value' },
    series: [
      { data: [120, 200, 150, 80, 70], type: 'line' }
    ]
  };

  return <ECharts option={chartOption} />;
}

数据处理技巧

javascript 复制代码

// 1. 数据聚合
function aggregateData(data, groupBy, aggregateField) {
  const groups = {};
  
  data.forEach(item => {
    const key = item[groupBy];
    if (!groups[key]) {
      groups[key] = 0;
    }
    groups[key] += item[aggregateField];
  });
  
  return Object.entries(groups).map(([key, value]) => ({ [groupBy]: key, [aggregateField]: value }));
}

// 2. 数据过滤
function filterTopData(data, field, count = 10) {
  return [...data]
    .sort((a, b) => b[field] - a[field])
    .slice(0, count);
}

// 3. 数据格式化
function formatNumber(num) {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M';
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K';
  }
  return num.toLocaleString();
}

// 4. 日期处理
function formatDateRange(start, end, interval = 'day') {
  const dates = [];
  const current = new Date(start);
  
  while (current <= new Date(end)) {
    dates.push(new Date(current).toISOString().split('T')[0]);
    
    if (interval === 'day') {
      current.setDate(current.getDate() + 1);
    } else if (interval === 'week') {
      current.setDate(current.getDate() + 7);
    } else if (interval === 'month') {
      current.setMonth(current.getMonth() + 1);
    }
  }
  
  return dates;
}

高级可视化

javascript 复制代码

// 热力图
const heatmapOption = {
  title: { text: '用户活跃时段热力图' },
  tooltip: { position: 'top' },
  grid: {
    height: '50%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    splitArea: { show: true }
  },
  yAxis: {
    type: 'category',
    data: ['0-6', '6-12', '12-18', '18-24'],
    splitArea: { show: true }
  },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [
    {
      type: 'heatmap',
      data: [
        [0, 0, 10], [0, 1, 20], [0, 2, 80], [0, 3, 60],
        [1, 0, 15], [1, 1, 25], [1, 2, 90], [1, 3, 70],
        // ...
      ],
      label: { show: true },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 地图可视化
const mapOption = {
  title: { text: '用户区域分布' },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    min: 0,
    max: 500,
    left: 'left',
    top: 'bottom',
    text: ['高', '低'],
    calculable: true
  },
  series: [
    {
      name: '用户数',
      type: 'map',
      map: 'china',
      data: [
        { name: '北京', value: 450 },
        { name: '上海', value: 380 },
        { name: '广东', value: 520 },
        // ...
      ]
    }
  ]
};

性能优化

javascript 复制代码

// 1. 大数据量下使用canvas渲染
echarts.init(dom, null, { renderer: 'canvas' });

// 2. 按需加载图表组件
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer
]);

// 3. 数据更新优化
chart.setOption(newOption, {
  notMerge: false,   // 合并配置
  lazyUpdate: true   // 延迟更新
});

总结

数据可视化能让复杂的数据变得直观易懂。选择合适的图表类型，掌握基本的绘图库使用，学会数据处理技巧，你就能做出专业的数据可视化作品。记住，好的数据可视化应该是简洁、清晰、有重点的。

技术应当有温度，好的数据可视化能让数据真正为用户服务。