修改
This commit is contained in:
‘937886381’
273
src/views/home/components/productBar.vue
Normal file
273
src/views/home/components/productBar.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div style="position: relative;">
|
||||
<div class="legend">
|
||||
<span class="legend-item-line">
|
||||
<span class="line target"></span>
|
||||
目标
|
||||
</span>
|
||||
<span class="legend-item-line">
|
||||
<span class="line real"></span>
|
||||
实际
|
||||
</span>
|
||||
</div>
|
||||
<div ref="cockpitEffChip" id="coreLineChart" style="height: 219px; width: 100%;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'Container',
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
// 优先使用 ref 获取 DOM，避免 id 冲突
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
// color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
// title: {
|
||||
// text: 'Gradient Stacked Area Chart'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
// top: 10,
|
||||
// bottom: 20,
|
||||
right: 25,
|
||||
},
|
||||
// legend: {
|
||||
// data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
|
||||
// },
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// saveAsImage: {}
|
||||
// }
|
||||
// },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.15)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
width: 38,
|
||||
overflow: 'break'
|
||||
},
|
||||
data: ['6月', '7月', '8月', '9月', '10月', '11月']
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// name: '单位/片',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 14,
|
||||
align: 'left'
|
||||
},
|
||||
min: function (value) {
|
||||
return 0
|
||||
},
|
||||
max: function (value) {
|
||||
return Math.ceil(value.max)
|
||||
},
|
||||
scale: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.15)',
|
||||
// type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.15)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Line 1',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle', // 点的形状（circle为圆形）
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 132, 0, .5)',
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 132, 0, .5)',
|
||||
borderColor: 'rgba(255, 132, 0, .5)', // 数据点边框色（白色）
|
||||
borderWidth: 2, // 数据点边框宽度
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 132, 0, .4)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(18, 255, 245, 0)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
// emphasis: { focus: 'series' },
|
||||
data: [140, 232, 101, 264, 90, 340, 250]
|
||||
},
|
||||
{
|
||||
name: 'Line 2',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle', // 点的形状（circle为圆形）
|
||||
lineStyle: {
|
||||
color: 'rgba(98, 213, 180, .5)',
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(98, 213, 180, .5)',
|
||||
borderColor: 'rgba(98, 213, 180, .5)', // 数据点边框色（白色）
|
||||
borderWidth: 2, // 数据点边框宽度
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(98, 213, 180,.4)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(18, 255, 245, 0)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
// emphasis: { focus: 'series' },
|
||||
data: [120, 282, 111, 234, 220, 340, 310]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
|
||||
// 监听窗口缩放
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
|
||||
// 组件销毁时清理
|
||||
this.$once('hook:destroyed', () => {
|
||||
window.removeEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
myChart.dispose();
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.legend-item-line {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-right: 20px;
|
||||
/* 增加两个图例项之间的间距 */
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
/* 给文字左侧增加内边距 */
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
/* 调整线条位置 */
|
||||
top: 10px;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.target {
|
||||
background: rgba(91, 230, 190, 1);
|
||||
}
|
||||
|
||||
.real {
|
||||
background: rgba(255, 132, 0, 1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
/* 关键：增加图例圆点和文字之间的间距 */
|
||||
margin-bottom: 2px;
|
||||
background-color: rgba(255, 132, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.legend-item-line:nth-child(1) {
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 10px;
|
||||
/* 关键：增加图例圆点和文字之间的间距 */
|
||||
margin-bottom: 2px;
|
||||
background-color: rgba(91, 230, 190, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user