使用VUE3框架element-plus和echart写一个农产品仓库查看的图形界面,要包括六个图形,饼状图,散点图,直方图,传播链路图,块状图词云不同的六个,内容为仓库湿度,仓库温度,仓库库存,昨日销售量,今日收成,销售排行,要数据丰富,样式好看
时间: 2024-05-16 10:17:19 浏览: 114
首先,我们需要在项目中引入element-plus和echarts。可以通过以下命令安装它们:
```bash
npm install element-plus echarts --save
```
接下来,我们可以在Vue组件中使用这些库来创建六个图形。以下是一个简单的例子:
```html
<template>
<div>
<el-row>
<el-col :span="12">
<div class="chart-container">
<div class="chart-title">仓库湿度</div>
<el-chart :options="humidityOptions"></el-chart>
</div>
</el-col>
<el-col :span="12">
<div class="chart-container">
<div class="chart-title">仓库温度</div>
<el-chart :options="temperatureOptions"></el-chart>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="chart-container">
<div class="chart-title">仓库库存</div>
<el-chart :options="storageOptions"></el-chart>
</div>
</el-col>
<el-col :span="12">
<div class="chart-container">
<div class="chart-title">昨日销售量</div>
<el-chart :options="yesterdaySalesOptions"></el-chart>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="chart-container">
<div class="chart-title">今日收成</div>
<el-chart :options="todayHarvestOptions"></el-chart>
</div>
</el-col>
<el-col :span="12">
<div class="chart-container">
<div class="chart-title">销售排行</div>
<el-chart :options="salesRankingOptions"></el-chart>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
export default defineComponent({
data() {
return {
humidityOptions: {},
temperatureOptions: {},
storageOptions: {},
yesterdaySalesOptions: {},
todayHarvestOptions: {},
salesRankingOptions: {}
}
},
mounted() {
// 仓库湿度
this.humidityOptions = {
series: [
{
type: 'gauge',
detail: { formatter: '{value}%' },
data: [{ value: 50, name: '湿度' }]
}
]
}
// 仓库温度
this.temperatureOptions = {
series: [
{
type: 'gauge',
detail: { formatter: '{value}℃' },
data: [{ value: 25, name: '温度' }]
}
]
}
// 仓库库存
this.storageOptions = {
tooltip: {},
xAxis: { type: 'category', data: ['苹果', '香蕉', '橘子', '梨子', '葡萄'] },
yAxis: { type: 'value' },
series: [
{
type: 'bar',
data: [10, 20, 30, 40, 50]
}
]
}
// 昨日销售量
this.yesterdaySalesOptions = {
tooltip: { trigger: 'axis' },
legend: { data: ['销售量'] },
xAxis: { type: 'category', data: ['苹果', '香蕉', '橘子', '梨子', '葡萄'] },
yAxis: { type: 'value' },
series: [
{
name: '销售量',
type: 'line',
data: [20, 30, 40, 50, 60]
}
]
}
// 今日收成
this.todayHarvestOptions = {
series: [
{
type: 'pie',
data: [
{ value: 50, name: '苹果' },
{ value: 30, name: '香蕉' },
{ value: 20, name: '橘子' },
{ value: 10, name: '梨子' },
{ value: 5, name: '葡萄' }
]
}
]
}
// 销售排行
this.salesRankingOptions = {
series: [
{
type: 'wordCloud',
shape: 'circle',
gridSize: 8,
sizeRange: [12, 50],
rotationRange: [-90, 90],
textStyle: {
normal: {
color: function() {
return (
'rgb(' +
Math.round(Math.random() * 255) +
', ' +
Math.round(Math.random() * 255) +
', ' +
Math.round(Math.random() * 255) +
')'
)
}
}
},
data: [
{ name: '苹果', value: 100 },
{ name: '香蕉', value: 80 },
{ name: '橘子', value: 60 },
{ name: '梨子', value: 40 },
{ name: '葡萄', value: 20 }
]
}
]
}
}
})
</script>
<style>
.chart-container {
margin: 20px;
padding: 20px;
border: 1px solid #eee;
}
.chart-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
</style>
```
以上代码演示了如何使用element-plus和echarts创建六个不同类型的图表。可以根据需要修改每个图表的选项和数据,以满足实际需求。同时,使用CSS样式来美化图表的外观,以达到更好的用户体验。
阅读全文