𝑻𝒆𝒏𝑪𝒍𝒂𝒘正在头脑风暴···

𝑻𝒆𝒏𝑲𝒊𝑺𝒆𝒀𝒂の𝑨𝒈𝒆𝒏𝒕助手

𝑻𝒆𝒏-𝒇𝒍𝒂𝒔𝒉

前端可视化技术栈

数据可视化是现代Web应用中不可或缺的功能。优秀的可视化不仅能够清晰地展示数据，还能帮助用户快速理解复杂的业务信息。本文将全面介绍前端可视化技术栈，从基础图表库到高级可视化框架，帮助你选择合适的技术方案。

可视化技术概述

什么是前端数据可视化？

前端数据可视化是指使用Web技术将数据转换为图形化表示的过程。它包括：

图表绘制：柱状图、折线图、饼图等基础图表
地图可视化：地理数据展示
关系网络图：实体关系展示
实时数据监控：动态更新的数据展示
交互式可视化：用户可操作的数据展示

可视化的价值

直观展示：图形比文字更容易理解
发现洞察：通过可视化发现数据中的模式和趋势
决策支持：基于可视化数据做出更好的决策
用户体验：提升应用的交互性和吸引力

主流可视化库对比

1. Chart.js

简介

Chart.js是一个简单、灵活的JavaScript图表库，基于HTML5 Canvas。

核心特点

✅ 轻量级：体积小，加载快
✅ 简单易用：API直观，学习成本低
✅ 响应式：自动适配不同屏幕
✅ 动画效果：内置丰富的动画
❌ 功能有限：复杂可视化支持不足
❌ 性能一般：大数据集性能较差

使用示例

// 安装
npm install chart.js

// 基础使用
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: '销售数据',
            data: [65, 59, 80, 81, 56, 55],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '月度销售趋势'
            }
        }
    }
});

// React组件封装
function LineChart({ data, labels }) {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      const ctx = chartRef.current.getContext('2d');
      
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
      
      chartInstance.current = new Chart(ctx, {
        type: 'line',
        data: {
          labels,
          datasets: [{
            label: '数据集',
            data,
            borderColor: 'rgb(59, 130, 246)',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            tension: 0.4
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'top',
            }
          }
        }
      });
    }

    return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
    };
  }, [data, labels]);

  return <canvas ref={chartRef} />;
}

适用场景

需要简单、快速实现基础图表
项目对体积敏感
不需要复杂交互
中小规模数据集

2. ECharts

简介

ECharts是百度开源的纯JavaScript图表库，基于Canvas和SVG。

核心特点

✅ 功能强大：支持50+种图表类型
✅ 交互丰富：支持缩放、平移、数据筛选等
✅ 性能优秀：大数据集渲染流畅
✅ 定制灵活：深度定制样式和动画
✅ 文档完善：中文文档详细
❌ 体积较大：完整版本体积较大
❌ 学习成本：API相对复杂

使用示例

// 安装
npm install echarts

// 基础使用
import * as echarts from 'echarts';

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

const option = {
  title: {
    text: 'ECharts 示例'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line'
  }]
};

myChart.setOption(option);

// 响应式处理
window.addEventListener('resize', () => {
  myChart.resize();
});

// React组件封装
function EChartsReact({ option, style }) {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      chartInstance.current = echarts.init(chartRef.current);
      chartInstance.current.setOption(option);
    }

    const handleResize = () => {
      chartInstance.current?.resize();
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      chartInstance.current?.dispose();
    };
  }, [option]);

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

// 高级图表示例
const complexOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: left,
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '邮件营销' },
        { value: 484, name: '联盟广告' },
        { value: 300, name: '视频广告' }
      ]
    }
  ]
};

适用场景

需要复杂、专业的图表
大数据可视化需求
需要丰富的交互功能
企业级应用

3. D3.js

简介

D3.js（Data-Driven Documents）是最强大的数据可视化库。

核心特点

✅ 极致灵活：完全控制图表的每个元素
✅ 数据绑定：强大的数据操作能力
✅ 动画效果：流畅的过渡动画
✅ 社区活跃：丰富的示例和插件
❌ 学习成本高：需要深入理解
❌ 代码量较大：实现复杂图表需要大量代码
❌ 上手困难：不适合快速开发

使用示例

// 安装
npm install d3

// 基础使用
import * as d3 from 'd3';

// 设置数据
const data = [30, 86, 168, 281, 303, 365];

// 创建SVG容器
const svg = d3.select('#chart')
  .append('svg')
  .attr('width', 400)
  .attr('height', 400);

// 创建比例尺
const xScale = d3.scaleLinear()
  .domain([0, data.length - 1])
  .range([50, 350]);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([350, 50]);

