销售数据仪表盘

通过组合多种 Chart.js 图表，可以实现一个完整的销售数据仪表盘，帮助用户从多个角度分析销售情况。以下示例包括柱状图、折线图和饼图，直观展示销售趋势与结构。

const ctxBar = document.getElementById('salesBar').getContext('2d');
const salesBar = new Chart(ctxBar, {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [{
      label: '销售额',
      data: [120, 150, 170, 140, 180],
      backgroundColor: 'rgba(54, 162, 235, 0.7)'
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: true } }
  }
});

const ctxLine = document.getElementById('salesLine').getContext('2d');
const salesLine = new Chart(ctxLine, {
  type: 'line',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [{
      label: '利润',
      data: [30, 40, 35, 50, 60],
      borderColor: 'rgb(255, 99, 132)',
      fill: false,
      tension: 0.1
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: true } }
  }
});

const ctxPie = document.getElementById('salesPie').getContext('2d');
const salesPie = new Chart(ctxPie, {
  type: 'pie',
  data: {
    labels: ['电子产品', '服装', '家居'],
    datasets: [{
      label: '销售占比',
      data: [45, 30, 25],
      backgroundColor: [
        'rgba(255, 99, 132, 0.7)',
        'rgba(54, 162, 235, 0.7)',
        'rgba(255, 206, 86, 0.7)'
      ]
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: true } }
  }
});

销售数据仪表盘 ​

销售数据仪表盘