let dataSource = [
{
value: "18",
name: "上海机场",
},
{
value: "11",
name: "广州白云",
},
{
value: "12",
name: "深圳宝安",
},
{
value: "13",
name: "北京首都",
},
{
value: "8",
name: "杭州萧山",
},
{
value: "10",
name: "成都双流",
},
{
value: "11",
name: "重庆江北",
},
{
value: "14",
name: "西安咸阳",
},
{
value: "14",
name: "昆明长水",
},
{
value: "13",
name: "南京禄口",
},
],
option = {
tooltip: {
show: true,
},
backgroundColor: 'rgba(5, 62, 72, 1)',
grid: [
{
left: 160,
top: 20,
right: 70,
bottom: 40,
containLabel: true,
},
],
xAxis: [
{
gridIndex: 0,
type: "value",
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
axisTick: { show: false },
},
],
yAxis: [
{
gridIndex: 0,
type: "category",
inverse: true,
data: dataSource.map((item) => item.name),
axisTick: { show: false },
axisLine: { show: false },
splitLine: { show: false },
axisLabel: {
width: 10,
fontSize: 25.5,
fontWeight: 'bold',
padding: [0, 0, 0, -80],
align: "left",
color: '#FFFFFF',
formatter: (name, index) => {
const id = index + 1;
if (id < 11) {
return `{icon${id}|}{name|${name}}`;
} else {
return `{count|${id}}{name|${name}}`;
}
},
rich: {
icon1: {
width: 37,
height: 28,
align: "center",
backgroundColor: {
// image: this.img1,
},
},
icon2: {
width: 37,
height: 28,
align: "center",
backgroundColor: {
// image: this.img2,
},
},
icon3: {
width: 37,
height: 28,
align: "center",
backgroundColor: {
// image: this.img3,
},
},
icon4: {
width: 37,
height: 28,
align: "center",
backgroundColor: {
// image: this.img4,
},
},
icon5: {
width: 37,
height: 28,
align: "center",
backgroundColor: {
// image: this.img5,
},
},
icon6: {
width: 37,
height: 28,
align: "center",
backgroundColor: {
// image: this.img6,
},
},
icon7: {
width: 37,
height: 28,
align: "center",
backgroundColor: {
// image: this.img7,
},
},
icon8: {
width: 37,
height: 28,
align: "center",
backgroundColor: {
// image: this.img8,
},
},
icon9: {
width: 37,
height: 28,
align: "center",
backgroundColor: {
// image: this.img9,
},
},
icon10: {
width: 46,
height: 28,
align: "center",
backgroundColor: {
// image: this.img10,
},
},
count: {
padding: [0, 0, 0, 0],
width: 45,
height: 28,
color: "#A4E8E8",
align: "center",
fontSize: 23,
fontFamily: "DIN",
fontWeight: 500,
fontStyle: "italic",
},
name: {
width: 122,
fontSize: 25.5,
fontWeight: 'bold',
align: "left",
color: "#fff",
// fontFamily: "Source Han Sans CN",
},
},
},
},
],
series: [
{
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: 6,
data: dataSource.map((item) => item.value),
silent: true,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: "rgba(224, 205, 103, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(224, 205, 103, 1)", // 100% 处的颜色
},
],
false
),
},
},
},
{
type: "scatter",
data: dataSource.map((item) => item.value),
label: "none",
symbolSize: 8,
itemStyle: {
borderColor: "rgba(224, 205, 103, 0.32)",
borderWidth: 10,
color: {
x: 1,
y: 1,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(224, 205, 103, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(224, 205, 103, 1)", // 100% 处的颜色
},
],
},
opacity: 1,
},
z: 2,
},
],
};