// 创建线条生成器
const line = d3.line()
  .x((d, i) => xScale(i))
  .y(d => yScale(d))
  .curve(d3.curveMonotoneX);

// 绘制线条
svg.append('path')
  .datum(data)
  .attr('fill', 'none')
  .attr('stroke', 'steelblue')
  .attr('stroke-width', 2)
  .attr('d', line);

// 添加数据点
svg.selectAll('.dot')
  .data(data)
  .enter().append('circle')
  .attr('class', 'dot')
  .attr('cx', (d, i) => xScale(i))
  .attr('cy', d => yScale(d))
  .attr('r', 4)
  .attr('fill', 'steelblue');

// 添加坐标轴
svg.append('g')
  .attr('transform', 'translate(0,350)')
  .call(d3.axisBottom(xScale));

svg.append('g')
  .attr('transform', 'translate(50,0)')
  .call(d3.axisLeft(yScale));

// React组件封装
function D3Chart({ data, width = 400, height = 400 }) {
  const svgRef = useRef(null);

  useEffect(() => {
    if (!svgRef.current) return;

    // 清空现有内容
    d3.select(svgRef.current).selectAll('*').remove();

    const svg = d3.select(svgRef.current)
      .attr('width', width)
      .attr('height', height);

    // 创建图表逻辑
    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;

    const g = svg.append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

    // 比例尺
    const xScale = d3.scaleLinear()
      .domain([0, data.length - 1])
      .range([0, innerWidth]);

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([innerHeight, 0]);

    // 线条生成器
    const line = d3.line()
      .x((d, i) => xScale(i))
      .y(d => yScale(d))
      .curve(d3.curveMonotoneX);

    // 绘制线条
    g.append('path')
      .datum(data)
      .attr('fill', 'none')
      .attr('stroke', 'steelblue')
      .attr('stroke-width', 2)
      .attr('d', line);

    // 添加数据点
    g.selectAll('.dot')
      .data(data)
      .enter().append('circle')
      .attr('class', 'dot')
      .attr('cx', (d, i) => xScale(i))
      .attr('cy', d => yScale(d))
      .attr('r', 4)
      .attr('fill', 'steelblue');

    // 坐标轴
    g.append('g')
      .attr('transform', `translate(0,${innerHeight})`)
      .call(d3.axisBottom(xScale));

    g.append('g')
      .call(d3.axisLeft(yScale));

  }, [data, width, height]);

  return <svg ref={svgRef} />;
}

适用场景

需要完全自定义的可视化
复杂的交互需求
创新的数据展示方式
学术研究项目

4. Apache ECharts (React/Vue封装)

React ECharts

import ReactECharts from 'echarts-for-react';

function SalesChart({ data }) {
  const option = {
    title: {
      text: '销售趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.month)
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: data.map(item => item.value),
      type: 'line',
      smooth: true
    }]
  };

  return <ReactECharts option={option} style={{ height: '400px' }} />;
}

Vue ECharts

<template>
  <div class="chart-container">
    <v-chart :option="option" autoresize />
  </div>
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent
]);

export default {
  components: {
    VChart
  },
  data() {
    return {
      option: {
        title: {
          text: '销售趋势'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [150, 230, 224, 218, 135],
          type: 'line'
        }]
      }
    };
  }
};
</script>

5. Victory / Nivo

Victory (React)

npm install victory

import { VictoryChart, VictoryLine, VictoryScatter } from 'victory';

function VictoryChartExample() {
  const data = [
    { x: 1, y: 2 },
    { x: 2, y: 3 },
    { x: 3, y: 5 },
    { x: 4, y: 4 },
    { x: 5, y: 7 }
  ];

  return (
    <VictoryChart>
      <VictoryLine
        data={data}
        x="x"
        y="y"
        style={{ data: { stroke: "#c43a3a" } }}
      />
      <VictoryScatter
        data={data}
        x="x"
        y="y"
        style={{ data: { fill: "#c43a3a" } }}
      />
    </VictoryChart>
  );
}

Nivo (React)

npm install @nivo/core @nivo/line

import { ResponsiveLine } from '@nivo/line';

function NivoLineChart({ data }) {
  return (
    <ResponsiveLine
      data={data}
      margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
      xScale="point"
      yScale="linear"
      curve="cardinal"
      colors={['#e11d48']}
      axisTop={null}
      axisRight={null}
      axisBottom={{
        orient: 'bottom',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '使用时间',
        legendOffset: 36
      }}
      axisLeft={{
        orient: 'left',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '完成率',
        legendOffset: -40
      }}
      pointSize={8}
      pointColor={{ theme: 'background' }}
      pointBorderWidth={2}
      pointBorderColor={{ from: 'serieColor' }}
      pointLabelYOffset={-12}
      useMesh={true}
      legends={[
        {
          anchor: 'bottom-right',
          direction: 'column',
          justify: false,
          translateX: 100,
          translateY: 0,
          itemsSpacing: 0,
          itemDirection: 'left-to-right',
          itemWidth: 80,
          itemHeight: 20,
          itemOpacity: 0.75,
          symbolSize: 12,
          symbolShape: 'circle',
          symbolBorderColor: 'rgba(0, 0, 0, .5)',
          effects: [
            {
              on: 'hover',
              style: {
                itemBackground: 'rgba(0, 0, 0, .03)',
                itemOpacity: 1
              }
            }
          ]
        }
      ]}
    />
  );
}

