フロントエンドの実践: Vue チャート コンポーネント開発ガイド

npm install -g vue-cli

vue init webpack my-chart

cd my-chart
npm install

export default [
  { label: 'A', value: 10 },
  { label: 'B', value: 20 },
  { label: 'C', value: 30 },
  { label: 'D', value: 40 },
  { label: 'E', value: 50 },
];

<template>
  <div>
    <canvas ref="chartCanvas"></canvas>
  </div>
</template>

<script>
import ChartData from './ChartData.js';

export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      const chartCanvas = this.$refs.chartCanvas;
      const chartData = ChartData;

      // 绘制图表的逻辑代码

      // 示例代码：绘制一个简单的柱状图
      const ctx = chartCanvas.getContext('2d');
      const chartWidth = chartCanvas.offsetWidth;
      const chartHeight = chartCanvas.offsetHeight;

      chartData.forEach((data, index) => {
        const barWidth = 50;
        const barHeight = data.value * 5;
        const posX = index * (barWidth + 10) + 20;
        const posY = chartHeight - barHeight;

        ctx.fillStyle = '#FF5722';
        ctx.fillRect(posX, posY, barWidth, barHeight);
        ctx.textAlign = 'center';
        ctx.fillText(data.label, posX + barWidth / 2, chartHeight + 20);
      });
    },
  },
};
</script>

<style>
canvas {
  width: 400px;
  height: 300px;
}
</style>

<template>
  <div id="app">
    <chart></chart>
  </div>
</template>

<script>
import Chart from './components/Chart.vue';

export default {
  components: {
    Chart,
  },
};
</script>

npm run dev