-
单位：万
+
@@ -399,6 +398,11 @@ export default {
}
})
}
+ if(!seriesData.length>0) return
+ const sumList = seriesData[0].values.map((_, idx) =>
+ seriesData.map(item => Number(item.values[idx])).reduce((a, b) => a + b, 0)
+ );
+ const maxX = Math.max(...sumList) + 200;
const option = {
backgroundColor: 'transparent',
tooltip: {
@@ -406,6 +410,7 @@ export default {
backgroundColor: 'rgba(15, 42, 66, 0.9)',
borderColor: '#61c8ee',
textStyle: { color: '#fff' },
+ confine: true,
formatter: (params) => {
let result = `${params.seriesName}
`;
seriesData.forEach((series,index1)=>{
@@ -421,16 +426,16 @@ export default {
}
},
grid: {
- left: '0',
+ left: '20px',
right:'0',
- top:'0',
+ top:'50px',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'value',
show: false,
- max: 2000
+ max: maxX
},
yAxis: {
type: 'category',
@@ -443,8 +448,47 @@ export default {
fontFamily: 'Microsoft YaHei'
}
},
+ legend: {
+ top: '6px',
+ right: '120px',
+ orient: 'horizontal',
+ textStyle: {
+ color: '#fff',
+ fontSize: 12,
+ fontFamily: 'Microsoft YaHei'
+ },
+ icon: 'circle',
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 15
+ },
graphic: [
-
+ // 右上角单位文字
+ {
+ type: 'text',
+ right: '10px',
+ top: '10px',
+ style: {
+ text: '单位：万元',
+ fontSize: 12,
+ fill: '#fff',
+ fontFamily: 'Microsoft YaHei'
+ }
+ },
+ // // 每一行柱子右侧显示合计值
+ ...seriesData[0].values.map((item, idx) => {
+ return {
+ type: 'text',
+ left: 'auto',
+ right: '8px',
+ top: `${((seriesData[0].values.length-1-idx) / seriesData[0].values.length) * 145 + 50}px`,
+ style: {
+ text: seriesData.map(item=>item.values[idx]).reduce((a, b) => Number(a) + Number(b), 0) ,
+ fontSize: 12,
+ fill: '#fff',
+ fontWeight: 'bold'
+ }
+ }})
],
series: [
]
@@ -479,7 +523,6 @@ export default {
if(code!=200){
return
}
- console.log(data)
dates=data.map(item=>{return item['货品名称']})
lineData=data.map(item=>{return item['毛利同比变动']})
barData=data.map(item=>{return item['去年累计毛利(万)']})
@@ -493,12 +536,37 @@ export default {
textStyle: { color: '#fff' }
},
grid: {
- left: '8%',
- right: '3%',
- top: '12%',
- bottom: '12%',
+ left: '0',
+ right: '0',
+ top: '26px',
+ bottom: '0',
containLabel: true
},
+ graphic: [
+ // 右上角单位文字
+ {
+ type: 'text',
+ left: '0',
+ top: '2px',
+ style: {
+ text: '单位：万元',
+ fontSize: 10,
+ fill: '#fff',
+ fontFamily: 'Microsoft YaHei'
+ }
+ },
+ {
+ type: 'text',
+ right: '0',
+ top: '2px',
+ style: {
+ text: '单位：%',
+ fontSize: 10,
+ fill: '#fff',
+ fontFamily: 'Microsoft YaHei'
+ }
+ }
+ ],
xAxis: {
type: 'category',
data: dates,
@@ -789,7 +857,7 @@ export default {
const parkData = data.map(d => ({
name: d.hpmc,
value: d.xse
- })).splice(0, 10)
+ }))
const option = {
backgroundColor: 'transparent',
tooltip: {
@@ -799,13 +867,28 @@ export default {
textStyle: { color: '#fff' },
formatter: '{b}: {c}万'
},
+
grid: {
left: '0',
right: '0',
bottom: '0',
- top: '0',
+ top: '20px',
containLabel: true
},
+ graphic: [
+ // 右上角单位文字
+ {
+ type: 'text',
+ right: '10px',
+ top: '2px',
+ style: {
+ text: '单位：万元',
+ fontSize: 12,
+ fill: '#fff',
+ fontFamily: 'Microsoft YaHei'
+ }
+ }
+ ],
xAxis: {
type: 'category',
data: parkData.map(d => d.name),
@@ -833,23 +916,24 @@ export default {
axisPointer: {
show: true
},
- dataZoom: [
+
+ },
+ dataZoom: [
{
type: 'slider', // 底部滑动条
show: false, // 隐藏滑动条（只保留滚动能力）
xAxisIndex: [0],
start: 0,
- end: 100
+ end: 50
},
{
type: 'inside', // 内置滚动（鼠标滚轮/拖拽滚动）
xAxisIndex: [0],
start: 0,
- end: 100,
+ end: 50,
zoomLock: true // 禁止缩放，只允许滚动
}
- ]
- },
+ ],
yAxis: {
type: 'value',
show: true,
@@ -898,6 +982,23 @@ export default {
chart.setOption(option)
this.charts.park = chart
+ let autoStart = 0;
+ const autoSpeed = 5; // 滚动速度，越小越慢
+
+ const autoScroll = setInterval(() => {
+ if (!this.charts.park) return;
+
+ autoStart += autoSpeed;
+ if (autoStart > 50) autoStart = 0; // 滚到底部重置
+
+ this.charts.park.dispatchAction({
+ type: "dataZoom",
+ xAxisIndex: 0,
+ start: autoStart,
+ end: autoStart + 50,
+ });
+ }, 3000);
+ this.charts.park.autoScrollTimer = autoScroll;
}
}
}
@@ -906,7 +1007,7 @@ export default {