taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

柱状图

Browse Source
This commit is contained in:
ljx
2025-08-21 20:03:15 +08:00
parent aab67593eb
commit f01487dc50
5 changed files with 285 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/largeScreen/components/optionList.ts
View File

@ -303,7 +303,10 @@ export const getLineOption = (lineData: any) => {
show: false
},
axisTick: {
show: true
show: false
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
@ -316,7 +319,7 @@ export const getLineOption = (lineData: any) => {
type: 'value',
max: maxData,
splitLine: {
show: true,
show: false,
lineStyle: {
type: 'solid',
color: 'rgba(73, 169, 191, 0.2)'
@ -693,16 +696,16 @@ export const getBarOptions = (data: any) => {
const option = {
backgroundColor: '',
grid: {
left: '7%',
left: '8%',
top: '4%',
bottom: '25%',
bottom: '8%',
right: '2%'
},
tooltip: {
show: true,
backgroundColor: '',
trigger: 'axis',
formatter: '{b0}：{c0}元',
formatter: '{b0}：{c0}万元',
textStyle: {
color: '#fff'
}
@ -727,7 +730,7 @@ export const getBarOptions = (data: any) => {
// show: true,
},
splitLine: {
show: true,
show: false,
lineStyle: {
color: 'rgba(108, 128, 151, 0.3)',
type: 'dashed'
@ -739,9 +742,7 @@ export const getBarOptions = (data: any) => {
{
axisLabel: {
formatter: function (value) {
if (value >= 1000) {
value = (value / 1000).toFixed(1) + 'k'; // 大于等于1000的数字显示为1k、2.5k等
}
value = value + '万';
return value;
},
color: 'rgba(255, 255, 255, 0.8)'
@ -755,7 +756,7 @@ export const getBarOptions = (data: any) => {
}
},
splitLine: {
show: true,
show: false,
lineStyle: {
color: 'rgba(108, 128, 151, 0.3)',
type: 'dashed'
@ -763,24 +764,25 @@ export const getBarOptions = (data: any) => {
}
}
],
dataZoom: [
{
// show: true,
start: 0,
end: 30,
bottom: 2, // 下滑块距离x轴底部的距离
height: 23
},
{
type: 'inside'
}
],
// dataZoom: [
// {
// // show: true,
// start: 0,
// end: 30,
// bottom: 2, // 下滑块距离x轴底部的距离
// height: 23
// },
// {
// type: 'inside'
// }
// ],
series: [
{
type: 'bar',
data: data.value,
stack: '合并',
barWidth: '15',
data: data.value[0],
// stack: '合并',
barWidth: '5',
barGap: '100%',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
@ -790,22 +792,60 @@ export const getBarOptions = (data: any) => {
[
{
offset: 0,
color: 'rgba(0, 111, 255, 0)' // 0% 处的颜色
color: ' rgba(29, 214, 255, 1)' // 0% 处的颜色
},
{
offset: 0.7,
color: 'rgba(0, 111, 255, 0.5)' // 0% 处的颜色
color: ' rgba(29, 214, 255, 0.5)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 111, 255, 1)' // 100% 处的颜色
color: ' rgba(29, 214, 255, 0.1)' // 100% 处的颜色
}
],
false
)
},
label: {
show: true,
show: false,
formatter: '{c}',
position: 'top',
color: '#fff',
fontSize: 10
// padding: 5
}
},
{
type: 'bar',
data: data.value[1],
// stack: '合并',
barWidth: '5',
barGap: '100%',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: ' rgba(255, 77, 79, 1)' // 0% 处的颜色
},
{
offset: 0.7,
color: ' rgba(255, 77, 79, 0.5)' // 0% 处的颜色
},
{
offset: 1,
color: ' rgba(255, 77, 79, 0.1)' // 100% 处的颜色
}
],
false
)
},
label: {
show: false,
formatter: '{c}',
position: 'top',
color: '#fff',
@ -813,15 +853,6 @@ export const getBarOptions = (data: any) => {
// padding: 5
}
}
// {
// type: 'bar',
// stack: '合并',
// data: topData,
// barWidth: '15',
// itemStyle: {
// color: 'rgba(252, 217, 18, 1)'
// }
// }
]
};
return option;