option = {
// grid: {
// top: '16.5%',
// left: '1.5%',
// right: '2%',
// bottom: 6,
// containLabel: true,
// },
dataZoom: [
{
type: 'slider', // 隐藏或显示（true）组件
show: true,
backgroundColor: 'rgb(19, 63, 100)', // 组件的背景颜色。
fillerColor: 'rgb(16, 171, 198)', // 选中范围的填充颜色。
borderColor: '#fff', // 边框颜色
showDetail: false, // 是否显示detail，即拖拽时候显示详细数值信息
// startValue: 0,
// endValue: 1,
filterMode: 'empty',
width: '90%', // 滚动条范围宽度
height: 0, // 滚动条高度
left: 'center',
zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
handleSize: 0, // 控制手柄的尺寸
// bottom: 3, // dataZoom-slider组件离容器下侧的距离
// start: 0, // 移动手柄的尺寸位置
// end:100,
// minSpan: 10,
moveHandleIcon: 'none', // 移动手柄中间icon
maxValueSpan: 14, // x轴类目数 最多14个 超出显示缩放组件dataZoom
moveHandleSize: 8, // 移动手柄的尺寸高度。
// 移动手柄的样式
moveHandleStyle: {
color: '#ddd',
},
// 高亮样式设置
emphasis: {
// 移动手柄的样式
moveHandleStyle: {
color: '#ddd',
},
},
},
{
// 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
type: 'inside',
zoomOnMouseWheel: false, // 滚轮是否触发缩放
moveOnMouseMove: true, // 鼠标滚轮触发滚动
moveOnMouseWheel: true,
},
],
tooltip: {
trigger: 'axis',
show: true,
padding: 0,
borderWidth: 0,
backgroundColor: 'rgba(0,0,0,0)',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(53, 142, 254, .1)',
width: 40,
type: 'solid',
},
}, // 触发效果 移动上去 背景效果
formatter(params) {
const title = params[0].axisValue
let itemTemp = params.map(item => {
const itemColor = item.color
const bgcolor = typeof itemColor === 'string' ? itemColor : itemColor?.colorStops[0]?.color
return `<div class="repaire-body-item">
<div class="repaire-body-item_label">
<div class="label_dot" style="background-color: ${bgcolor}"></div>
${item.seriesName}
</div>
<div class="repaire-body-item_value">${item.value}${item.seriesName === '不规范操作占比' ? '%' : ''}</div>
</div>`
})
const temp1 = `<div class="repaire repaire-tooltip">
<div class="repaire-tooltip-body">
<div class="repaire-tooltip-date">${title}</div>
${itemTemp.join('')}
</div>
</div>`
return temp1
},
},
legend: {
// show:true,
// right: 0,
// itemWidth: 20,
// itemHeight: 5,
// textStyle: {
// fontSize: 12,
// lineHeight: 12,
// rich: {
// a: {
// verticalAlign: 'middle',
// },
// },
// padding:[0,0,-2,0], //[上、右、下、左]
// },
show: true,
icon: 'rect',
orient: 'horizontal',
top: '13.5',
right: '12%',
itemWidth: 8,
itemHeight: 8,
itemGap: 20,
textStyle: {
// color: '#FFFFFF'
color: '#4E5969',
fontSize: 12,
},
},
xAxis: [
{
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#ddd',
},
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, // 是否展示坐标轴label
color: '#666',
fontSize: 12,
interval: 'auto',
},
// axisLabel: {
// padding: [0, 0, 0, -20] // 四个数字分别为上右下左与原位置距离
// },
type: 'category',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49],
},
// 背景柱体，不显示数据在图表中，只显示背景色
// {
// type: 'category',
// show: false,
// data:['2018年', '2019年', '2020年', '2021年', '2022年']
// }
],
yAxis: [
{
name: '数量',
nameTextStyle: {
color: 'rgba(153, 153, 153, 1)',
fontSize: 14,
align: 'right',
},
type: 'value',
min: 0,
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, // 是否展示坐标轴label
color: '#666',
fontSize: 12,
formatter: '{value}', // 格式化label
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(0,0,0,0.5)',
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
},
{
name: '占比(%)',
nameTextStyle: {
color: 'rgba(153, 153, 153, 1)',
fontSize: 14,
},
type: 'value',
min: 0,
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, // 是否展示坐标轴label
color: '#666',
fontSize: 12,
formatter: '{value}', // 格式化label
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(0,0,0,0.5)',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['rgba(109,133,185,0.3)'], // 线条颜色
// width: 1,
type: 'dashed', // 线条样式，默认是实现，dashed是虚线
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: '水果数量',
type: 'bar',
barWidth: '12',
// barGap:10,
color: '#247FFF',
data: [100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149],
itemStyle: {
color: '#358EFE',
},
emphasis: {
disabled: true,
focus: 'none',
},
},
{
yAxisIndex: 1,
name: '水果占比',
type: 'bar',
barWidth: '12',
// barGap:10,
color: '#247FFF',
data: [200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249],
itemStyle: {
color: '#12C2C1',
},
emphasis: {
disabled: true,
focus: 'none',
},
},
],
}