let ranking1 = `data:image/png;base64,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`;
let ranking2 = `data:image/png;base64,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`
let ranking3 = `data:image/png;base64,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`
let ranking4 = `data:image/png;base64,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`
let left2 = [{
name: "租赁和商务服务业",
num: 1234,
num1: 1234
}, {
name: "科学研究和技术服务业",
num: 123,
num1: 1234
}, {
name: "交通运输、仓储和邮政业",
num: 500,
num1: 1234
}, {
name: "信息传输、软件和信息技术服务业",
num: 345,
num1: 1234
}, {
name: "批发和零售业",
num: 4356,
num1: 1234
}, {
name: "采矿业",
num: 2345,
num1: 1234
}, {
name: "制造业",
num: 12111,
num1: 1234
}, {
name: "电力、热力、燃气及水生产和供应业",
num: 5673,
num1: 1234
}]
const dataZoomMove = {
start: 0,
end: 4
}
const dataSource = left2;
option ={
backgroundColor:'#000',
legend: {
data: ['总量', '每天'],
left: 'center',
top: 'top',
itemWidth: 12,
itemHeight: 10,
textStyle: {
color: '#E3D8CB',
fontSize: '14px'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(21, 60, 142, 0.8)',
borderColor: '#4DFFEA',
borderWidth: 1,
borderRadius: 5,
textStyle: {
color: '#BCE9FC',
fontSize: 14,
align: 'left'
},
confine: true
},
grid: {
left: '110',
right: '13%',
top: '5%',
bottom: '1%'
},
xAxis: { show: false },
yAxis: [
{
gridIndex: 0,
position: 'left',
splitLine: {
show: false
},
axisLine: {
show: false
},
type: 'category',
axisTick: {
show: false
},
inverse: true,
data: dataSource.map((item, index) => index + 1),
axisLabel: {
align: 'left',
padding: [0, 0, 0, -90],
formatter: (index) => {
const id = index
if (id < 4) {
return `{icon${id}|${id}}`
} else {
return `{count|${id}}`
}
},
rich: {
icon1: {
width: 21,
padding: [0, 5, 0, 0],
height: 20,
fontSize: 12,
color: '#fff',
align: 'center',
borderRadius: 50,
backgroundColor: {
image: ranking1
}
},
icon2: {
width: 21,
padding: [0, 5, 0, 0],
height: 20,
color: '#fff',
fontSize: 12,
align: 'center',
borderRadius: 50,
backgroundColor: {
image: ranking2
}
},
icon3: {
width: 21,
padding: [0, 5, 0, 0],
height: 20,
color: '#fff',
fontSize: 12,
align: 'center',
backgroundColor: {
image: ranking3
}
},
count: {
width: 21,
height: 20,
color: '#fff',
fontSize: 12,
padding: [0, 5, 0, 0],
align: 'center',
backgroundColor: {
image: ranking4
}
}
}
}
},
{
gridIndex: 0,
position: 'left',
splitLine: {
show: false
},
axisLine: {
show: false
},
type: 'category',
axisTick: {
show: false
},
inverse: true,
data: dataSource.map((item, index) => item.name),
axisLabel: {
align: 'center',
padding: [0, 0, 0, -30],
formatter: (name, index) => {
const paramsNameNumber = name.length
const provideNumber = 3// 一行显示几个字
let nameNew = ''
if (paramsNameNumber > provideNumber) {
nameNew = name.substring(0, 3) + '...'
} else {
nameNew = name
}
const id = index + 1
if (id < 4) {
return `{name|${nameNew}}`
} else {
return `{name|${nameNew}}`
}
},
rich: {
name: {
width: 70,
color: '#fff',
height: 25,
align: 'left',
fontSize: 14
}
}
}
},
{
type: 'category',
inverse: true,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: { // 改变y轴颜色
show: false
},
data: dataSource.map((item) => item.num),
axisLabel: {
verticalAlign: 'bottom',
align: 'right',
padding: [0, -60, 0, 0],
textStyle: {
color: '#14F7FF',
fontSize: 14
},
formatter: function (value) {
return value + '万'
}
}
},
{
type: 'category',
inverse: true,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: { // 改变y轴颜色
show: false
},
data: dataSource.map((item) => item.num1),
axisLabel: {
verticalAlign: 'top',
align: 'right',
padding: [6, -60, 0, 0],
textStyle: {
color: '#2EA6FF',
fontSize: 14
},
formatter: function (value) {
return value + '万'
}
}
}
],
dataZoom: [
{
show: false, // 为true 滚动条出现
realtime: true,
type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
height: '90%', // 表示滚动条的高度，也就是粗细
startValue: dataZoomMove.start, // 表示默认展示20%～80%这一段。
endValue: dataZoomMove.end,
width: 6,
right: '26%',
top: '1%', // 位置和grid配置注意下
// height: '56%',
yAxisIndex: [0, 1, 2, 3], // 关联多个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
}
],
series: [
{
name: '总量',
type: 'bar',
barWidth: 12, // 柱子宽度
showBackground: true,
barGap: '60%',
barCategoryGap: '60%',
backgroundStyle: {
color: 'rgba(58,69,75, 1)',
borderRadius: 30
},
itemStyle: {
normal: {
label: {
show: false // 开启显示
},
barBorderRadius: 30,
borderWidth: 2,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#063863'
}, {
offset: 1,
color: '#14F7FF'
}])
}
},
data: dataSource.map((item, index) => item.num)
},
{
name: '每天',
type: 'bar',
barWidth: 12, // 柱子宽度
showBackground: true,
barGap: '60%',
barCategoryGap: '60%',
backgroundStyle: {
color: 'rgba(58,69,75, 1)',
borderRadius: 30
},
itemStyle: {
normal: {
label: {
show: false // 开启显示
},
barBorderRadius: 30,
borderWidth: 2,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#063863'
}, {
offset: 1,
color: '#2EA6FF'
}])
}
},
data: dataSource.map((item, index) => item.num1)
}
]
}
let dataZoomMoveTimer = null
const startMoveDataZoom = (myChart, dataZoomMove) => {
dataZoomMoveTimer = setInterval(() => {
dataZoomMove.start += 1
dataZoomMove.end += 1
if (dataZoomMove.end > dataSource.length - 1) {
dataZoomMove.start = 0
dataZoomMove.end = 4
}
myChart.setOption({
dataZoom: [
{
type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
startValue: dataZoomMove.start,
endValue: dataZoomMove.end
}
]
})
}, 3000)
}
startMoveDataZoom(myChart, dataZoomMove)
const chartDom = myChart.getDom()
chartDom.addEventListener('mouseout', () => {
if (dataZoomMoveTimer) return
const dataZoomMoveget = myChart.getOption().dataZoom[0]
dataZoomMove.start = dataZoomMoveget.startValue
dataZoomMove.end = dataZoomMoveget.endValue
startMoveDataZoom(myChart, dataZoomMove)
})
// 移入
// myChart.on
chartDom.addEventListener('mouseover', () => {
clearInterval(dataZoomMoveTimer)
dataZoomMoveTimer = undefined
})