盘点五大热门JavaScript图表库，助你高效开发！

1、Chart.js

• Chart.js 是一个简单、灵活的图表库，支持8种图表类型（如折线图、柱状图、饼图等）。它使用HTML5 Canvas元素来渲染图表，并且有良好的文档和社区支持。

使用方法：

npm install chart.js vue-chartjs

然后在你的Vue组件中使用：

<template>
  <div>
    <line-chart :data="chartData"></line-chart>
  </div>
</template>

<script>
import { Line } from 'vue-chartjs'

export default {
  components: {
    LineChart: Line
  },
  data() {
    return {
      chartData: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 39, 10, 40, 39, 80, 40]
          }
        ]
      }
    }
  }
}
</script>

 

2、 D3.js

D3.js（Data-Driven Documents）是一个非常强大的数据可视化库，它允许你通过操纵DOM来绑定任意数据到文档，并使用SVG、Canvas和HTML将数据转换为图表。D3.js 非常灵活，但学习曲线较陡峭。

使用方法：

npm install d3

在你的Vue组件中使用D3.js：

<template>
  <div ref="chart"></div>
</template>

<script>
import * as d3 from 'd3'

export default {
  mounted() {
    const data = [30, 86, 168, 281, 303, 365];
    const svg = d3.select(this.$refs.chart)
                  .append("svg")
                  .attr("width", 500)
                  .attr("height", 300);
    svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => i * 30)
      .attr("y", (d) => 300 - d)
      .attr("width", 25)
      .attr("height", (d) => d)
      .attr("fill", "blue");
  }
}
</script>

 3、Highcharts

Highcharts 是一个制作图表的纯JavaScript图表库，兼容性好，可以运行在所有的现代浏览器上。它支持多种图表类型，并且免费用于非商业用途。

使用方法：

npm install highcharts

在你的Vue组件中使用Highcharts：

<template>
  <div ref="chart"></div>
</template>

<script>
import Highcharts from 'highcharts'

export default {
  mounted() {
    Highcharts.chart(this.$refs.chart, {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Fruit Consumption'
      },
      xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
        title: {
          text: 'Fruit eaten'
        }
      },
      series: [{
        name: 'Jane',
        data: [1, 0, 4]
      }, {
        name: 'John',
        data: [5, 7, 3]
      }]
    });
  }
}
</script>

 4、ECharts

ECharts 是由百度开源的一个使用 JavaScript 实现的开源可视化库，支持丰富的图表类型，并提供了一套非常完善的图表工具库，包括直角坐标系、极坐标系、地理坐标系等。

使用方法：

npm install echarts vue-echarts

<template>
  <v-chart :options="chartOptions" />
</template>

<script>
import ECharts from 'vue-echarts'

export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: 'Traffic Sources'
        },
        series: [{
          type: 'pie',
          data: [
            { value: 335, name: 'Direct' },
            { value: 310, name: 'Email' },
            { value: 234, name: 'Ad Networks' },
            { value: 135, name: 'Video Ads' }
          ]
        }]
      }
    }
  }
}
</script>

5、ApexCharts

ApexCharts 是一个现代的JavaScript图表库，用于构建交互式图表和可视化。它简单易用，文档齐全，支持多种图表类型和丰富的配置选项。

使用方法：

npm install apexcharts vue-apexcharts

<template>
  <div>
    <apexchart width="500" type="line" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    apexchart: VueApexCharts
  },
  data() {
    return {
      series: [{
        name: 'Sales',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
      }],
      chartOptions: {
        chart: {
          height: 350,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight'
        },
        title: {
          text: 'Product Trends by Month',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        }
      }
    }
  }
}
</script>

这些图表库各有特点，你可以根据自己的项目需求、技术栈偏好以及对图表定制程度的要求来选择合适的图表库。