大屏项目初始化
This commit is contained in:
163
screen-vue/src/views/desktop/screen/Erp/components/ChartLine.vue
Normal file
163
screen-vue/src/views/desktop/screen/Erp/components/ChartLine.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">月度销售额与增长率分析</span>
|
||||
</div>
|
||||
<div class="bar-line-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
const initBarLineChart = () => {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
chartInstance = echarts.init(el)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70' },
|
||||
padding: [8, 12],
|
||||
borderRadius: 6,
|
||||
formatter: function(params) {
|
||||
let res = `<b>${params[0].axisValue}</b>`
|
||||
params.forEach(item => {
|
||||
res += `<br/>${item.seriesName}：${item.value}${item.seriesName === '增长率' ? '%' : '万元'}`
|
||||
})
|
||||
return res
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '10',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 12, color: '#e0e6ff' }
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '12%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
interval: 0,
|
||||
color: '#b4c7e7'
|
||||
},
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
boundaryGap: true
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '销售额 (万元)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
|
||||
nameLocation: 'center',
|
||||
nameGap: 30
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '增长率 (%)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
|
||||
nameLocation: 'center',
|
||||
nameGap: 30
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '销售额',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: [120, 200, 150, 80, 70, 110, 130, 180, 160, 90, 100, 140],
|
||||
itemStyle: { color: '#409EFF' },
|
||||
barWidth: '15%'
|
||||
},
|
||||
{
|
||||
name: '增长率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [12, 20, 15, 8, 7, 11, 13, 18, 16, 9, 10, 14],
|
||||
itemStyle: { color: '#E6A23C' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
emphasis: { symbolSize: 7 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(230, 162, 60, 0.0)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option)
|
||||
window.addEventListener('resize', () => chartInstance.resize())
|
||||
}
|
||||
|
||||
onMounted(() => initBarLineChart())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409EFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.bar-line-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background-color: rgba(145, 200, 255, 0.9) !important;
|
||||
border-color: #409EFF !important;
|
||||
color: #0a3b70 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
</style>
|
||||
183
screen-vue/src/views/desktop/screen/Erp/components/ChartPic.vue
Normal file
183
screen-vue/src/views/desktop/screen/Erp/components/ChartPic.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">年度销售额占比分析</span>
|
||||
</div>
|
||||
<div class="pie-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
const initPieChart = () => {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
chartInstance = echarts.init(el)
|
||||
|
||||
const pieData = [
|
||||
{ value: 85, name: 'A-华东' },
|
||||
{ value: 78, name: 'A-华南' },
|
||||
{ value: 92, name: 'A-华北' },
|
||||
{ value: 65, name: 'B-华东' },
|
||||
{ value: 72, name: 'B-华南' },
|
||||
{ value: 88, name: 'B-华北' },
|
||||
{ value: 58, name: 'C-华东' },
|
||||
{ value: 66, name: 'C-华南' },
|
||||
{ value: 75, name: 'C-华北' },
|
||||
{ value: 48, name: 'D-华东' },
|
||||
{ value: 55, name: 'D-华南' },
|
||||
{ value: 62, name: 'D-华北' },
|
||||
{ value: 42, name: 'E-华东' },
|
||||
{ value: 49, name: 'E-华南' },
|
||||
{ value: 58, name: 'E-华北' }
|
||||
]
|
||||
|
||||
const colorList = [
|
||||
'#409EFF', '#36CFc9', '#67C23A', '#E6A23C', '#F56C6C',
|
||||
'#909399', '#722ED1', '#EB2F96', '#1890FF', '#52C41A',
|
||||
'#FAAD14', '#F5222D', '#8C8C8C', '#A062D4', '#F7BA1E'
|
||||
]
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70', fontSize: 12 },
|
||||
padding: [10, 15],
|
||||
borderRadius: 6,
|
||||
formatter: function(params) {
|
||||
return `分类：${params.name}<br/>销售额：${params.value}万元<br/>占比：${params.percent.toFixed(1)}%`
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
top: '10%',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 11, color: '#e0e6ff' },
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 10,
|
||||
pageIconColor: '#409EFF',
|
||||
pageTextStyle: { color: '#e0e6ff', fontSize: 10 },
|
||||
pageButtonItemGap: 6,
|
||||
pageButtonGap: 10,
|
||||
type: 'scroll'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售额',
|
||||
type: 'pie',
|
||||
radius: ['30%', '55%'],
|
||||
center: ['50%', '65%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: 'rgba(15, 52, 96, 0.9)',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
fontSize: 10,
|
||||
color: '#e0e6ff',
|
||||
formatter: '{b} {d}%',
|
||||
overflow: 'truncate',
|
||||
ellipsis: '...',
|
||||
distance: 8
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 12,
|
||||
length2: 8,
|
||||
lineStyle: { color: '#e0e6ff', width: 1 },
|
||||
smooth: 0.2,
|
||||
minTurnAngle: 45
|
||||
},
|
||||
data: pieData,
|
||||
color: colorList
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option)
|
||||
window.addEventListener('resize', () => chartInstance.resize())
|
||||
}
|
||||
|
||||
onMounted(() => initPieChart())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409EFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.pie-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background-color: rgba(145, 200, 255, 0.9) !important;
|
||||
border-color: #409EFF !important;
|
||||
color: #0a3b70 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
:deep(.echarts-legend-scroll) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:deep(.echarts-legend-scroll-text) {
|
||||
color: #e0e6ff !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
:deep(.echarts-legend-scroll-button) {
|
||||
border-color: #1a508b !important;
|
||||
}
|
||||
:deep(.echarts-legend-scroll-button-icon) {
|
||||
color: #409EFF !important;
|
||||
}
|
||||
|
||||
:deep(.ec-label) {
|
||||
z-index: 9999 !important;
|
||||
white-space: nowrap !important;
|
||||
font-size: 10px !important;
|
||||
color: #e0e6ff !important;
|
||||
}
|
||||
|
||||
:deep(.ec-label-line) {
|
||||
stroke: #e0e6ff !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
</style>
|
||||
148
screen-vue/src/views/desktop/screen/Test/components/ChartBar.vue
Normal file
148
screen-vue/src/views/desktop/screen/Test/components/ChartBar.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">产品销售额排名分析</span>
|
||||
</div>
|
||||
<div class="rank-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
const initRankChart = () => {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
chartInstance = echarts.init(el)
|
||||
|
||||
const salesData = [980, 1250, 1420, 1580, 1650, 1820, 2150, 2580]
|
||||
const totalSales = salesData.reduce((sum, val) => sum + val, 0)
|
||||
const percentData = salesData.map(val => ((val / totalSales) * 100).toFixed(1))
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70' },
|
||||
padding: [8, 12],
|
||||
borderRadius: 6,
|
||||
formatter: function(params) {
|
||||
const index = params[0].dataIndex
|
||||
return `产品：${params[0].name}<br/>销售额：${params[0].value}万元<br/>占比：${percentData[index]}%`
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
color: '#b4c7e7'
|
||||
},
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['产品H', '产品G', '产品F', '产品E', '产品D', '产品C', '产品B', '产品A'],
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
color: '#b4c7e7'
|
||||
},
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
inverse: false // 核心修改：关闭反转，第一名显示在底部
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '销售额',
|
||||
type: 'bar',
|
||||
barWidth: '15%',
|
||||
data: salesData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#409EFF' },
|
||||
{ offset: 1, color: '#1890FF' }
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: 10,
|
||||
color: '#e0e6ff',
|
||||
formatter: function(params) {
|
||||
const index = params.dataIndex
|
||||
return `${params.value}万元 (${percentData[index]}%)`
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option)
|
||||
window.addEventListener('resize', () => chartInstance.resize())
|
||||
}
|
||||
|
||||
onMounted(() => initRankChart())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409EFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.rank-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background-color: rgba(145, 200, 255, 0.9) !important;
|
||||
border-color: #409EFF !important;
|
||||
color: #0a3b70 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
</style>
|
||||
156
screen-vue/src/views/desktop/screen/Test/components/ChartDjt.vue
Normal file
156
screen-vue/src/views/desktop/screen/Test/components/ChartDjt.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">各产品线月度销售额构成</span>
|
||||
</div>
|
||||
<div class="stack-bar-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
const initStackBarChart = () => {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
chartInstance = echarts.init(el)
|
||||
|
||||
const productAData = [320, 302, 301, 334, 390, 330, 310, 350, 340, 320, 380, 360]
|
||||
const productBData = [120, 132, 101, 134, 90, 230, 180, 150, 170, 190, 210, 200]
|
||||
const productCData = [220, 182, 191, 234, 290, 330, 280, 260, 290, 270, 250, 280]
|
||||
|
||||
const totalData = productAData.map((val, index) => {
|
||||
return val + productBData[index] + productCData[index]
|
||||
})
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70', fontSize: 11 },
|
||||
padding: [8, 12],
|
||||
borderRadius: 6
|
||||
},
|
||||
legend: {
|
||||
top: '10',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 12, color: '#e0e6ff' }
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: { fontSize: 11, color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } }
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '销售额 (万元)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '产品A',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: '12%',
|
||||
data: productAData,
|
||||
itemStyle: { color: '#409EFF' }
|
||||
},
|
||||
{
|
||||
name: '产品B',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: '12%',
|
||||
data: productBData,
|
||||
itemStyle: { color: '#36CFc9' }
|
||||
},
|
||||
{
|
||||
name: '产品C',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: '12%',
|
||||
data: productCData,
|
||||
itemStyle: { color: '#67C23A' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 10,
|
||||
color: '#e0e6ff',
|
||||
formatter: function(params) {
|
||||
return totalData[params.dataIndex] + '万元'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option)
|
||||
window.addEventListener('resize', () => chartInstance.resize())
|
||||
}
|
||||
|
||||
onMounted(() => initStackBarChart())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409EFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stack-bar-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background-color: rgba(145, 200, 255, 0.9) !important;
|
||||
border-color: #409EFF !important;
|
||||
color: #0a3b70 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
</style>
|
||||
225
screen-vue/src/views/desktop/screen/Test/components/ChartDuo.vue
Normal file
225
screen-vue/src/views/desktop/screen/Test/components/ChartDuo.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">多产品线月度趋势分析</span>
|
||||
</div>
|
||||
<div class="multi-line-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
const initMultiLineChart = () => {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
chartInstance = echarts.init(el)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70' },
|
||||
padding: [8, 12],
|
||||
borderRadius: 6
|
||||
},
|
||||
legend: {
|
||||
top: '10',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 12, color: '#e0e6ff' }
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: { fontSize: 11, color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } }
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '销售额 (万元)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '产品线A',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
data: [320, 450, 380, 520, 480, 610, 550, 720, 680, 850, 790, 920],
|
||||
lineStyle: { width: 2, color: '#409EFF' },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(64, 158, 255, 0)' }
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 9,
|
||||
color: '#409EFF',
|
||||
formatter: '{c}'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '产品线B',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
data: [210, 280, 240, 350, 310, 420, 380, 490, 450, 580, 520, 650],
|
||||
lineStyle: { width: 2, color: '#36CFC9' },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(54, 207, 201, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(54, 207, 201, 0)' }
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 9,
|
||||
color: '#36CFC9',
|
||||
formatter: '{c}'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '产品线C',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
data: [150, 220, 180, 290, 250, 360, 320, 430, 390, 500, 460, 570],
|
||||
lineStyle: { width: 2, color: '#67C23A' },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(103, 194, 58, 0)' }
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 9,
|
||||
color: '#67C23A',
|
||||
formatter: '{c}'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '产品线D',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
data: [90, 160, 120, 210, 180, 270, 230, 320, 290, 380, 340, 430],
|
||||
lineStyle: { width: 2, color: '#E6A23C' },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(230, 162, 60, 0)' }
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 9,
|
||||
color: '#E6A23C',
|
||||
formatter: '{c}'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '产品线E',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
data: [50, 110, 80, 150, 120, 190, 160, 230, 200, 270, 240, 310],
|
||||
lineStyle: { width: 2, color: '#F56C6C' },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(245, 108, 108, 0)' }
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 9,
|
||||
color: '#F56C6C',
|
||||
formatter: '{c}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option)
|
||||
window.addEventListener('resize', () => chartInstance.resize())
|
||||
}
|
||||
|
||||
onMounted(() => initMultiLineChart())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409EFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.multi-line-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background-color: rgba(145, 200, 255, 0.9) !important;
|
||||
border-color: #409EFF !important;
|
||||
color: #0a3b70 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">月度销售额与增长率分析</span>
|
||||
</div>
|
||||
<div class="bar-line-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
const initBarLineChart = () => {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
chartInstance = echarts.init(el)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70' },
|
||||
padding: [8, 12],
|
||||
borderRadius: 6,
|
||||
formatter: function(params) {
|
||||
let res = `<b>${params[0].axisValue}</b>`
|
||||
params.forEach(item => {
|
||||
res += `<br/>${item.seriesName}：${item.value}${item.seriesName === '增长率' ? '%' : '万元'}`
|
||||
})
|
||||
return res
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '10',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 12, color: '#e0e6ff' }
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
interval: 0,
|
||||
color: '#b4c7e7'
|
||||
},
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
boundaryGap: true
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '销售额 (万元)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
|
||||
nameLocation: 'end',
|
||||
nameGap: 10,
|
||||
nameRotate: 0
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '增长率 (%)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
|
||||
nameLocation: 'end',
|
||||
nameGap: 10,
|
||||
nameRotate: 0
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '销售额',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: [120, 200, 150, 80, 70, 110, 130, 180, 160, 90, 100, 140],
|
||||
itemStyle: { color: '#409EFF' },
|
||||
barWidth: '15%',
|
||||
// 柱子顶部标签
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '增长率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [12, 20, 15, 8, 7, 11, 13, 18, 16, 9, 10, 14],
|
||||
smooth: true,
|
||||
lineStyle: { width: 1.5 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
emphasis: { symbolSize: 7 },
|
||||
// 折线标签
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 10,
|
||||
color: '#E6A23C',
|
||||
formatter: '{c}%'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(230, 162, 60, 0.0)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option)
|
||||
window.addEventListener('resize', () => chartInstance.resize())
|
||||
}
|
||||
|
||||
onMounted(() => initBarLineChart())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409EFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.bar-line-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background-color: rgba(145, 200, 255, 0.9) !important;
|
||||
border-color: #409EFF !important;
|
||||
color: #0a3b70 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
</style>
|
||||
175
screen-vue/src/views/desktop/screen/Test/components/ChartPic.vue
Normal file
175
screen-vue/src/views/desktop/screen/Test/components/ChartPic.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">年度销售额占比分析</span>
|
||||
</div>
|
||||
<div class="pie-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
const initPieChart = () => {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
chartInstance = echarts.init(el)
|
||||
|
||||
const pieData = [
|
||||
{ value: 85, name: 'A-华东' },
|
||||
{ value: 78, name: 'A-华南' },
|
||||
{ value: 92, name: 'A-华北' },
|
||||
{ value: 65, name: 'B-华东' },
|
||||
{ value: 72, name: 'B-华南' },
|
||||
{ value: 88, name: 'B-华北' },
|
||||
{ value: 58, name: 'C-华东' }
|
||||
]
|
||||
|
||||
const colorList = [
|
||||
'#409EFF', '#36CFc9', '#67C23A', '#E6A23C', '#F56C6C',
|
||||
'#909399', '#722ED1', '#EB2F96', '#1890FF', '#52C41A',
|
||||
'#FAAD14', '#F5222D', '#8C8C8C', '#A062D4', '#F7BA1E'
|
||||
]
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70', fontSize: 12 },
|
||||
padding: [10, 15],
|
||||
borderRadius: 6,
|
||||
formatter: function(params) {
|
||||
return `分类：${params.name}<br/>销售额：${params.value}万元<br/>占比：${params.percent.toFixed(1)}%`
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
top: '10%',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 11, color: '#e0e6ff' },
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 10,
|
||||
pageIconColor: '#409EFF',
|
||||
pageTextStyle: { color: '#e0e6ff', fontSize: 10 },
|
||||
pageButtonItemGap: 6,
|
||||
pageButtonGap: 10,
|
||||
type: 'scroll'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售额',
|
||||
type: 'pie',
|
||||
radius: ['30%', '55%'],
|
||||
center: ['50%', '65%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: 'rgba(15, 52, 96, 0.9)',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
fontSize: 10,
|
||||
color: '#e0e6ff',
|
||||
formatter: '{b} {d}%',
|
||||
overflow: 'truncate',
|
||||
ellipsis: '...',
|
||||
distance: 8
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 12,
|
||||
length2: 8,
|
||||
lineStyle: { color: '#e0e6ff', width: 1 },
|
||||
smooth: 0.2,
|
||||
minTurnAngle: 45
|
||||
},
|
||||
data: pieData,
|
||||
color: colorList
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option)
|
||||
window.addEventListener('resize', () => chartInstance.resize())
|
||||
}
|
||||
|
||||
onMounted(() => initPieChart())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409EFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.pie-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background-color: rgba(145, 200, 255, 0.9) !important;
|
||||
border-color: #409EFF !important;
|
||||
color: #0a3b70 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
:deep(.echarts-legend-scroll) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:deep(.echarts-legend-scroll-text) {
|
||||
color: #e0e6ff !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
:deep(.echarts-legend-scroll-button) {
|
||||
border-color: #1a508b !important;
|
||||
}
|
||||
:deep(.echarts-legend-scroll-button-icon) {
|
||||
color: #409EFF !important;
|
||||
}
|
||||
|
||||
:deep(.ec-label) {
|
||||
z-index: 9999 !important;
|
||||
white-space: nowrap !important;
|
||||
font-size: 10px !important;
|
||||
color: #e0e6ff !important;
|
||||
}
|
||||
|
||||
:deep(.ec-label-line) {
|
||||
stroke: #e0e6ff !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
</style>
|
||||
205
screen-vue/src/views/desktop/screen/Test/components/ChartTwo.vue
Normal file
205
screen-vue/src/views/desktop/screen/Test/components/ChartTwo.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">月度收支与占比分析</span>
|
||||
</div>
|
||||
<div class="bar-line-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
const initBarLineChart = () => {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
chartInstance = echarts.init(el)
|
||||
|
||||
// 收支数据
|
||||
const incomeData = [1200, 2000, 1500, 800, 700, 1100, 1300, 1800, 1600, 900, 1000, 1400]
|
||||
const expenseData = [800, 1500, 1000, 600, 500, 800, 900, 1200, 1100, 700, 800, 950]
|
||||
// 计算支出占收入的比例（保留1位小数）
|
||||
const ratioData = incomeData.map((income, index) => {
|
||||
const expense = expenseData[index]
|
||||
return income === 0 ? 0 : ((expense / income) * 100).toFixed(1)
|
||||
})
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70' },
|
||||
padding: [8, 12],
|
||||
borderRadius: 6,
|
||||
formatter: function(params) {
|
||||
let res = `<b>${params[0].axisValue}</b>`
|
||||
params.forEach(item => {
|
||||
const unit = item.seriesName === '支出占收入比' ? '%' : '万元'
|
||||
res += `<br/>${item.seriesName}：${item.value}${unit}`
|
||||
})
|
||||
return res
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '10',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 12, color: '#e0e6ff' }
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
interval: 0,
|
||||
color: '#b4c7e7'
|
||||
},
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
boundaryGap: true
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额 (万元)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
|
||||
nameLocation: 'end',
|
||||
nameGap: 10,
|
||||
nameRotate: 0
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '占比 (%)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
|
||||
nameLocation: 'end',
|
||||
nameGap: 10,
|
||||
nameRotate: 0,
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: incomeData,
|
||||
itemStyle: { color: '#67C23A' }, // 绿色代表收入
|
||||
barWidth: '12%', // 适配双柱宽度
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: expenseData,
|
||||
itemStyle: { color: '#F56C6C' }, // 红色代表支出
|
||||
barWidth: '12%',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '支出占收入比',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: ratioData,
|
||||
smooth: true,
|
||||
lineStyle: { width: 1.5, color: '#409EFF' }, // 蓝色代表占比曲线
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
emphasis: { symbolSize: 7 },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 10,
|
||||
color: '#409EFF',
|
||||
formatter: '{c}%'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(64, 158, 255, 0.0)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option)
|
||||
window.addEventListener('resize', () => chartInstance.resize())
|
||||
}
|
||||
|
||||
onMounted(() => initBarLineChart())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: '#409EFF';
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.bar-line-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background-color: rgba(145, 200, 255, 0.9) !important;
|
||||
border-color: #409EFF !important;
|
||||
color: #0a3b70 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
</style>
|
||||
146
screen-vue/src/views/desktop/screen/Test/components/ChartYbp.vue
Normal file
146
screen-vue/src/views/desktop/screen/Test/components/ChartYbp.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">年度销售额完成率</span>
|
||||
</div>
|
||||
<div class="gauge-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
const initGaugeChart = () => {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
chartInstance = echarts.init(el)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70', fontSize: 11 },
|
||||
padding: [8, 12],
|
||||
borderRadius: 6,
|
||||
formatter: '完成率：{c}%<br/>目标：1500万元<br/>已完成：1275万元'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 10,
|
||||
radius: '80%',
|
||||
center: ['50%', '70%'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15,
|
||||
color: [
|
||||
[0.3, '#F56C6C'],
|
||||
[0.7, '#E6A23C'],
|
||||
[1, '#409EFF']
|
||||
]
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length: 15,
|
||||
lineStyle: {
|
||||
color: '#b4c7e7',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
length: 8,
|
||||
lineStyle: {
|
||||
color: '#b4c7e7',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#e0e6ff',
|
||||
fontSize: 10,
|
||||
distance: 20
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
||||
length: '85%',
|
||||
width: 8,
|
||||
color: '#fff',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
||||
shadowBlur: 5
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
color: '#e0e6ff',
|
||||
offsetCenter: [0, '50%']
|
||||
},
|
||||
detail: {
|
||||
fontSize: 16,
|
||||
color: '#409EFF',
|
||||
fontWeight: 600,
|
||||
offsetCenter: [0, '20%'],
|
||||
formatter: '{value}%'
|
||||
},
|
||||
data: [{ value: 85, name: '销售额完成率' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option)
|
||||
window.addEventListener('resize', () => chartInstance.resize())
|
||||
}
|
||||
|
||||
onMounted(() => initGaugeChart())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409EFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.gauge-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background-color: rgba(145, 200, 255, 0.9) !important;
|
||||
border-color: #409EFF !important;
|
||||
color: #0a3b70 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
</style>
|
||||
246
screen-vue/src/views/desktop/screen/Test/index.vue
Normal file
246
screen-vue/src/views/desktop/screen/Test/index.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="work-layout-container">
|
||||
<div class="work-section work-top-header">
|
||||
<div class="work-card full-card">
|
||||
<h3>Work页面顶部区域 (10%)</h3>
|
||||
<p>可放置工作概览、筛选条件、操作按钮等</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-main-container">
|
||||
<div class="work-col">
|
||||
<div class="work-inner-section work-inner-one-third">
|
||||
<div class="work-card">
|
||||
<CahrtLine />
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-inner-section work-inner-one-third">
|
||||
<div class="work-card">
|
||||
<ChartPic />
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-inner-section work-inner-one-third">
|
||||
<div class="work-card">
|
||||
<ChartBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-col">
|
||||
<div class="work-inner-section work-inner-two-third">
|
||||
<div class="work-card">
|
||||
<h3>中间上部 (60%)</h3>
|
||||
<p>核心工作内容/进度展示</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-inner-section work-inner-one-third">
|
||||
<div class="work-card">
|
||||
<ChartYbp />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-col">
|
||||
<div class="work-inner-section work-inner-one-third">
|
||||
<div class="work-card">
|
||||
<ChartDjt />
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-inner-section work-inner-one-third">
|
||||
<div class="work-card">
|
||||
<ChartTwo />
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-inner-section work-inner-one-third">
|
||||
<div class="work-card">
|
||||
<ChartDuo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CahrtLine from './components/ChartLine.vue';
|
||||
import ChartPic from './components/ChartPic.vue';
|
||||
import ChartBar from './components/ChartBar.vue';
|
||||
import ChartYbp from './components/ChartYbp.vue';
|
||||
import ChartDjt from './components/ChartDjt.vue';
|
||||
import ChartTwo from './components/ChartTwo.vue';
|
||||
import ChartDuo from './components/ChartDuo.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.work-layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.work-top-header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.work-main-container {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.work-col {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.work-inner-one-third {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.work-inner-two-third {
|
||||
flex: 2;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.work-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(15, 52, 96, 0.9);
|
||||
border: 1px solid #1a508b;
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #e0e6ff;
|
||||
backdrop-filter: blur(4px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.full-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.work-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(60, 156, 255, 0.3);
|
||||
border-color: #3c9cff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.work-card h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 1px;
|
||||
background: #3c9cff;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.work-card p {
|
||||
font-size: 13px;
|
||||
opacity: 0.75;
|
||||
color: #b4c7e7;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.work-layout-container {
|
||||
padding: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
.work-main-container {
|
||||
gap: 4px;
|
||||
}
|
||||
.work-col {
|
||||
gap: 4px;
|
||||
}
|
||||
.work-card {
|
||||
padding: 10px;
|
||||
}
|
||||
.work-card h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.work-card p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.work-layout-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
padding: 6px;
|
||||
gap: 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.work-top-header {
|
||||
height: auto;
|
||||
min-height: 80px;
|
||||
}
|
||||
.work-main-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: calc(100% - 80px);
|
||||
gap: 6px;
|
||||
}
|
||||
.work-col {
|
||||
width: 100%;
|
||||
height: 33%;
|
||||
gap: 6px;
|
||||
}
|
||||
.work-card {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 900px) {
|
||||
.work-layout-container {
|
||||
padding: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
.work-main-container {
|
||||
gap: 4px;
|
||||
}
|
||||
.work-col {
|
||||
gap: 4px;
|
||||
}
|
||||
.work-card {
|
||||
padding: 8px;
|
||||
}
|
||||
.work-card h3 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.work-card p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user