[分享]折线图vue

折线图是一种常见的数据可视化方式，可以将数据按照时间或者顺序呈现出来，用于分析数据的变化趋势。在Vue中，我们可以使用一些优秀的第三方库来实现折线图的绘制和展示。其中，ECharts (http://...

折线图是一种常见的数据可视化方式，可以将数据按照时间或者顺序呈现出来，用于分析数据的变化趋势。在Vue中，我们可以使用一些优秀的第三方库来实现折线图的绘制和展示。

其中，ECharts (http://echarts.baidu.com/)是一个非常出色的可视化库，提供了多种图表类型。它支持动态数据、多图表联动、深度挖掘、等多种特性。并且，ECharts支持Vue的组件化编程风格，可以非常方便地集成到Vue应用中。

//引入echarts
import echarts from 'echarts'
export default {
  data() {
    return {
      xData: ['07-01', '07-02', '07-03', '07-04', '07-05'], //x轴数据
      yData: [50, 200, 360, 100, 80], //y轴数据
    }
  },
  mounted() {//页面加载时绘制图表
    this.drawChart()
  },
  watch: {
    //监听数据变化，更新图表
    yData: {
      handler: function() {
        this.drawChart()
      },
      deep: true
    }
  },
  methods: {
    //绘制折线图
    drawChart() {
      let myChart = echarts.init(document.getElementById('lineChart'))
      myChart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.yData,
          type: 'line',
          areaStyle: {}
        }]
      })
    }
  }
} 

在上面的代码中，我们通过import引入了ECharts库，并在mounted生命周期函数中调用了drawChart方法进行绘图。同时，我们监听了yData数据的变化，并在变化后调用drawChart方法更新图表。

对于echarts进行更多自定义的配置，可以在setOption函数中进行。比如我们可以设置表格的样式、数据类型等，还可以设置特定的样式主题。

myChart.setOption({
  color: ['#3398DB'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: this.xData,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '直接访问',
      type: 'bar',
      barWidth: '60%',
      data: this.yData
    }
  ]
}) 

以上代码是针对柱状图的例子，除了绘制柱状图的一些配置外，在tooltip、grid、xAxis、yAxis等配置项中还可以进行更多的自定义。

除了ECharts外，Vue还有一些其他的图表绘制库，比如v-charts (https://v-charts.js.org/)。它同样支持Vue的组件化编程风格，并且提供了多种图表类型可以进行选择，使用方式也非常简单。

总的来说，Vue的组件化编程模式可以让图表的实现更加简单、易维护，并且可以与其他组件进行无缝衔接。使用一些优秀的图表绘制库，可以大大提升开发效率和用户体验。