掘金实时数据展示——VueEcharts折线图应用

一、VueEcharts简介

VueEcharts是一个基于Vue2.x封装的Echarts图表组件，可以让开发者通过简单的配置来快速展示各种形式的图表。在数据展示、统计分析等领域都有着广泛的应用。

二、VueEcharts折线图示例

1. 前置条件

首先，需要在项目中安装VueEcharts组件：

  
    npm install --save echarts vue-echarts
  

2. 引入包

在Vue文件中引入包，即可开始使用VueEcharts进行图表展示。

  
    import Echarts from 'vue-echarts/components/ECharts';
    import 'echarts/lib/chart/line';
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/legend';
    import 'echarts/lib/component/title';
  

3. 配置数据

在Vue组件内定义需要展示的图表数据，例如下面的数据：

  
    data () {
      return {
        chartData: {
          yAxis: [{
            type: 'value'
          }],
          xAxis: [{
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }],
          series: [{
            name: '用户量',
            type: 'line',
            data: [100, 200, 400, 300, 500, 250, 450]
          }]
        }
      }
    }
  

4. 渲染图表

在Vue模板中，使用Echarts组件渲染图表。通过简单的配置，我们就可以得到一个美观且实用的折线图：

5. 实现实时动态数据展示

通过Vue的生命周期钩子函数和定时器，我们可以实现实时动态数据展示：

  
    created: function () {
      let self = this;  // 声明一个self变量，避免在定时器中出现作用域问题

      // 定时器，每2s更新一次y轴数据
      setInterval(function () {
        self.chartData.series[0].data = [Math.random() * 500, Math.random() * 500, Math.random() * 500, Math.random() * 500, Math.random() * 500, Math.random() * 500, Math.random() * 500];
      }, 2000);
    }
  

三、小标题

1. 实现图表数据导出

很多时候，我们需要将图表数据导出。VueEcharts为我们提供了这个功能。

  
    // 在data中声明一个变量
    data () {
      return {
        chartData: {...},
        exportUrl: ''
      }
    },

    // 在Mounted生命周期中，获取导出url
    mounted () {
      this.exportUrl = this.$refs.echarts.getDownloadURL({
        filename: 'chart-data'  // 可选，自定义文件名
      });
    },

    // 在模板中添加导出按钮
    导出数据

    // 注意：需要给Echarts组件一个ref属性，便于获取导出url
    
  

2. 实现图表样式自定义

VueEcharts也允许我们自定义图表的样式。例如，我们可以修改折线的粗细、颜色等各种属性，使得图表更加美观。

  
    data () {
      return {
        chartData: {...},
        chartStyle: {
          lineStyle: {
            width: 2,  // 折线宽度
            color: '#3366CC'  // 折线颜色
          },
          label: {
            show: true,  // 显示标签
            position: 'top',  // 标签位置
            textStyle: {
              color: '#3366CC'  // 标签文本颜色
            }
          }
        }
      }
    },

    // 在模板中给Echarts组件传递style属性即可
    
  

3. 实现动态改变X轴数据

有时我们需要动态改变图表的X轴数据，例如添加新的日期等。示例代码如下：

  
    data () {
      return {
        chartData: {
          yAxis: [
            {type: 'value'}
          ],
          xAxis: [
            {type: 'category', data: ['周一', '周二', '周三']}
          ],
          series: [
            {name: '用户量', type: 'line', data: [100, 200, 300]}
          ]
        },
        xAxisData: ['周一', '周二', '周三']
      }
    },

    // 在模板中通过xAxisData数组来修改X轴数据
    添加日期
    

    methods: {
      changeXAxisData () {
        this.xAxisData.push('周四');
        this.xAxisData.push('周五');
        this.chartData.xAxis[0].data = this.xAxisData;
        this.chartData.series[0].data = [100, 200, 300, 400, 500];
      }
    }
  

4. 实现雷达图展示

除了折线图，VueEcharts还支持绘制雷达图。下面是一些示例数据和配置项：

  
    data () {
      return {
        chartData: {
          radar: {
            indicator: [
              {name: '销售', max: 100},
              {name: '财务', max: 100},
              {name: '研发', max: 100},
              {name: '客服', max: 100},
              {name: '市场', max: 100}
            ],
            splitLine: {
              lineStyle: {
                color: [
                  'rgba(211, 211, 211, 0.3)',
                  'rgba(211, 211, 211, 0.3)',
                  'rgba(211, 211, 211, 0.3)',
                  'rgba(211, 211, 211, 0.3)',
                  'rgba(211, 211, 211, 0.3)'
                ]
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  'rgba(211, 211, 211, 0.2)',
                  'rgba(211, 211, 211, 0.4)',
                  'rgba(211, 211, 211, 0.6)',
                  'rgba(211, 211, 211, 0.8)',
                  'rgba(211, 211, 211, 1)'
                ]
              }
            }
          },
          series: [
            {
              type: 'radar',
              data: [
                {
                  value: [60, 73, 85, 40, 65],
                  name: '公司1'
                },
                {
                  value: [85, 90, 38, 50, 80],
                  name: '公司2'
                }
              ]
            }
          ]
        }
      }
    }
    
  

四、结语

VueEcharts折线图组件是一个强大易用的开源工具，可以让我们快速地展示和分析数据。通过深入了解VueEcharts的各种功能和API，我们可以让自己的数据分析工作更加高效、专业。