vue实现双折线图

实现双折线图的步骤

在Vue中实现双折线图，可以使用流行的图表库如ECharts或Chart.js。以下是基于ECharts的实现方法。

安装ECharts

通过npm或yarn安装ECharts：

npm install echarts --save

引入ECharts

在Vue组件中引入ECharts：

import * as echarts from 'echarts';

创建图表容器

在模板中添加一个容器元素：

<template>
  <div id="doubleLineChart" style="width: 600px; height: 400px;"></div>
</template>

初始化图表

在组件的mounted钩子中初始化图表：

mounted() {
  this.initDoubleLineChart();
},
methods: {
  initDoubleLineChart() {
    const chartDom = document.getElementById('doubleLineChart');
    const myChart = echarts.init(chartDom);

    const option = {
      title: {
        text: '双折线图示例'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['系列1', '系列2']
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '系列1',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230]
        },
        {
          name: '系列2',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330]
        }
      ]
    };

    myChart.setOption(option);
  }
}

响应式调整

添加窗口大小变化时的响应式调整：

mounted() {
  this.initDoubleLineChart();
  window.addEventListener('resize', this.resizeChart);
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeChart);
},
methods: {
  resizeChart() {
    if (this.myChart) {
      this.myChart.resize();
    }
  }
}

使用动态数据

如果需要从API获取数据，可以在初始化图表后更新数据：

async fetchData() {
  const response = await fetch('your-api-url');
  const data = await response.json();
  this.myChart.setOption({
    series: [
      { data: data.series1 },
      { data: data.series2 }
    ]
  });
}

自定义样式

通过修改option中的样式配置来自定义图表外观：

series: [
  {
    name: '系列1',
    type: 'line',
    data: [120, 132, 101, 134, 90, 230],
    itemStyle: {
      color: '#FF0000'
    },
    lineStyle: {
      width: 3
    }
  }
]

注意事项

• 确保在组件销毁时释放图表资源：

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

• 对于复杂的交互需求，可以查阅ECharts的官方文档进一步配置。