Echart柱状图表排名
var charts = { // 按顺序排列从大到小
cityList: ['38号点', '8号点', '15号点', '16号点', '24号点'],
cityData: [7500, 6200, 5700, 4200, 3500]
}
var top10CityList = charts.cityList
var top10CityData = charts.cityData
var color = ['#ff9500', '#02d8f9', '#027fff']
var color1 = ['#ffb349', '#70e9fc', '#4aa4ff']
let lineY = []
let lineT = []
for (var i = 0; i < charts.cityList.length; i ) {
var x = i
if (x > 1) {
x = 2
}
var data = {
name: charts.cityList[i],
color: color[x],
value: top10CityData[i],
barGap: '-100%',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: color[x]
}, {
offset: 1,
color: color1[x]
}], false),
barBorderRadius: 10
},
emphasis: {
shadowBlur: 15,
shadowColor: 'rgba(0, 0, 0, 0.1)'
}
}
}
var data1 = {
value: top10CityData[0],
itemStyle: {
color: '#001235',
barBorderRadius: 10
}
}
lineY.push(data)
lineT.push(data1)
}
const top10CityData2 = top10CityData.reverse() //反转
option = {
backgroundColor: '#244f97',
title: {
show: false
},
tooltip: {
trigger: 'item',
formatter: (p) => {
if (p.seriesName === 'total') {
return ''
}
return `${p.name}<br/>${p.value}`
}
},
grid: {
borderWidth: 0,
top: '10%',
left: '5%',
right: '15%',
bottom: '3%'
},
color: color,
yAxis: [{
type: 'category',
inverse: true,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false,
inside: false
},
data: top10CityList
}, {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
inside: false,
verticalAlign: 'bottom',
lineHeight: '40',
textStyle: {
color: '#b3ccf8',
fontSize: '14',
fontFamily: 'PingFangSC-Regular'
},
formatter: function(val) {
return `${val}`
}
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: top10CityData2
}],
xAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
name: 'total',
type: 'bar',
zlevel: 1,
barGap: '-100%',
barWidth: '10px',
data: lineT,
legendHoverLink: false
}, {
name: 'bar',
type: 'bar',
zlevel: 2,
barWidth: '10px',
data: lineY,
label: {
normal: {
color: '#b3ccf8',
show: true,
position: [0, '-24px'],
textStyle: {
fontSize: 16
},
formatter: function(a) {
let num = ''
let str = ''
if (a.dataIndex 1 < 10) {
num = '0' (a.dataIndex 1);
} else {
num = (a.dataIndex 1);
}
if (a.dataIndex === 0) {
str = `{color1|${num}} {color4|${a.name}}`
} else if (a.dataIndex === 1) {
str = `{color2|${num}} {color4|${a.name}}`
} else {
str = `{color3|${num}} {color4|${a.name}}`
}
return str;
},
rich: {
color1: {
color: '#ff9500',
fontWeight: 700
},
color2: {
color: '#02d8f9',
fontWeight: 700
},
color3: {
color: '#027fff',
fontWeight: 700
},
color4: {
color: '#e5eaff'
}
}
}
}
}],
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghcbkj
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13