vue数据可视化开发常用库

一、常用数据可视化库

1. ECharts

• 特点：功能强大，支持多种图表类型，社区活跃。
• 适用场景：复杂图表、大数据量、3D 可视化。
• 安装：

  npm install echarts
  

• 示例：

  <template>
    <div ref="chart" class="chart-container"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    mounted() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      myChart.setOption({
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
        yAxis: { type: 'value' },
        series: [{ data: [120, 200, 150], type: 'bar' }]
      });
    }
  };
  </script>
  

2. Chart.js

• 特点：轻量级，易于上手，支持响应式。
• 适用场景：简单图表、快速开发。
• 安装：

  npm install chart.js
  

• 示例：

  <template>
    <canvas ref="chart"></canvas>
  </template>
  
  <script>
  import { Chart, BarC