【Vue】Vue中使用echarts显示体脂称日、周、月、年数量

Vue中使用echarts，可以通过以下步骤来实现：

1. 安装依赖：使用npm或yarn安装e-charts和vue-echarts

npm install echarts vue-echarts

     2.在Vue组件中引入并使用echarts

<template>
  <div>
    <v-chart :options="chartOptions" />
  </div>
</template>
 
<script>
import { Chart } from 'vue-echarts'
import echarts from 'echarts'
 
export default {
  components: {
    'v-chart': Chart
  },
  data() {
    return {
      chartOptions: {}
    }
  },
  mounted() {
    // 根据需要设置echarts的全局主题、配置项
    echarts.registerTheme('mytheme', {
      // ...
    })
 
    // 初始化echarts实例，并设置options
    let chart = echarts.init(this.$refs.chart, 'mytheme')
    this.chartOptions = {
      title: {
        text: '体脂称日、周、月、年数量'
      },
      xAxis: {
        data: ['日', '周', '月', '年']
      },
      yAxis: {},
      series: [{
        name: '数量',
        type: 'bar',
        data: [10, 20, 30, 40]
      }]
    }
    chart.setOption(this.chartOptions)
  }
}
</script>

3.创建不同的options，实现日、周、月、年的显示

<template>
  <div>
    <v-chart :options="dayChartOptions" />
    <v-chart :options="weekChartOptions" />
    <v-chart :options="monthChartOptions" />
    <v-chart :options="yearChartOptions" />
  </div>
</template>
 
<script>
import { Chart } from 'vue-echarts'
import echarts from 'echarts'
 
export default {
  components: {
    'v-chart': Chart
  },
  data() {
    return {
      dayChartOptions: {},
      weekChartOptions: {},
      monthChartOptions: {},
      yearChartOptions: {}
    }
  },
  mounted() {
    // 根据需要设置echarts的全局主题、配置项
    echarts.registerTheme('mytheme', {
      // ...
    })
 
    // 日数据
    let dayChart = echarts.init(this.$refs.dayChart, 'mytheme')
    this.dayChartOptions = {
      title: {
        text: '体脂称日数量'
      },
      xAxis: {
        data: ['1号', '2号', '3号', '4号', '5号']
      },
      yAxis: {},
      series: [{
        name: '数量',
        type: 'bar',
        data: [10, 20, 30, 40, 50]
      }]
    }
    dayChart.setOption(this.dayChartOptions)
 
    // 周数据
    let weekChart = echarts.init(this.$refs.weekChart, 'mytheme')
    this.weekChartOptions = {
      title: {
        text: '体脂称周数量'
      },
      xAxis: {
        data: ['第1周', '第2周', '第3周', '第4周']
      },
      yAxis: {},
      series: [{
        name: '数量',
        type: 'bar',
        data: [100, 200, 300, 400]
      }]
    }
    weekChart.setOption(this.weekChartOptions)
 
    // 月数据
    let monthChart = echarts.init(this.$refs.monthChart, 'mytheme')
    this.monthChartOptions = {
      title: {
        text: '体脂称月数量'
      },
      xAxis: {
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {},
      series: [{
        name: '数量',
        type: 'bar',
        data: [1000, 2000, 3000, 4000, 5000, 6000]
      }]
    }
    monthChart.setOption(this.monthChartOptions)
 
    // 年数据
    let yearChart = echarts.init(this.$refs.yearChart, 'mytheme')
    this.yearChartOptions = {
      title: {
        text: '体脂称年数量'
      },
      xAxis: {
        data: ['2021年', '2022年', '2023年']
      },
      yAxis: {},
      series: [{
        name: '数量',
        type: 'bar',
        data: [10000, 20000, 30000]
      }]
    }
    yearChart.setOption(this.yearChartOptions)
  }
}
</script>