var seriesColor = []
var seriesColor2 = []
var seriesColor3 = []
let data1='100'
let data2='200'
let data3='300'
for (let i = 0; i <= 40; i++) {
if (i > 40) {
seriesColor.push({
offset: (1 - i / 50).toFixed(2),
color: `rgba(55,162,208,${(i / 50).toFixed(2)})`,
})
seriesColor2.push({
offset: (1 - i / 50).toFixed(2),
color: `rgba(150,232,221,${(i / 50).toFixed(2)})`,
})
seriesColor3.push({
offset: (1 - i / 50).toFixed(2),
color: `rgba(236,217,142,${(i / 50).toFixed(2)})`,
})
} else {
if (i % 2 == 0) {
seriesColor.push({
offset: (1 - i / 50).toFixed(2),
color: `rgba(55,162,208,${(i / 50 + 0.2).toFixed(2)})`,
})
seriesColor2.push({
offset: (1 - i / 50).toFixed(2),
color: `rgba(150,232,221,${(i / 50 + 0.2).toFixed(2)})`,
})
seriesColor3.push({
offset: (1 - i / 50).toFixed(2),
color: `rgba(236,217,142,${(i / 50 + 0.2).toFixed(2)})`,
})
} else {
seriesColor.push({
offset: (1 - i / 50).toFixed(2),
color: "rgb(4,18,29)",
})
seriesColor2.push({
offset: (1 - i / 50).toFixed(2),
color: "rgb(4,18,29)",
})
seriesColor3.push({
offset: (1 - i / 50).toFixed(2),
color: "rgb(4,18,29)",
})
}
}
}
option={
backgroundColor:'block',
grid:{
top: '20%',
left: '5%',
right: '5%',
bottom: '20%'
},
xAxis:{
type: 'category',
axisTick: false,
axisLabel: {
interval: 0,
textStyle: {
color: "#bfeef4",
fontFamily: "PingFang SC Bold",
fontWeight: 700,
fontsize: '14px',
}
},
axisLine: {
lineStyle: {
color: 'rgb(101,161,189)',
width: 1,
}
},
data: ['小区总数', '覆盖小区', '千兆小区']
},
yAxis:{
type: 'value',
interval: 100,
axisLine: {
show: false, //隐藏y轴
},
axisTick: {
show: false, //刻度线
},
axisLine: {
show: false, //隐藏y轴
},
axisLabel: {
show: false, //隐藏刻度值
},
splitLine: {
show: false
}
},
series:[
{
data: [
{
value: data1,
label: {
show: true,
position: 'top',
distance: 5,
offset: [3, 0],
color: '#bfeef4',
fontWeight: 'bolder',
fontSize: 14,
backgroundColor: {
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAjCAYAAAApF3xtAAAAAXNSR0IArs4c6QAABZNJREFUaEPtmV1sFFUUx8+587ELmjZFbZUiBqiVkpBGvmKMJJqQEEmqIVoSjdFoNDEm6oMvRkCXYpr4pCCoGAmi8tI+ANEHTIxoRH0w8qK2hbZK1BZKBaQgdHfm3mPOuTPbaQVCl7VNJnsfdtrs7N25v/s/5+75H3y+91RVz7ffbz//18gjJggcIANEBHyVQcUX+38qBgIgL4SvCIgIoBQ4rqevv7H6w7ufWPMCrt796Z7BnoFHL5w5Z8iEinQIpLWAIYYjYFI4GIZAUaAcB8BxAJVnrptVpeoX3foe3vXGx4Xh/gEHUSsTFCAGI1AMAQErR/Cma4hoFKBSgAzF8UC5PhEqrG2Ycw6Xb/7ADP82iGgCMEEeTMiKCYEMq8WGVNpEg7zRigXDL6wYF9D1wPF8IMeDm+bVG1y+aQed7PsDwBTAFBhMAMRwjE6EUvrQSBixWkQxLqsFlO8DKB9qG+ZqXPbqOzTUewxAB2AKo/8Bw8GEKeTCgcSKQYcV4wG6Pjh+RhRT1zjP4NKN22joyK8AJgCdvwgmCKJQihRj0kYlOowknBQoxfklUkwmC8BgFi7QuGTDVjrR3Q+oC6CLigkklDj5Sp5JW5aRE4kB8UmkQLkMJgOqCKZB45L1W+hEdx+ALoDJcygVxnJM8VRK24FkwUgosWIiMI6A8aFuEYN55S0BQ5x8RyeAYbVIKKUsnASKDSUBw6Hk+WDBZODmpts13slgunrHK0aOaw0UhRLPkaYRb7NNvo5NvgImY8EsGgcmAMPJl0MpCYZPpTRRSei/AmbCxlYUcxmlV8BUwEwuCVYUU1FMRTGTI1BRzOR4VXJMWRTDDp7YDhN++ZKxdUWKxuUVY4tIKQm4iDze3RfZDpEfU3Tw/kfboViX0iXBi9sRGfnl3xN273jW2O+Nikg/C+BGRaTYDl391tqMayUBY6zvW7bKenyFXlz4FecXd3aCF18e9UoQsB/jRNamlwGHwRRthw1baaibwbCDN2Y7QNHzjfpLpWybsIgXwiZpPFiJib+vVKYmyNiZxuYrvbplWxOAIjBcXSvPA+XPAHR8qG0SB+9tc/LoMRSjKnLw2BBnMEb8mGsAE6+DeDmWhO3fRR5P8TJeTaKTeP1x/6cINZ6plJ2Kw9OCYcWo2Az32AzPWjB3zDO4om3HP4O/9GUVaNKFvErYDhRbm8m9nvzjJBYtQmFznWy3EwiBCG3/ymKzUNhEQkK24ZFBRAtJAitdLlZ3AlxyDHL7xHYJMsaA49QvbvwbV+/a//7vh7ufGRkaNhAWpOlmdChKsZ3Ia3DwEuFSVEoMhftVxpB0AZmGfE+kFGKfTLO7JkTsIqLOYRJIqemG55TvGmufIHu+rmeqZtep25Y0bcEcUfa7nXs3nxkYeph0mCWtSRIv8T4Rj8mLJJk+RAu8AqsS3n87pTFkaObw0f5ZYaFgH9TeBW4mA7WN808B4EV2q+2vBW6OJXJMqVBELaJN2QXpK1lAiJ53sWbOLXvan3ygDXM5Urkcml1E2RMAM/IAVF06ikt+kueM36gBgNNnQS2ohtEfT5+ff6B92zfHf+qpcX1P7gmDEOubm4YfbHvxnqWZzJ99AP5MADqTmDlT5p7xWQDgOZsBLqxBzDMTifHWzk7VuW6dLjOPK07X2trhdHau0/fv3t925ItDG0dHzofML1td5TauWrnxwOMtr7d2dDhT/lz8na2tZkyQnASncOQ2AbJS24lu2Nf27uHBn3vn8gPMbm7sW7v+2WUvI54VNb9Wth9SV7c6tH3XKYUx8cnuzR10v8rdF7Z0fv7ckS9/2M5H58JVK57et3bVzulQS/L5phWMHNWInODdlW9+0gWE+UMvPbbYZmH73tVtc/nvml4wABAr46HPvn7KkAr3tqz8aLrVwpj/BcfD0zlhB9nVAAAAAElFTkSuQmCC'
},
align: 'center',
padding: [10, 20, 10, 20],
},
itemStyle: {
normal: {
//barBorderRadius: 5,
//渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, seriesColor),
},
},
symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
},
{
value: data2,
label: {
show: true,
position: 'top',
distance: 5,
color: '#86FCDC',
offset: [3, 0],
fontWeight: 'bolder',
fontSize: 14,
backgroundColor: {
image: 'data:image/png;base64,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'
},
align: 'center',
padding: [10, 20, 10, 20],
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, seriesColor2),
},
symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
},
{
value: data3,
label: {
show: true,
position: 'top',
offset: [3, 0],
distance: 5,
color: '#F4EDBF',
fontWeight: 'bolder',
fontSize: 14,
backgroundColor: {
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAjCAYAAAApF3xtAAAAAXNSR0IArs4c6QAABkxJREFUaEPtmWtsFFUUx8+5Mzuzs9uHIVDTFB+8sRpNeL8MQT/7jRYCxgQT/EKMH0nERwmG6Bc/iIkxgBqMKK0mGhMhioEEWwpUYlTkVR4BbdUUoux2d2d35l5zzr3T7vKwdoslbHbSyaTt7p07v/mfc+/5H1Tq3fqrJy69MzCQWu37AYaBBCkVSClBKgCgE5S+VMCBgPwUiPoUQoCwECxLgOvG5MRJNbsmNC/agFdObPrk1C99qwYGUjLvF4TvBxAEEsIghFAqUHRGVPSYd+9hngMFMhRLIFi2BbGYBY5jg+PasqGhXsxqbtyOP3+zITh9sg8LhVBks3nI5QIICgGEoeST1FOJhyAolgDLsiDmWOC6NnieoxzXxtkPNQ3isS/Wy1Mnf8NctgCDGR/oWiiEEJBiQlKMHA6ju52RUTxdSDW2EGDFNBgv7kAi6YLnxWB2c5PEzo516qcfLzGQdNqHXC4PeT9gOCFBoVAyaCokkoDyjEAKIwG2bVEIkVogWRNnMI8+dr/Egx8/o374/iJkMnlIp3OQy+ZB55kQOBGrIsVUSEwxGBNKBMaNazA1BCbhwJy5UyV+++HTqufoechmfAZDgBgMKSYMQVLm1T8VcbDqcRhMjBUTg0TCgZraOF8XLJgm8esP1qij3b1AiTd1LWvAUI4JWDFKFa1KFYHGLNWUYywL7JgFrmOzUmrrPEgmHViwaLrEfe+tVkcO9zKQVIoU40M+F0CBky/lGFkhOEofA4UA2xIMJu7GDJg4JBMuLFwyQ+K+natVd9dZBnMtlYXMoA95XysmiMBUShxFbIZCySjGtSGRcKGuzgMv6cBiArN3xyp12IChUKJckzNgolACs1usHOkoQF6VLKAcQ3sYWqoJTCIC89UOUswZyAxSKFGO8cEvAVM5OIqfhHe+xWASLtTWe5x8Fy+dIbEKxiimCkbrpqqYW2SCKpgqmNEtElXFVBVTVczoCFQVMzpeI+aYvTt1SZClnS9X13rnW6DqmmslKpTudovqRmjC7HzJj4mTUVVSEsw0ReThs1wSUBGZvd6PITCmiCynliSkN//efx3txpdy6zFHVg3bmtQhIFszqq7JqKKdb622HbiIZNuB/BiyHa7l2Pcla5OMKq6uycGL3PWR73vTT5gOTOn/yOcZYbzIVLq+xilzGvy1SP/UNiFrUxeRxqgiPybhaNuBjKpjR85pP4aq66wpIgu6jcJG1VhmEs1mqEWlRxsat4haSdCi6QDR26VQ5t+jNzS20NbWJhjF2Lq6ZsXEubpeSEbV/l1r5fGeC8ieb2RU5Y0ZXgKmDDzmSUlx9CgclZFVys5g5A4Ou4Qkcw2BLtT/0T2g6KoLnaL4HDUjPTYrxkLt4EVGVQ2BcWHu/KkSOz9dlznS1evm84FKp3PcW+JQCkwoDTXcygBj1BJ9k0Ho8RR1OpVSKCWfw5qk7iAZSZZQCKjozaJAOhhOxKX89UCDLgZDzbYEdwk86cZtsXjJjBT+fnzjzkOHTj974fyfMpvJC06+ecox1HALTftkDLHEuVsrwsAAGSpe8YJQKopx0sBwi4bloAqBBNsWyA9AnUOhDWwGxKFV/pxYjdxsQ4jZ3IHktkki4cpp0+8Vy5bP2oZKdXmXez5/7eK5P1b6ucAtBKHiDiQnXjXUJSh/Ghw+OoKi8JGK2r9SSuUd6+6dQCrl12hyTzLpwvyF064iYtYSQuiWKsFhHqyeMR1GlTSOoJXJtsj/Rc+LZR+c3ri7ac7WNlSqTSC2SaUuewB9CQDPuN/1Rfe+3X1aW/T3T841NnZO2fPmG98dOnjqHtdzWDS+X8DlTzQPtLywaVl//7zLjY2XXJ2dbvdBOxk6/jYDZwVAwyDilBwzoTjv6GgVra0d4e2+9b+N197eYtE9f+3ZuGXPR50vXRlIB0RmUkOd3bp26SuT57y+JfrMeM+rpaVdDmmSAI3nBAA2o1Zqz8SDu9863t115j6S9pJlM889vqptHuKUv+jNAbz6P6jl1k+KiHy/cYZROqEDB9rsFSvagtT5zRu+/KznbUquT62c/1zygZe3q/YWC8dZxcWzu6NgSKX0hpRSsRP7nz8JCP7DT257xPyN/ze+Ki7ZNdypW+v7KtVuIbaG+b6t60FB4DS9+H70tzs5s38A48FPJF46nd8AAAAASUVORK5CYII='
},
align: 'center',
padding: [10, 20, 10, 20],
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, seriesColor3),
},
symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
},
],
type: "pictorialBar",
},
]
}