Vue中使用echarts,可以通过以下步骤来实现:
- 安装依赖:使用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>