1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| <template>
| <div>
| <PanelHeader title="利润趋势" />
| <div class="main-panel panel-item-customers">
| <Echarts
| ref="chart"
| :chartStyle="chartStyle"
| :grid="grid"
| :legend="barLegend"
| :series="barSeries1"
| :tooltip="tooltip"
| :xAxis="xAxis1"
| :yAxis="yAxis1"
| :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
| style="height: 260px"
| />
| </div>
| </div>
| </template>
|
| <script setup>
| import { ref, onMounted } from 'vue'
| import Echarts from '@/components/Echarts/echarts.vue'
| import PanelHeader from './PanelHeader.vue'
|
| const chartStyle = { width: '100%', height: '150%' }
| const grid = { left: '3%', right: '4%', bottom: '3%', top: '4%', containLabel: true }
| const barLegend = { show: false, textStyle: { color: '#B8C8E0' }, data: ['利润'] }
| const barSeries1 = ref([
| {
| name: '利润',
| type: 'bar',
| barGap: 0,
| barWidth: 30,
| emphasis: { focus: 'series' },
| itemStyle: {
| color: {
| type: 'linear',
| x: 0, y: 1, x2: 0, y2: 0,
| colorStops: [
| { offset: 0, color: 'rgba(0,164,237,0)' },
| { offset: 1, color: '#4EE4FF' },
| ],
| },
| },
| data: [],
| },
| ])
|
| const xAxis1 = ref([
| {
| type: 'category',
| axisTick: { show: false },
| axisLabel: { color: '#B8C8E0' },
| data: [],
| },
| ])
|
| const tooltip = {
| trigger: 'axis',
| axisPointer: { type: 'shadow' },
| formatter(params) {
| let result = params[0].axisValueLabel + '<br/>'
| params.forEach((item) => {
| result += `<div>${item.marker} ${item.seriesName}: ${item.value} 元</div>`
| })
| return result
| },
| }
|
| const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]
|
| onMounted(() => {
| // 先用本地假数据（后续如有接口可替换）
| xAxis1.value[0].data = ['1月', '2月', '3月', '4月', '5月', '6月']
| barSeries1.value[0].data = [12000, 18000, 9000, 16000, 14000, 20000]
| })
| </script>
|
| <style scoped>
| .main-panel {
| display: flex;
| flex-direction: column;
| gap: 20px;
| }
|
| .panel-item-customers {
| border: 1px solid #1a58b0;
| padding: 18px;
| width: 100%;
| height: 428px;
| }
| </style>
|
|
