Merge branch 'master' of http://42.192.7.176:3000/suojin/hiatmp_htv_new
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
@ -0,0 +1,170 @@ |
||||
export function BarChart2(data) { |
||||
// 计算总数
|
||||
const getAll = () => { |
||||
if (data.yData && data.yData.length > 0) { |
||||
return data.yData.reduce((a, b) => a + b); |
||||
} |
||||
return 0; |
||||
}; |
||||
const loadingFunnel = { |
||||
title: '', |
||||
arrDataX: [], |
||||
arrDataY: [], |
||||
}; |
||||
// title标示文字,标示线
|
||||
loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => ({ |
||||
text, |
||||
top, |
||||
left, |
||||
textStyle: { |
||||
color, |
||||
fontStyle, |
||||
fontFamily, |
||||
fontSize, |
||||
}, |
||||
}); |
||||
loadingFunnel.arrDataX = data?.xData; |
||||
loadingFunnel.arrDataY = data?.yData; |
||||
const option = { |
||||
title: [ |
||||
loadingFunnel.title( |
||||
`———— ${loadingFunnel.arrDataX[0]} ${loadingFunnel.arrDataY[0]} ${(loadingFunnel |
||||
.arrDataY[0] / |
||||
getAll()) * |
||||
100}%`,
|
||||
'12%', |
||||
'42%', |
||||
'#ffffff', |
||||
'normal', |
||||
'', |
||||
'14' |
||||
), |
||||
|
||||
loadingFunnel.title( |
||||
`—— ${loadingFunnel.arrDataX[1]} ${loadingFunnel.arrDataY[1]} ${(loadingFunnel.arrDataY[1] / |
||||
getAll()) * |
||||
100}%`,
|
||||
'33%', |
||||
'50%', |
||||
'#ffffff', |
||||
'normal', |
||||
'', |
||||
'14' |
||||
), |
||||
|
||||
loadingFunnel.title( |
||||
`— ${loadingFunnel.arrDataX[2]} ${loadingFunnel.arrDataY[2]} ${(loadingFunnel.arrDataY[2] / |
||||
getAll()) * |
||||
100}%`,
|
||||
'52%', |
||||
'54%', |
||||
'#ffffff', |
||||
'normal', |
||||
'', |
||||
'14' |
||||
), |
||||
], |
||||
tooltip: { |
||||
show: false, |
||||
formatter(params) { |
||||
console.log(params); |
||||
return `${params.marker + params.name}:${params.data.number}万`; |
||||
}, |
||||
}, |
||||
grid: { |
||||
// containLabel: true,
|
||||
left: '10%', |
||||
top: '10%', |
||||
bottom: '0%', |
||||
}, |
||||
xAxis: { |
||||
show: false, |
||||
data: ['', '', '', ''], |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
axisLabel: { |
||||
color: '#5EA2ED', |
||||
interval: 0, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#1B5BBA', |
||||
}, |
||||
}, |
||||
}, |
||||
yAxis: { |
||||
show: false, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#1B5BBA', |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
color: '#5EA2ED', |
||||
interval: 0, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pictorialBar', |
||||
// labelLine:{
|
||||
// show:true,
|
||||
// length2:20,
|
||||
// lineStyle:{
|
||||
// color:'red',
|
||||
// width:5
|
||||
// }
|
||||
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'right',
|
||||
// formatter: '{b}{c} 万头',
|
||||
// fontSize: 16,
|
||||
// color: '#e54035',
|
||||
// verticalAlign:'top'
|
||||
// },
|
||||
data: [ |
||||
{ |
||||
name: loadingFunnel.arrDataX[0], |
||||
z: 100, |
||||
value: 20, |
||||
number: loadingFunnel.arrDataY[0], |
||||
symbolSize: ['130%', '90%'], |
||||
symbolPosition: 'center', |
||||
symbolOffset: ['60%', '-250%'], |
||||
symbol: |
||||
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABDCAYAAAAh43M3AAAEXUlEQVR4nOXbPYxVRRjG8d9uVqCBRQuVBW2IQZBeWFypaF0CSAFEMeFTrChAPqKxkF3sxF0TNVFJRAtiY7SjwsJY0hgaEqMJiSSS4BaEkIDFnKuX5X7OmTPnLvyTk+zunXnPO092Zp53zrlDe3/8ywCwFL/9fWsO1mGu3nQYrjuBgg+xqrjO1JwLBkOYDTjS9Pvb2FhTLv9RtzBP4It5eQzjcyyqJaOmJOrkONa3+Pt6HMucywPUKcwanOrw+amiTS3UJcwQPsOSDm2WCFNqKEtG86hLmH3Y3EO7V4u22alDmBU420f7j4o+WalDmI/xZB/tl+NcRbm0Jbcwr+H1iH47ir7ZyCnMUsyW6D9bxMhCTmGmBMsfy6oiRhZyCbMRhxPEOYzxBHG6kkOYRYIfSXGvbOVCDmGOaW37Y3lJhnKhamHW4HQFcU+ruFyoUpghoXJeXEHsxUXsysqFKoXZh4kK409gf1XBqxJmhWDlq+YsxqoIXJUw5wQrXzXLhRIjOVUIMylY+FzsKO6ZlNTCLMNM4pi9MFPcOxmphTmjnO2PJXm5kFKYcWlsfyyHJCwXUgmT0vbHMix4myTlQqqBHBeset2sE3IpTQphXtT5tD83p4ScSlFWmCFhClVh+2NZLMHThbLC7Fet7Y9lAgfKBCgjzJj+TvtzU6pcKCNMLtsfy6gSTxdihZnE9tibZmS7yHIhRphlyp3252ZWRLkQI8wUVkb0q4uVmO63U7/CjAvWe6FxEJv66dCPMIs8/JLPQqHvpwv9DPJdwXIvVNYJY+iJXoVZi5NR6QwWJ4WxdKUXYRov+QyS7Y+l53KhF2EOGEzbH8srwmLckW7CDLrtj2Val3KhmzCfCNb6UWNUGFtbOgmzFduSpjNYbBPG2JJ2wtR12p+bGW1mRDthpi0s2x/LSm2eLrQSZpMeVu1HiENalAvzhWns8wvR9sfS8nh2vgAL3fbH8lC50CzMWpzIms5gcUJTudAQZhBP+3PzwMtIDWEOClb5cWeT4rxpWLDGfZ9wPcJMYWxYB5PzmDKKmRF8gN+xG0/XmdEAcAMXcH4YV3BUeMdkEhdxp77csnNHGPNWQYOjuDLS1OAufiiup7ALe/By3jyz8Su+wbe4Of/Ddg73prD2bBD29rO4XlGCObkujGWtMLYZLUShN+t/VXCFz2GLMAdvJ0kzD7eFnLfgeWEsV7t1GunWoIl7uFRco8LjzzeFY89avtDZgfv4GefxPW71G6AfYZq5hS+LazXeEHa11ZHxUnFNWDPOFz9Hk6KKvob38YLwzdiv8U+CuL0yV9xzc5HDe0qKQtrjhfu4jLfwrLCjXRKmYGoa03oPninuebnIIQmxU6kbjQXvgrBo78Je5d+Nuyr8d3yHP0rG6kiOA6k//b9FjguvZbTcIttwE58WfRvWoVJRyH9S9wveEQrXnfhJMJbzuVt8trNoe6Tom42qplI3Gjb8olCf7RbWCfhKmII36kkt8C/As56eiakjhwAAAABJRU5ErkJggg==', |
||||
}, |
||||
{ |
||||
name: loadingFunnel.arrDataX[1], |
||||
z: 90, |
||||
value: 40, |
||||
number: loadingFunnel.arrDataY[1], |
||||
symbolSize: ['200%', '40%'], |
||||
symbolPosition: 'center', |
||||
symbolOffset: ['-22%', '-130%'], |
||||
symbol: |
||||
'image://data:image/png;base64,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', |
||||
}, |
||||
{ |
||||
name: loadingFunnel.arrDataX[2], |
||||
z: 80, |
||||
value: 60, |
||||
number: loadingFunnel.arrDataY[2], |
||||
symbolSize: ['280%', '35%'], |
||||
symbolPosition: 'center', |
||||
symbolOffset: ['-60%', '10%'], |
||||
symbol: |
||||
'image://data:image/png;base64,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', |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
return option; |
||||
} |
||||