数据可视化入门：让你的数据说话-深圳市維司達科技有限公司

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

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

选择合适的图表

图表选择指南

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

使用ECharts快速开发

基础图表

<!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>

响应式图表

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中的数据可视化

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} />; }

数据处理技巧

// 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; }

高级可视化

// 热力图 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 }, // ... ] } ] };

性能优化

// 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 // 延迟更新 });