销售数据仪表盘

通过组合多种 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 } },
  },
});

在线代码演示

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>销售数据仪表盘示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
<style>
body {
max-width: 900px;
margin: 2rem auto;
font-family: sans-serif;
background: #f9f9f9;
padding: 1rem;
text-align: center;
}
.chart-wrapper {
  width: 100%;
  max-width: 900px;
  margin-bottom: 2rem;
}

canvas {
  background: #fff;
  border: 1px solid #ccc;
  display: block;
  width: 100% !important;
  height: 300px !important;
  margin: 0 auto;
}

</style>
</head>
<body>
<div class="chart-wrapper">
<canvas id="salesBar"></canvas>
</div>
<div class="chart-wrapper">
<canvas id="salesLine"></canvas>
</div>
<div class="chart-wrapper">
<canvas id="salesPie"></canvas>
</div>
<script>
(function () {
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 } }
    }
  });
})();

</script>
</body>
</html>

销售数据仪表盘

相关内容