很抱歉，我是一名语言模型，无法进行图形界面的操作。但是，我可以提供一个基于 element-ui 的
数据统计图的示例代码：
```html
<template>
<div>
<el-card>
<div class="filter">
<el-select v-model="selectedYear">
<el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
</el-select>
<el-select v-model="selectedType">
<el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
</el-select>
</div>
<div class="chart">
<el-chart :data="chartData" :settings="chartSettings"></el-chart>
</div>
</el-card>
</div>
</template>
<script>
import { ElCard, ElSelect, ElOption, ElChart } from 'element-ui';
export default {
name: 'DataChart',
components: {
ElCard,
ElSelect,
ElOption,
ElChart,
},
data() {
return {
selectedYear: '2021',
selectedType: 'line',
years: ['2021', '2020', '2019'],
types: ['line', 'bar', 'pie'],
chartData: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
name: 'Sales',
type: 'line',
data: [120, 150, 200, 180, 250, 300, 280, 320, 350, 400, 450, 500],
},
{
name: 'Expenses',
type: 'line',
data: [100, 120, 150, 130, 180, 200, 190, 220, 240, 260, 280, 300],
},
],
},
chartSettings: {
legend: {
position: 'top',
},
series: {
Sales: {
smooth: true,
color: '#67c23a',
},
Expenses: {
smooth: true,
color: '#f56c6c',
},
},
xAxis: {
axisLabel: {
rotate: 45,
},
},
yAxis: {
axisLabel: {
formatter: '{value} $',
},
},
},
};
},
watch: {
selectedYear(newVal, oldVal) {
// Update chart data based on selected year
this.chartData.datasets.forEach((dataset) => {
dataset.data = this.getYearData(newVal);
});
},
selectedType(newVal, oldVal) {
// Update chart type based on selected type
this.chartData.datasets.forEach((dataset) => {
dataset.type = newVal;
});
},
},
mounted() {
// Initialize chart data
this.chartData.datasets.forEach((dataset) => {
dataset.data = this.getYearData(this.selectedYear);
});
},
methods: {
getYearData(year) {
// Get data for selected year
switch (year) {
case '2021':
return [120, 150, 200, 180, 250, 300, 280, 320, 350, 400, 450, 500];
case '2020':
return [100, 120, 150, 130, 180, 200, 190, 220, 240, 260, 280, 300];
case '2019':
return [80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190];
default:
return [];
}
},
},
};
</script>
<style>
.filter {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.chart {
height: 400px;
}
</style>
```
在这个示例代码中，我们使用了 `ElCard`、`ElSelect`、`ElOption` 和 `ElChart` 组件来构建一个基于 element-ui 的
数据统计图。我们可以通过下拉框选择不同的年份和图表类型，来展示不同的
数据。在组件的 `data` 中，我们定义了一些初始的
数据，包括选中的年份和图表类型、可选的年份和图表类型、图表的
数据和设置等。在 `watch` 中，我们监听了选中的年份和图表类型的变化，当它们发生变化时，我们更新了图表的
数据和设置。在 `mounted` 中，我们初始化了图表的
数据。在 `methods` 中，我们定义了一个根据选中年份返回相应
数据的方法。最后，在样式中，我们设置了一些简单的样式来美化组件的外观。
以上是一个基于 element-ui 的
数据统计图的示例代码，你可以根据需要进行修改和定制。
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
