let ranking1 =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAWCAYAAAA4oUfxAAAAAXNSR0IArs4c6QAAAH1JREFUSEvtlrENAlEMQ1/+v2sQEjtQsQw7sB+zsAgdFRLEDjqYgD6FlXSRosR+kefThQp/NWwchhBY1BBRWWXB1jsXZm6VdLJM4XpTU4TypzUZSlhFvcTcJX6K2ot8iPvBHG/miqOH99r74PrV2mTaXjtYOlIbJhqj/gHID8qzPmJQqvq2AAAAAElFTkSuQmCC";
let ranking2 =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAWCAYAAAA4oUfxAAAAAXNSR0IArs4c6QAAAHRJREFUSEvtlsEJw1AMQ59/SQuZsgtksgzXnkpDbP3wky7QuzBCBxsMxpYVfZmeNAQhQHSEKOKHXklEMeJG0kk0OPKqif1kRZ6YRr4l30/RKGaSO8Wb4kGxIV6IFYWbe+xeOJ8aFhnLqx+LX6rNhG3UHwbyAFH8IFOor3h3AAAAAElFTkSuQmCC";
let ranking3 =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAWCAYAAAA4oUfxAAAAAXNSR0IArs4c6QAAAHhJREFUSEvtlrENAlEMQ58/FFdSsRk927IFA1DRoJMgzqF/TEDvInIURYoUJba13ZYrg2ajkX7YGM2wkQpjBgYVoijVns/aVp8dZ9971ik0iqPMOszpULyeZsE8MGeaO82FVoZn7Tm4vFpIJvQaYYmkxkzERv1jIL8upfQu1X2WdQAAAABJRU5ErkJggg==";
let ranking4 =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAWCAYAAAA4oUfxAAAAAXNSR0IArs4c6QAAAHlJREFUSEvtlrsNAkEMRJ93uYAMiruc+miLGhAB9hjdInIKmMAa2Ykly/OJ7f66ESiEDkQtoL7VFWPmr4/uTJHMzlCveYzTe6E6o0i2zlHK6K4nKs6VjEsxKCbFA3FF7Ci83Gf3w5lqFpkloZZXG4st1WHCMerPAPkBU7a6PWEESkIAAAAASUVORK5CYII=";
let dataZoomMove = {
start: 0,
end: 5
};
let xdata = ["城市排名1","城市排名2","城市排名3","城市排名4","城市排名5","城市排名6","城市排名7","城市排名8"];
let sdata = [100,99,90,80,60,50,40,30];
let sdata1 = [{ symbolPosition: "end", value: 100 },{ symbolPosition: "end", value: 99 },{ symbolPosition: "end", value: 90 },{ symbolPosition: "end", value: 80 },{ symbolPosition: "end", value: 60 },{ symbolPosition: "end", value: 50 },{ symbolPosition: "end", value: 40 },{ symbolPosition: "end", value: 30 }];
option = {
backgroundColor: "#040F25",
//你的代码
tooltip: {
show: false,
trigger: "axis"
},
dataZoom: [
{
show: sdata.length > 6 ? true : false, // 为true 滚动条出现
realtime: true,
type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
height: "90%", // 表示滚动条的高度，也就是粗细
startValue: dataZoomMove.start, // 表示默认展示20%～80%这一段。
endValue: dataZoomMove.end,
width: 6,
right: "20",
top: "0%", //位置和grid配置注意下
yAxisIndex: [0, 1], //关联多个y轴
moveHandleStyle: {
color: "rgba(89, 202, 241,.5)"
},
moveHandleSize: "6",
emphasis: {
moveHandleStyle: {
color: "rgba(89, 202, 241,.5)"
}
},
textStyle: {
color: "rgba(255,255,255,0)"
},
backgroundColor: "rgba(255,255,255,.1)",
borderColor: "rgba(255,255,255,0)",
fillerColor: "rgba(0,0,0,0)",
handleSize: "6",
handleStyle: {
color: "rgba(255,255,255,0)"
},
brushStyle: {
color: "rgba(129, 243, 253)"
}
},
{
//没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
yAxisIndex: 0,
zoomOnMouseWheel: false, //滚轮是否触发缩放
moveOnMouseMove: true, //鼠标滚轮触发滚动
moveOnMouseWheel: true
}
],
grid: {
containLabel: true,
bottom: "5%",
left: "5%",
top: "5%",
right: "5%"
},
xAxis: {
type: "value",
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: [
{
type: "category",
data: xdata,
inverse: true,
axisLabel: {
fontSize: "18px",
inside: false,
verticalAlign: "center",
padding: [5, 0, 0, 0],
margin: 20, //刻度标签与轴线之间的距离
formatter: function (value, index) {
// console.log("formatterformatter", value, index);
if (index < 3) {
return `{img${index}|${
xdata.indexOf(value) + 1
}} {a|${value}}`;
} else {
return `{img3|${xdata.indexOf(value) + 1}} {a|${value}}`;
}
},
rich: {
a: {
fontSize: "14px",
color: "#fff",
padding: [0, 0, 0, 15],
width: 50
},
b: {
fontSize: "18px",
color: "#8891B0",
padding: [4, 15, 0, 15]
},
img0: {
width: 26,
height: 22,
color: "#FF2E05",
fontSize: "18px",
align: "center",
fontWeight: 400,
padding: [3, 5, 0, 0],
verticalAlign: "middle",
backgroundColor: {
image: ranking1
}
},
img1: {
width: 26,
height: 22,
color: "#FE6E07",
fontSize: "18px",
align: "center",
fontWeight: 400,
padding: [3, 5, 0, 0],
verticalAlign: "middle",
backgroundColor: {
image: ranking2
}
},
img2: {
width: 26,
height: 22,
color: "#FFD648",
fontSize: "18px",
align: "center",
fontWeight: 400,
padding: [3, 5, 0, 0],
verticalAlign: "middle",
backgroundColor: {
image: ranking3
}
},
img3: {
width: 26,
height: 22,
color: "#06CDF7",
fontSize: "18px",
align: "center",
fontWeight: 400,
padding: [3, 5, 0, 0],
verticalAlign: "middle",
backgroundColor: {
image: ranking4
}
}
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: "#13387a"
}
}
},
{
type: "category",
data: xdata,
inverse: true,
padding: [0, 0, 0, 0],
axisLabel: {
inside: false,
verticalAlign: "center",
padding: [0, 0, 0, 0],
margin: 20, //刻度标签与轴线之间的距离
formatter: function (value, index) {
return `{a|${sdata[xdata.indexOf(value)]}}`;
},
rich: {
a: {
fontSize: 18,
fontFamily: "Barlow Condensed SemiBold",
color: "#00DEFF",
padding: [4, 0, 0, 0]
}
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: "#13387a"
}
}
}
],
series: [
{
data: sdata,
type: "bar",
barWidth: 26,
borderRadius: 30,
showBackground: true,
verticalAlign: "center",
backgroundStyle: {
color: "rgba(47, 110, 182, 0.26)",
borderRadius: 30
},
zlevel: 10,
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(44, 205, 223,1)" // 0% 处的颜色
},
// {
// offset: 0.2,
// color: "rgba(1,249,266,0.3)" // 0% 处的颜色
// },
{
offset: 1,
color: "rgba(0, 151, 237, 1)" // 100% 处的颜色
}
]
},
itemStyle: {
verticalAlign: "center",
zlevel: 10,
borderRadius: 40,
borderWidth: 0,
decal: {
color: "rgba(255,255,255,0.3)",
symbol: "rect",
symbolSize: 1,
dashArrayY: [1, 0],
dashArrayX: 7,
rotation: 60
},
emphasis: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(255, 68, 0, 1)" // 0% 处的颜色
},
// {
// offset: 0.2,
// color: "rgba(1,249,266,0.3)" // 0% 处的颜色
// },
{
offset: 1,
color: "rgba(223, 45, 44, 1)" // 100% 处的颜色
}
]
}
}
}
},
{
// name: "主系列",
type: "bar",
data: sdata,
barGap: "-100%",
zlevel: 10,
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(44, 205, 223, 0.3)" // 0% 处的颜色
},
// {
// offset: 0.2,
// color: "rgba(1,249,266,0.3)" // 0% 处的颜色
// },
{
offset: 1,
color: "rgba(0, 151, 237, 0.3)" // 100% 处的颜色
}
]
},
itemStyle: {
borderRadius: 30,
borderWidth: 0,
emphasis: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(255, 68, 0, 0.2)" // 0% 处的颜色
},
// {
// offset: 0.2,
// color: "rgba(1,249,266,0.3)" // 0% 处的颜色
// },
{
offset: 1,
color: "rgba(223, 45, 44, 0.3)" // 100% 处的颜色
}
]
}
}
},
barWidth: 26
},
{
type: "pictorialBar",
// symbol: "react",
symbolSize: [3, 28],
symbolOffset: [3, 0],
zlevel: 12,
itemStyle: {
color: "#fff",
borderRadius: 3,
shadowColor: "#006BFF",
shadowBlur: 10
},
data: sdata1
}
]
};