Merge branch 'master' of http://42.192.7.176:3000/suojin/hiatmp_htv_new
zhangqun
2 years ago
commit
acc85cb8e3
34 changed files with 853 additions and 424 deletions
|
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,iVBORw0KGgoAAAANSUhEUgAAAHIAAAA9CAYAAABx0z3EAAAGl0lEQVR4nO2cW4gbVRiAvzOXZGaTnXTbrdqiqOAF2yoKtoJ3RbSI4o2KolXxgojoixdQqojiSx9E8EVQ8H6BoiKIqKCgoA8VQbRVRB8Kiqh0szvJZDO5+3B29Vg3u8lkJjOznQ+GZbMz5/w7H+fMyfn/RPR6PYJwzZN7A103RizgKuCWhd9fBd4H/NgiWoH3Ht8W+FojxDiSwnHATuAGYEp5/QzgceBt4DXgwLgDi5LVIlIHLgZuAy4AtD7nTQH3AHcDnwMvA58BncgjjJi0i5wGbgRuBo4Z4joNuGjh+BV4HXgLOBh2gOMirSK3ArcCVwC5Eds6BngEeAD4AHgF+HrENsdOmkQWgGuQAjdH0H4OuHbh2I8U+h5Qi6Cv0EmDyBORK88dgDOmPjcDu4FdwB7kivfnMfUdiKSKNIFLkaPvHEDEFIcD3AHcDnyJHKWfAK2Y4ulL0kQeiVy43AQcFXMsKgI4d+H4A3gDuUD6M86gVJIgUgBnI6fP7cjRmGSOQi6M7gc+Qk67XwHBdlZCIk6RDnAdcvo8KcY4gmICVy4cPyPfk74DVOIIJg6Rm5Cj7zrkSnQ1cCLwNPAo8C7yWfrDOAMYl8gccDly5yX4hmLyKSC3B3ci34u+BHwINKPuOGqRRyMXLzcC6yPuK2lsXTgOAm8iF0e/RdVZFCI14Hzks+8S5D7o4cw0cmF0L/Ap8ln6BdANsxPx4DvhLLZ+2bd3DTLjsBM4PpRGVy8HkKvdt0/Ysm0ujAZHFvnLvr2nIxcvVyNzgBmD4yNzpK+csGXbt6M0NKrIq5uN+h7Pna177kG/2fDbozR2uKEZecO0Hcu0HVsz8tcj93YDMYrIEnKJvXHxhaY/36q65brnzvitZiP1Ob4o0PScbk44lmE5tm5a6ubH78i3Zm6QdkdZ7OxGkQiQsybMddaEue7Io51GvdasumXfc2fq7VYz1Ad72hC6oZl2yTZtx9JNu1/abSPynt4dqI+AI/I8ZIZ9oM1sf95rem65XnVn/E67dVhIFZqhLU6bem5i0JxpD7gQuaodrr8AIi3gW+DkYS/s9Xr489WG55Z9zy37nU57VUkVmq6ZtmMZlmMZ+Yl8wKTNT8DpDFkkFmRq3UUAiQBCCOyCk7cLTn56w7FOvVb5R2q324l10zkoQmjCkCPPMnKFPEKMmnI7GXmPdw0Vx5Aj8lTgG0LOUPR63d685zY8t1z3KrONXrebaKlCaMKwJvOm7dhGvhiGvENpAWcC3w16wTAjUgdeIII0kxCaKExOWYXJKWt9t9ubr875nlv2a9W5Rq+XEKlCCDM/mTdsxzKsoiWEFmWy20Te67MZsMJvGJH3AWcFCGooNE0TxdJau1haa3e7nW6tMud77ow/77mNoMXUwREYVjEvn3uTlhBavzLLKNiGvOfPDnLyoFPrscA+oBg8rtHodNrdWmXW99xyfd5zI80mGPlCzrRLtmFNWkLTxynvUDzk4+zASicOOiKfJ0aJALpuaM7U+glnav1Ep93qepXZuufO+PVaNRSpem4iZ9oly7QnbaEZccpTKSLv/faVThxE5E2DNDROdMPUSmuPKJTWHlFot5odrzLre3Mzdb/uDVUUpedsc3HkabqZ1CzNZUgHbyx30kpT6zTw48LPxNNqNtq1Stmvzs3UG/78kvu+umkZpl2yDXvS0vRcEmqWBuEgcArLVMKv9I88Q0okApi5vLFmekNxzfSGYrPht2uVcr06N+O3O10Wp03NyKdFnso0ctFzc78TlhuRlyGrxFLPX2Uv7hDCYjvw8VJ/6PdQX3zIZiSLvovOfiKfRH7OMCNZHAc8tdQflhK5FVljkpFM7kM6+g+HijSBF8kKppKMjnT0n63SQ0U+BJw2rogyAnMa8LD6giryJOCxsYaTMQq7UD5qsShSIHfbsyq49GAhnQn4V+SdyKLijHRxPnAXSJGLRT8Z6WQ3sFEDngPWxBxMRnBKwHMG8kuEvkd+Rn9TrCFlDMsPyO842GMgv8FiP/AE8ksQdpBJTTL/yEN6A/6f/cikJpMl5aksl9LJpMbLivJUBs3NZVLHw1DyVIIkWTOp4RJYnsqo2fJMajBCkacSZtlDJnV5QpenElX9SiZVEqk8lXEUIh1uUscmT2XcFWWrVWos8lTiLA1Mu9TY5akkpcYzLVITJU8lKSJVkiY1sfJUkihSJS6pqZCnknSRKlFLTZ08lTSJVAlLaqrlqaRVpMqwUleNPJXVIFKln1RYhfJU/gZt9fzmIf1IdAAAAABJRU5ErkJggg==', |
||||||
|
}, |
||||||
|
{ |
||||||
|
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; |
||||||
|
} |
||||||
Loading…
Reference in new issue