Vue全家桶+Echarts数据可视化实践之项目背景

前端

2024-02-12 23:02:11

一年前，我刚开始做数据可视化的时候，在自己理解的基础上结合单位的项目使用HTML+CSS+JS+D3 做了一个小项目。

最近学习了Vue后，为了练练手，小试牛刀，对这个小项目进行了重构，下面分享一下该项目的实现。

项目背景

该项目是一个简单的医疗数据可视化项目，主要功能是展示医疗数据的统计信息和趋势。

数据来源是一个医疗数据库，其中包含了患者的年龄、性别、疾病类型、治疗方案等信息。

项目实现

1. 项目创建

首先，使用Vue CLI脚手架创建了一个Vue项目：

vue create vue-echarts-demo

2. 安装依赖包

然后，安装了Vue全家桶和Echarts等依赖包：

npm install vue vue-router vuex echarts

3. 配置Webpack

接下来，在webpack.config.js文件中配置了Webpack，主要是配置了Echarts的Loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.echarts$/,
        loader: 'echarts-loader'
      }
    ]
  }
};

4. 重构原有项目代码

然后，将原有项目代码重构为Vue组件。

首先，创建了一个名为LineChart.vue的Vue组件，该组件封装了Echarts折线图：

<template>
  <div id="line-chart"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('line-chart'));

    // 指定图表的配置项和数据
    var option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
}
</script>

然后，在App.vue组件中使用了LineChart组件：

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

<script>
import LineChart from './components/LineChart.vue'

export default {
  components: {
    LineChart
  }
}
</script>

5. 数据绑定和动态更新图表

最后，为了实现数据绑定和动态更新图表，使用Vuex管理了项目中的数据状态。

首先，在store/index.js文件中定义了store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  },
  getters: {
    getData: state => {
      return state.data
    }
  },
  mutations: {
    setData: (state, data) => {
      state.data = data
    }
  }
})

然后，在LineChart组件中使用了store：

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'getData'
    ])
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('line-chart'));

    // 指定图表的配置项和数据
    var option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: this.getData,
        type: 'line'
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
}
</script>