let data =[
{
name: "A局",
value1: 7,
value2: 97,
},
{
name: "B局",
value1: 35,
value2: 173,
},
{
name: "C馆",
value1: 4,
value2: 11,
},
{
name: "D委",
value1: 31,
value2: 106,
},
{
name: "E局",
value1: 37,
value2: 90,
},
{
name: "F局",
value1: 3,
value2: 9,
},
{
name: "H局",
value1: 54,
value2: 147,
},
{
name: "I局",
value1: 14,
value2: 22,
},
{
name: "J局",
value1: 2,
value2: 37,
},
{
name: "K局",
value1: 4,
value2: 23,
},
{
name: "LL局",
value1: 1,
value2: 1,
},
{
name: "MM局",
value1: 15,
value2: 162,
},
{
name: "NN局",
value1: 3,
value2: 11,
},
{
name: "OO委",
value1: 16,
value2: 41,
},
{
name: "PP局",
value1: 48,
value2: 107,
},
{
name: "QQ局",
value1: 18,
value2: 57,
},
{
name: "RR局",
value1: 22,
value2: 67,
},
{
name: "S局",
value1: 11,
value2: 30,
},
{
name: "TT局",
value1: 20,
value2: 67,
},
{
name: "U局",
value1: 11,
value2: 38,
},
{
name: "VV局",
value1: 1,
value2: 2,
},
{
name: "X委",
value1: 37,
value2: 419,
},
{
name: "XY局",
value1: 166,
value2: 341,
},
{
name: "Y大队",
value1: 3,
value2: 12,
},
{
name: "Z部",
value1: 53,
value2: 128,
},
{
name: "AB局",
value1: 2,
value2: 4,
},
{
name: "BC局",
value1: 19,
value2: 67,
},
{
name: "CD局",
value1: 81,
value2: 395,
},
{
name: "EF局",
value1: 20,
value2: 100,
},
]
let xData = [],
yData = [], y2Data = [];
data.map(function (a) {
xData.push(a.name);
yData.push(a.value1);
y2Data.push(a.value2)
});
let arr = yData.concat(y2Data)
let max = Math.max(...arr)
let timeOut = null
let endCount = 10
option = {
backgroundColor:'rgba(0,0,0,0.8)',
color: ['#3398DB'],
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
opacity: 0
}
},
formatter: function (params) {
console.log(params);
return `${params[0].axisValueLabel}<br/>${params[0].seriesName}：${params[0].value}<br/>${params[2].seriesName}：${params[2].value}`
}
},
legend: {
show: true,
icon: 'rect',
top: '10%',
left: 'right',
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: "rgba(231, 252, 255, 1)"
},
data: [
{
name: '主项',
},
{
name: '子项',
}
]
},
dataZoom: [
{
show: true,
height: 5,
xAxisIndex: [0],
bottom: '10%',
startValue: 0,
endValue: endCount,
// start: 0,
// end: settingEnd,
handleIcon:
'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
fillerColor: 'rgba(62, 161, 255, 1)',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: 'transparent'
}
// borderColor: '#bfc1c4'
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
}
],
grid: {
left: '2%',
right: '5%',
bottom: '5%',
height: '70%',
top: '15%',
containLabel: true,
z: 22
},
xAxis: [
{
type: 'category',
boundaryGap: true, // 坐标轴两边留白
gridIndex: 0,
data: xData,
axisLabel: {
rotate: 30,
textStyle: {
fontSize: 10,
color: 'rgba(232, 252, 255, 1)'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
}
],
yAxis: [{
name: '单位：个',
type: 'value',
nameTextStyle: {
color: "rgba(231, 252, 255, 1)"
},
gridIndex: 0,
axisTick: {
show: false
},
// min: min,
max: max + 25,
axisLine: {
lineStyle: {
// color: 'rgba(255,255,255,0)'
}
},
axisLabel: {
color: 'rgba(232, 252, 255, 1)',
fontSize: 10,
formatter: '{value}'
},
splitLine: {
show: false
}
}],
series: [
{
name: '主项',
type: 'bar',
barWidth: 10,
// stack: '主项',
barGap: 1,
itemStyle: {
normal: {
// barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: 'rgba(62, 225, 255, 1)'
},
{
offset: 0.8,
color: 'rgba(62, 225, 255, 0.7)'
},
{
offset: 1,
color: 'rgba(0,0,0,0.8)'
}
]),
borderColor: 'rgba(0,0,0,0.1)', // 边框颜色
borderWidth: 1 // 边框宽度
}
},
showBackground: true,
backgroundStyle: {
color: 'rgba(255,255,255,0.1)',
borderColor: '#107BB8',
borderWidth: 1
},
data: yData,
zlevel: 11
},
{ // 柱顶
type: 'pictorialBar',
symbol: 'rect',
symbolSize: [10, -3], // 调整截面形状
symbolOffset: [-10, -0.7],
z: 3,
symbolPosition: 'end',
itemStyle: {
color: 'rgba(255, 255, 255, 1)',
},
data: yData
},
{
name: '子项',
type: 'bar',
barWidth: 10,
// barGap: '-80%',
itemStyle: {
normal: {
// barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 185, 75, 1)'
},
{
offset: 0.8,
color: 'rgba(255, 185, 75, 0.7)'
},
{
offset: 1,
color: 'rgba(0,0,0,0.8)'
}
])
}
},
showBackground: true,
backgroundStyle: {
color: 'rgba(255,255,255,0.1)',
borderColor: '#107BB8',
borderWidth: 1
},
data: y2Data
},
{ // 柱顶
type: 'pictorialBar',
symbol: 'rect',
symbolSize: [9, -3], // 调整截面形状
symbolOffset: [10, -0.7],
z: 3,
symbolPosition: 'end',
itemStyle: {
color: 'rgba(255, 255, 255, 1)',
},
data: y2Data
}
]
};
// chart.setOption(option)
// chart.on('mouseover',stop)
// chart.on('mouseout',goMove)
// autoMove()
//自动滚动
function autoMove() {
timeOut = setInterval(() => {
// if(this.stopMove){ return }
if (Number(option.dataZoom[0].endValue) === yData.length - 1) {
option.dataZoom[0].endValue = endCount;
option.dataZoom[0].startValue = 0;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
chart.setOption(option)
}, 2500);
}
function stop() {
console.log(11)
clearInterval(timeOut)
}
function goMove() {
autoMove()
}