let ranking1 = `data:image/png;base64,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
rkJggg==`;
let ranking2 = `data:image/png;base64,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`
let ranking3 = `data:image/png;base64,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
iYjiaMf4L+o3wYSIw6eaAAAAAElFTkSuQmCC`
let generalImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA6CAYAAAD2mdrhAAAAAXNSR0IArs4c6QAAAx9JREFUaEPt
WltPE0EUnjOzWy4FwkUtIaUU2hIRbwlG45s+6juNUVL5KfwN37BBY8q7Puqb0WDiDTG0QCkNKSqX
gC3Q3Zkx26hZV6jdYXpZs/vYnXPmu8x0NnMOIIc/4HD8qKoExhPzHkOg2ehosVpCVYXAFOc4EV/2
M8oGDeCY4JVobCg7BcBkE5FO4OrDbM8e0yKYQKsZLKO80I7V5Ov7/k2ZJKQRuBh/56XQHkYc95QF
CGyT8L3U+9ilvAwiJyZw4zlXNtLLgxgTP4IK9xRHnDGa9QWHVl7cBP0kRIQJcM7hcjzbpzFtCAhW
RUBwyjQVq8tvY/51AOAiOYQIXHi02kV1GgHAbSKTWmM4Z9+JQpIf7g1s281ni8D1xFrLzgEPYcTO
2J2okvEM4S+dzbD0Mtq/X8l4Y0xFBMYTnHzWMgMaYwHCAVeaXGQcBc5UjDNn1cDqbBTov3KUJWCs
89HptA9hFgYgpUOpVg/ntIgYTs1PBjfK7Y9jCVyb2ezIs51hjkhHrUAfNQ8guuvFnYuvJnp2j35v
+fXW02RTJodCSFF76wn8r7l1LRfoRUvPbkcOze9+O2Ac/0+m0wFE0ABBQBoK/E8wFHGKKFq9MxnM
/PosKREYe7x+Kn9QGCaK0tyIwK2YqK4feJtbF9/c7ftWInA+nrnCEavrWrcrHCC8+zEWmHMJ2FVO
1njXAVlKiuZxHRBVTlac64AsJUXzuA6IKicrznVAlpKieVwHRJWTFec6IEtJ0TyuA6LKyYpzHZCl
pGge1wFR5WTFuQ7IUlI0z//lgOOvFg0bHX25a16Hpev1LU8IMd5Y1+sYcoHu4vHX69bN5NgCh5mI
UWI6N7PQC6wpVI8SE8eHS58mRnJCJSYzEaPIt1BIBXWi9NeiyKdQfW2kNZw+cZHPuqyMMut2vhgm
hJwW/f8uF0cp/drl9aSkl1mtkzq20G3dH45tNTATGXswpxbafEGsU3vNHgrJ+vr89Wv2sC4ro91G
py0RIJ7ucuuc0+KWQvaTDdNuYwXr2IYnMxFHt5z9eX44tOmvGmfEcTkrarepJSC7c/0AqOMKWYH/
V+MAAAAASUVORK5CYII=`
// 排名背景图使用base64格式!!!
// 排名背景图使用base64格式!!!
// 排名背景图使用base64格式!!!
// echarts版本需要5.0以上!!!特别注意!!!不然进度条与滚动条的样式将不兼容!!!
// echarts版本需要5.0以上!!!特别注意!!!不然进度条与滚动条的样式将不兼容!!!
// echarts版本需要5.0以上!!!特别注意!!!不然进度条与滚动条的样式将不兼容!!!
let xdata = {
value: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
};
let sdata = {
value: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
}
let rankings = [ranking1, ranking2, ranking3]
let rich_images = {}
// 这里设置的是排行背景图的图片地址以及文字样式
xdata.value.map((v, k) => {
let rich_images_key = `img${k}`;
let rich_images_item = {
width: 24,
height: 28,
color: k < 3 ? '#FFFFFF' : '#279FDD', // 图片中的字体颜色
align: 'center',
padding: [3, 1, 0, 1],
verticalAlign: 'middle',
fontSize: 14,
fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
backgroundColor: {
image: k < 3 ? rankings[k] : generalImage,
}
}
rich_images[rich_images_key] = rich_images_item
});
let dataZoomMove = {
start: 0,
end: 4
}
option = {
backgroundColor: "#fff",
tooltip: {
trigger: 'axis',
backgroundColor: '#081429',
textStyle: {
color: '#fff',
},
borderColor: "rgba(255,255,255,.2)",
axisPointer: {
lineStyle: {
color: "rgba(255,255,255,.1)"
},
}
},
dataZoom: [
{
show: true, // 为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: '0%',
left: '0%',
top: '4%',
right: '5%',
},
xAxis: {
type: 'value',
axisLabel: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: [
{
type: 'category',
data: xdata.value,
inverse: true,
axisLabel: {
fontSize: '14px',
inside: true,
verticalAlign: 'bottom',
lineHeight: 44,
margin: 0,// 刻度标签与轴线之间的距离
formatter: function (value) {
let k = xdata.value.indexOf(value);
let index = k;
return `{img${index}|${index + 1}}{a|${value}}`
},
rich: {
a: {
fontSize: '14px',
color: '#333',
padding: [4, 0, 0, 8], // 顺序为上右下左
},
...rich_images,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#13387a',
},
},
},
{
type: 'category',
data: xdata.value, // 右边的值
inverse: true,
axisLabel: {
inside: true,
verticalAlign: 'bottom',
lineHeight: 44,
margin: 0, //刻度标签与轴线之间的距离
formatter: function (value) {
let k = xdata.value.indexOf(value);
let index = k;
return `{a|${sdata.value[index]}}`
},
rich: {
a: {
fontSize: 14,
color: '#333',
padding: [4, 0, 0, 0],
},
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#333',
},
},
}
],
series: [
{
data: sdata.value,
type: 'bar',
barWidth: 8,
showBackground: true,
backgroundStyle: {
color: '#E8E8E8'
},
itemStyle: {
borderRadius: 40,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#00D0FF', // 0% 处的颜色
},
{
offset: 1,
color: '#00A8FF', // 0% 处的颜色
},
],
global: false, // 缺省为 false
}
},
}
]
}
// 如果不需要自动滚动的功能,直接把下面代码都干掉
// 自动轮播和鼠标移入移出的停止和开启
let dataZoomMoveTimer = null;
const startMoveDataZoom = (myChart, dataZoomMove) => {
dataZoomMoveTimer = setInterval(() => {
dataZoomMove.start += 1;
dataZoomMove.end += 1;
if (dataZoomMove.end > sdata.value.length - 1) {
dataZoomMove.start = 0;
dataZoomMove.end = 4;
}
myChart.setOption({
dataZoom: [
{
type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
startValue: dataZoomMove.start,
endValue: dataZoomMove.end,
},
]
})
}, 1000);
}
startMoveDataZoom(myChart,dataZoomMove);
let chartDom = myChart.getDom();
chartDom.addEventListener('mouseout', () => {
if (dataZoomMoveTimer) return;
let dataZoomMove_get = myChart.getOption().dataZoom[0];
dataZoomMove.start = dataZoomMove_get.startValue;
dataZoomMove.end = dataZoomMove_get.endValue;
startMoveDataZoom(myChart, dataZoomMove);
})
// 移入
// myChart.on
chartDom.addEventListener('mouseover', () => {
clearInterval(dataZoomMoveTimer);
dataZoomMoveTimer = undefined;
})