const yData = ['广东省', '湖南省', '浙江省', '福建省', '安徽省', '湖北省'];
const dfData = [430, 460, 505, 480, 470, 550]; // 最低分
const gfData = [690, 700, 720, 655, 710, 740]; // 最高分
const bar2 = gfData.map((item, index) => {
return item - dfData[index]
});
let dataZoomNum = 8;
option = {
backgroundColor: "rgba(16, 33, 71)",
dataZoom: [{
show: yData.length > dataZoomNum ? true : false,
type: 'slider',
//backgroundColor: 'rgba(245,245,245)',
backgroundColor: 'transparent',
brushSelect: false,
width: 7,
yAxisIndex: [0],
//left: 'center', //滚动条靠左侧的百分比
//bottom: 13,
startValue: 0, //滚动条的起始位置
endValue: dataZoomNum - 1, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
handleStyle: {
color: '#5ecce4',
borderColor: '#5ecce4',
},
fillerColor: '#5ecce4',
borderColor: 'transparent',
showDetail: false,
dataBackground: {
areaStyle: {
opacity: 0
},
lineStyle: {
color: 'transparent'
},
},
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
position: function (point, params, dom, rect, size) { // 提示框位置
let x = 0;
let y = 0;
//固定在中间
if (point[0] + size.contentSize[0] > size.viewSize[0]) {
x = point[0] - size.contentSize[0]
} else {
x = point[0]
}
if (point[1] > size.contentSize[1]) {
y = point[1] - size.contentSize[1]
} else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
y = point[1]
} else {
y = "30%"
}
return [x, y];
},
formatter: function (params) {
var tar = params[1];
var tar2 = params[0];
var zdf = tar2.data; // 最低分
var zgf = tar.data + zdf; // 最高分
return `
<span style="display:block;padding-left:11px;width:131px;height: 24px;background: linear-gradient(90deg, #1071FF, #15FFE1);box-shadow: 0px 3px 5px 0px rgba(0, 55, 111, 0.67);opacity: 0.9;border-radius: 5px 5px 0px 0px;font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;line-height: 24px;">${tar.name}</span>
<div style="display:flex;justify-content: space-between;padding:0 11px;margin-top:11px;margin-bottom:11px;">
<div style="font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;color: #70EEFE;">最高分</div>
<div style="font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;">${zgf}分</div>
</div>
<div style="display:flex;justify-content: space-between;padding:0 11px;margin-bottom:11px;">
<div style="font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;color: #70EEFE;">最低分</div>
<div style="font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;">${zdf}分</div>
</div>
<div style="display:flex;justify-content: space-between;padding:0 11px;margin-bottom:11px;">
<div style="font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;color: #70EEFE;">平均分</div>
<div style="font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;">${((zdf + zgf) / 2).toFixed(1)}分</div>
</div>
`;
},
extraCssText: `border:transparent;padding:0;opacity: 0.9;border-radius: 5px;background: rgba(2, 48, 85,1);box-shadow: 0px 1px 8px 0px rgba(32, 142, 255, 0.56);opacity: 0.9;`
},
grid: {
left: '24',
right: '24',
bottom: '18',
top: '24',
containLabel: true
},
xAxis: {
type: 'value',
position: 'top',
min: 300,
max: 750,
interval: 50,
axisLine: { // 坐标轴线
show: false
},
axisTick: { // 坐标轴刻度
show: false
},
axisLabel: { // 坐标轴标签
show: true,
fontSize: 11,
fontFamily: 'Source Han Sans CN',
fontWeight: 400,
color: '#70EEFE',
},
splitLine: { // 分割线
lineStyle: {
color: '#70EEFE',
type: 'dashed',
}
},
},
yAxis: {
type: 'category',
data: yData,
inverse: true, // 坐标标签倒序
axisLine: { // 坐标轴线
show: false
},
axisTick: { // 坐标轴刻度
show: false
},
splitLine: { // 分割线
show: false
},
axisLabel: {
align: 'center',
padding: [0, 0, 0, -80],
formatter: (value, index) => {
let limit = 4
if (value.length > limit) {
return [`{lg|${index + 1}} ` + "{title|" + value.substr(0, limit) + "..." + "} "].join("\n");
} else {
return [`{lg|${index + 1}} ` + "{title|" + value + "} "].join("\n");
}
},
rich: {
lg: {
backgroundColor: "rgba(3, 207, 225, 0.3)",
color: 'rgba(21, 255, 225, 1)',
borderRadius: 2,
padding: [5, 5, 2, 5],
align: "center",
verticalAlign: "top",
fontSize: 14,
fontFamily: 'Source Han Sans CN-Regular',
},
title: {
color: '#C4E1FF',
align: "left",
verticalAlign: "top",
fontSize: 14,
fontFamily: 'Source Han Sans CN-Regular',
padding: [5, 0, 0, 0],
},
},
},
},
series: [
{
name: '最低分',
type: 'bar',
stack: 'Total',
barWidth: 11,
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: dfData
},
{
name: '最高分',
type: 'bar',
stack: 'Total',
barWidth: 11,
itemStyle: {
borderColor: '#157DFE',
borderWidth: 1,
color: new echarts.graphic.LinearGradient( //渐变色
1, 1, 0, 0, [{
offset: 1,
color: `rgba(21, 125, 254, 0)`
}, {
offset: 0,
color: `#157DFE`
}
]
),
},
label: {
show: false,
},
data: bar2
}
]
};
option && myChart.setOption(option);