vue实现双折线图

实现双折线图的步骤

在Vue中实现双折线图通常需要使用第三方图表库，例如ECharts或Chart.js。以下是使用ECharts和Chart.js分别实现双折线图的方法。

使用ECharts实现双折线图

安装ECharts依赖：

npm install echarts --save

在Vue组件中引入并使用ECharts：

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '双折线图示例'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['系列1', '系列2']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '系列1',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '系列2',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

使用Chart.js实现双折线图

安装Chart.js依赖：

npm install chart.js --save

在Vue组件中引入并使用Chart.js：

<template>
  <canvas ref="chart" width="600" height="400"></canvas>
</template>

<script>
import { Chart, registerables } from 'chart.js';

export default {
  mounted() {
    Chart.register(...registerables);
    this.initChart();
  },
  methods: {
    initChart() {
      const ctx = this.$refs.chart.getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [
            {
              label: '系列1',
              data: [120, 132, 101, 134, 90, 230, 210],
              borderColor: 'rgb(75, 192, 192)',
              tension: 0.1
            },
            {
              label: '系列2',
              data: [220, 182, 191, 234, 290, 330, 310],
              borderColor: 'rgb(255, 99, 132)',
              tension: 0.1
            }
          ]
        },
        options: {
          responsive: true,
          plugins: {
            title: {
              display: true,
              text: '双折线图示例'
            }
          }
        }
      });
    }
  }
};
</script>

注意事项

确保在组件销毁时清理图表实例以避免内存泄漏。对于ECharts，可以在beforeDestroy钩子中调用dispose方法：

beforeDestroy() {
  if (this.myChart) {
    this.myChart.dispose();
  }
}

对于Chart.js，直接销毁图表实例即可：

beforeDestroy() {
  if (this.chart) {
    this.chart.destroy();
  }
}

通过以上方法，可以在Vue中轻松实现双折线图，并根据需求自定义样式和数据。