高级可视化框架

1. Ant Charts

npm install @ant-design/charts

import { Line } from '@ant-design/charts';

function AntLineChart({ data }) {
  const config = {
    data,
    xField: 'date',
    yField: 'value',
    seriesField: 'category',
    smooth: true,
    animation: {
      appear: {
        animation: 'path-in',
        duration: 3000,
      },
    },
  };

  return <Line {...config} />;
}

2. G2Plot

npm install @antv/g2plot

import { Line } from '@antv/g2plot';

function G2LineChart({ data }) {
  const plot = new Line('container', {
    data,
    xField: 'date',
    yField: 'value',
    smooth: true,
    animation: {
      appear: {
        animation: 'path-in',
        duration: 3000,
      },
    },
  });

  plot.render();

  return <div id="container" />;
}

3. Recharts

npm install recharts

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

function RechartsLineChart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="uv" stroke="#8884d8" activeDot={{ r: 8 }} />
        <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
      </LineChart>
    </ResponsiveContainer>
  );
}

可视化选型指南

1. 按需求选择

基础图表需求

推荐：Chart.js、ECharts
原因：简单易用，快速实现

复杂图表需求

推荐：D3.js、ECharts
原因：功能丰富，支持复杂可视化

大数据量需求

推荐：ECharts、D3.js
原因：性能优秀，支持大规模数据

高定制需求

推荐：D3.js
原因：完全控制图表元素

React/Vue项目

推荐：React ECharts、Victory、Recharts
原因：组件化开发，集成方便

2. 按项目规模选择

小型项目

// Chart.js方案
import { Chart } from 'chart.js';

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ]
    }]
  }
});

中型项目

// ECharts方案
import * as echarts from 'echarts';

const chart = echarts.init(document.getElementById('main'));
const option = {
  title: {
    text: '组合图表示例'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['蒸发量', '降水量', '平均温度']
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '水量',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: '温度',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: '蒸发量',
      type: 'bar',
      yAxisIndex: 0,
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
      name: '降水量',
      type: 'bar',
      yAxisIndex: 0,
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
      name: '平均温度',
      type: 'line',
      yAxisIndex: 1,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 16.9, 12.8, 5.3, 2.6]
    }
  ]
};
chart.setOption(option);

大型项目

// D3.js + 自定义组件方案
class AdvancedVisualization {
  constructor(container, data) {
    this.container = d3.select(container);
    this.data = data;
    this.width = 800;
    this.height = 600;
    this.margin = { top: 20, right: 20, bottom: 30, left: 40 };
    
    this.init();
  }
  
  init() {
    this.svg = this.container
      .append('svg')
      .attr('width', this.width)
      .attr('height', this.height);
      
    this.g = this.svg.append('g')
      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
      
    this.setupScales();
    this.createAxes();
    this.createElements();
  }
  
  setupScales() {
    this.xScale = d3.scaleTime()
      .domain(d3.extent(this.data, d => d.date))
      .range([0, this.width - this.margin.left - this.margin.right]);
      
    this.yScale = d3.scaleLinear()
      .domain([0, d3.max(this.data, d => d.value)])
      .range([this.height - this.margin.top - this.margin.bottom, 0]);
  }
  
  createAxes() {
    this.g.append('g')
      .attr('transform', `translate(0,${this.height - this.margin.top - this.margin.bottom})`)
      .call(d3.axisBottom(this.xScale));
      
    this.g.append('g')
      .call(d3.axisLeft(this.yScale));
  }
  
  createElements() {
    // 创建复杂的可视化元素
    const line = d3.line()
      .x(d => this.xScale(d.date))
      .y(d => this.yScale(d.value))
      .curve(d3.curveMonotoneX);
      
    this.g.append('path')
      .datum(this.data)
      .attr('fill', 'none')
      .attr('stroke', 'steelblue')
      .attr('stroke-width', 2)
      .attr('d', line);
      
    // 添加交互元素
    const tooltip = this.g.append('g')
      .attr('class', 'tooltip')
      .style('display', 'none');
      
    // 实现交互逻辑
    this.g.selectAll('.dot')
      .data(this.data)
      .enter().append('circle')
      .attr('class', 'dot')
      .attr('cx', d => this.xScale(d.date))
      .attr('cy', d => this.yScale(d.value))
      .attr('r', 5)
      .on('mouseover', function(event, d) {
        // 显示提示框
        tooltip.style('display', null);
      })
      .on('mouseout', function() {
        tooltip.style('display', 'none');
      });
  }
  
