<template>
<div class="chart-container">
<!-- 切换按钮 -->
<div class="controls">
<div v-for="unit in ['day', 'month', 'year']" :key="unit" @click="changeTimeUnit(unit)"
:class="{ active: timeUnit === unit }">
{{ { day: '日', month: '月', year: '年' }[unit] }}
</div>
</div>
<!-- 图表 -->
<v-chart :options="chartOption" autoresize style="width: 100%; height: 340px;" />
</div>
</template>
<script>
export default {
name: 'SmoothLineChart',
data() {
return {
timeUnit: 'day'
};
},
computed: {
// 根据当前 timeUnit 返回对应的标签和数据
chartData() {
switch (this.timeUnit) {
case 'day':
return [
45000, 42000, 48000, 51000, 47000, 53000, 58000, 56000, 50000, 52000,
49000, 54000, 57000, 59000, 60000, 58000, 55000, 52000, 50000, 48000,
46000, 44000, 43000, 45000, 47000, 50000, 53000, 55000, 57000, 59000
];
case 'month':
return [30000, 32000, 35000, 40000, 45000, 48000, 50000, 52000, 54000, 56000, 58000, 59000, 60000];
case 'year':
return [40000, 42000, 45000, 50000, 55000, 58000];
default:
return [];
}
},
chartLabels() {
switch (this.timeUnit) {
case 'day':
return [
'8/1', '8/2', '8/3', '8/4', '8/5', '8/6', '8/7', '8/8', '8/9', '8/10',
'8/11', '8/12', '8/13', '8/14', '8/15', '8/16', '8/17', '8/18', '8/19', '8/20',
'8/21', '8/22', '8/23', '8/24', '8/25', '8/26', '8/27', '8/28', '8/29', '8/30', '8/31'
];
case 'month':
return [
'2023-08', '2023-09', '2023-10', '2023-11', '2023-12', '2024-01',
'2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07', '2024-08'
];
case 'year':
return ['2019', '2020', '2021', '2022', '2023', '2024'];
default:
return [];
}
},
chartOption() {
return {
title: {
text: '营业额',
left: '10%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#FF7D00',
width: 2,
type: 'dashed'
}
},
formatter: params => {
const p = params[0];
return `${p.name}<br/>营业额: ¥${p.value.toLocaleString()}`;
}
},
grid: {
left: '10%',
right: '10%',
bottom: '15%',
top: '20%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.chartLabels,
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 60000,
axisLabel: {
formatter: '{value} '
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#eee'
}
}
},
series: [{
name: '营业额',
type: 'line',
data: this.chartData,
smooth: true,
symbol: 'none', // 🔥 关键：关闭点的显示
symbolSize: 6,
itemStyle: {
color: '#FF7D00'
},
lineStyle: {
width: 3,
color: '#FF7D00'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#FFFAEC'
},
{
offset: 1,
color: 'rgba(255, 125, 0, 0.1)'
}
]
}
}
}] // ✅ 数组结束
}; // ✅ 对象结束 ←← 关键：这里必须有一个 } 和 ;
} // ✅ 函数结束
}, // ✅ computed 结束
methods: {
changeTimeUnit(unit) {
this.timeUnit = unit;
}
}
};
</script>
<style scoped>
.chart-container {
padding: 16px;
font-family: Arial, sans-serif;
position: relative;
width: 100%;
/* height: 100%; */
/* 占满父容器高度 */
box-sizing: border-box;
}
.controls {
position: absolute;
top: 10px;
right: 20px;
z-index: 10;
display: flex;
gap: 8px;
}
.controls div {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
height: 32px;
width: 46px;
border-radius: 15px;
font-size: 14px;
cursor: pointer;
}
.controls div.active {
background: #FFFAE8;
color: #F79800;
border-color: #F79800;
}
.v-chart {
width: 100%;
/* height: 100%; */
margin-top: 40px;
}
</style>
画出的图左右两边有很大的边框可以去除吗
最新发布
本文介绍了一种类似Photoshop中酷炫选择框的实现方法，主要通过使用Matrix和Graphics.beginBitmapFill等功能来完成。
扫一扫
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