  updateData(newData) {
    this.data = newData;
    // 更新可视化
  }
}

性能优化技巧

1. 数据聚合

// 对于大数据集，进行数据聚合
function aggregateData(data, groupBy) {
  return d3.group(data, groupBy);
}

// 或者使用采样
function sampleData(data, sampleSize) {
  const step = Math.ceil(data.length / sampleSize);
  return data.filter((_, index) => index % step === 0);
}

2. 虚拟渲染

// 只渲染可视区域内的数据
function renderVisibleData(data, viewport) {
  const visibleData = data.filter(d => 
    d.x >= viewport.x && 
    d.x <= viewport.x + viewport.width &&
    d.y >= viewport.y && 
    d.y <= viewport.y + viewport.height
  );
  
  // 只渲染可见数据
  chart.render(visibleData);
}

3. Web Worker

// 创建Web Worker处理大数据
const workerCode = `
self.onmessage = function(e) {
  const data = e.data;
  const result = processData(data);
  self.postMessage(result);
};

function processData(data) {
  // 处理大数据的逻辑
  return aggregatedData;
}
`;

const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

worker.postMessage(largeData);
worker.onmessage = function(e) {
  const processedData = e.data;
  updateChart(processedData);
};

4. Canvas优化

// 使用离屏Canvas
const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');

// 预渲染静态元素
function renderStaticElements() {
  // 渲染背景、网格等静态元素
}

// 每帧只重绘动态元素
function animate() {
  // 只重绘动态部分
  requestAnimationFrame(animate);
}

可视化最佳实践

1. 用户体验优化

数据简化

// 避免过度装饰
const cleanChart = {
  chart: {
    backgroundColor: 'transparent',
    borderColor: 'transparent',
  },
  xAxis: {
    gridLineWidth: 0,
    labels: {
      style: {
        fontSize: '10px'
      }
    }
  },
  yAxis: {
    gridLineWidth: 1,
    gridLineColor: '#f0f0f0',
    labels: {
      style: {
        fontSize: '10px'
      }
    }
  }
};

交互设计

// 合理的交互响应
const interactiveChart = {
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#ccc',
    borderWidth: 1,
    textStyle: {
      color: '#333'
    },
    formatter: function(params) {
      // 自定义提示内容
      return `时间: ${params[0].axisValue}<br/>数值: ${params[0].value}`;
    }
  },
  dataZoom: [{
    type: 'slider',
    start: 0,
    end: 100
  }]
};

2. 响应式设计

// 响应式图表配置
function createResponsiveChart() {
  const chart = echarts.init(document.getElementById('chart'));
  
  // 监听窗口大小变化
  window.addEventListener('resize', function() {
    chart.resize();
  });
  
  // 适配不同屏幕
  function updateResponsive() {
    const width = document.getElementById('chart').offsetWidth;
    const height = document.getElementById('chart').offsetHeight;
    
    const option = {
      // 根据屏幕大小调整配置
      legend: {
        orient: width < 768 ? 'vertical' : 'horizontal',
        bottom: width < 768 ? 0 : 10
      }
    };
    
    chart.setOption(option);
  }
  
  // 初始化时调用
  updateResponsive();
  
  return chart;
}

3. 无障碍访问

// ARIA标签
const accessibleChart = {
  title: {
    text: '销售数据图表',
    subtext: '2023年各季度销售情况',
    a11y: {
      description: '这个图表展示了2023年四个季度的销售数据'
    }
  },
  series: [{
    name: '销售额',
    type: 'bar',
    data: [120, 200, 150, 80],
    label: {
      show: true,
      formatter: function(params) {
        return `销售额: ${params.value}万元`;
      }
    }
  }]
};

// 键盘导航
function addKeyboardNavigation(chart) {
  document.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowLeft') {
      // 向左导航
    } else if (e.key === 'ArrowRight') {
      // 向右导航
    }
  });
}

总结

前端可视化技术栈的选择需要综合考虑多个因素：

技术选择指南

需求场景	推荐技术	优势
简单快速开发	Chart.js、ECharts	开发效率高
复杂专业图表	ECharts、D3.js	功能强大
完全自定义	D3.js	灵活性最高
React/Vue项目	React ECharts、Victory	组件化开发
大数据可视化	ECharts、D3.js	性能优秀
企业级应用	Ant Charts、G2Plot	企业级支持