echarts柱状图象形图，支持横向滑动

展示效果

代码

let xData = ['2020','2021','2022','2023', '2024', '2025', '2026'];
let yData = [267,2667,2467,2667, 3234, 4436,666];
option = {grid: {left: '5%',right: '5%',top: '15%',bottom: '5%',containLabel: true},// 滚动条dataZoom: [{show: true,type: 'inside',zoomLock: true,throttle: 0,preventDefaultMouseMove: false, //在移动端影响手机上下滑动问题showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息。start: 0, //滚动条的起始位置end: 0 //滚动条的截止位置（按比例分割你的柱状图x轴长度）}],tooltip: {show: true,confine: true,trigger: 'axis',extraCssText: 'z-index:20',axisPointer: {// 设置指示线type: 'line', // 默认为直线，可选为：'line' | 'shadow'lineStyle: {color: '#FFCF5F'}},borderColor:'rgba(50,50,50,0.9)',backgroundColor: 'rgba(50,50,50,0.9)',textStyle:{color:'#ffffff'},formatter: function (params) {let str ='<div style="text-align: center;font-size: 14px;">' +'<div style="font-size: 12px;color:#8C8C8C">' +params[0].name +'</div>';(str += '<div>' + params[0].data), '单' + '</div></div>';return str;}},xAxis: {type: 'category', // category(坐标轴类型)data: xData,axisTick: {// 坐标轴刻度相关配置show: false // 是否显示坐标轴刻度},axisLine: {// 坐标轴轴线相关配置lineStyle: {// 坐标轴轴线样式color: 'rgba(255,255,255,0.15)' // 坐标轴轴线颜色}},axisLabel: {// 坐标轴刻度标签相关配置color: '#ffffff',fontSize: 12,margin: 10}},yAxis: {type: 'value', // value(数值轴,适用于连续数据)axisTick: {// 坐标轴刻度相关配置show: false // 是否显示坐标轴刻度},name: '订单量',nameTextStyle: {color: '#ffffff', //y轴单位颜色padding: [15, 51, 0, 0] //y轴单位偏移},axisLine: {// 坐标轴轴线相关配置show: false // 是否显示坐标轴轴线},axisLabel: {// 坐标轴刻度标签相关配置color: 'rgba(255, 255, 255, 0.70)',fontSize: 12,formatter: function (value) {return value + '单';}},splitLine: {// 坐标轴在 grid 区域中的分隔线lineStyle: {type: 'dashed',// 分割线配置color: 'rgba(255, 255, 255, 0.15)' // 分割线颜色}}},series: [// 底部的椭圆形(象形柱图):pictorialBar{type: 'pictorialBar', // pictorialBar(象形柱图)label: {// 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等show: true, //是否显示标签position: 'top', // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])color: '#FFCF5F',fontSize: 12},symbolSize: 0, // 图形的大小用数组分别比表示宽和高,也可以设置成10相当于[10,10]symbolOffset: [0, 0], // 图形相对于原本位置的偏移z: 2, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.itemStyle: {// 图形样式// echarts.graphic.LinearGradient(echarts内置的渐变色生成器)// 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上color: '#00C1DC'},data: yData},// 中间的长方形柱状图(柱状图):bar{type: 'bar', // 柱状图barWidth: 30, // 柱条的宽度,不设时自适应barGap: '0%', // 柱子与柱子之间的距离itemStyle: {color: function (params) {const list = [{x: 1,y: 1,x2: 0,y2: 1,type: 'linear',global: false,colorStops: [{offset: 0, // 0%处的颜色color: '#07505A'},{offset: 0.24,color: '#148D9D'},{offset: 0.38,color: '#19B3C9'},{offset: 0.7,color: '#21E4FF'},{offset: 1, // 100%处的颜色color: '#00C1DC'}]},{x: 1,y: 1,x2: 0,y2: 1,type: 'linear',global: false,colorStops: [{offset: 0, // 0%处的颜色color: '#50616D'},{offset: 0.24,color: '#51626E'},{offset: 0.5,color: '#7A95A5'},{offset: 0.75,color: '#BCE7E7'},{offset: 1, // 100%处的颜色color: '#A8C7C9'}]},{x: 1,y: 1,x2: 0,y2: 1,type: 'linear',global: false,colorStops: [{offset: 0, // 0%处的颜色color: '#072E29'},{offset: 0.24,color: '#0B5F55'},{offset: 0.5,color: '#0C8A7B'},{offset: 0.67,color: '#10B7A3'},{offset: 1, // 100%处的颜色color: '#119E8D'}]},{x: 1,y: 1,x2: 0,y2: 1,type: 'linear',global: false,colorStops: [{offset: 0, // 0%处的颜色color: '#1D7A79'},{offset: 0.24,color: '#1F7F80'},{offset: 0.5,color: '#2DB8B9'},{offset: 0.7,color: '#22FAFB'},{offset: 1, // 100%处的颜色color: '#3CF1F2'}]}];if (params.dataIndex > 3) {return list[params.dataIndex % 4];}return list[params.dataIndex];}},data: yData},// 顶部的椭圆形(象形柱图):pictorialBar{type: 'pictorialBar',symbolSize: [30, 10],symbolOffset: [0, -5],z: 12,symbolPosition: 'end',itemStyle: {color: function (params) {const list = ['#00C1DC', '#E6EFF4', '#09E4CA', '#40ECEC'];if (params.dataIndex > 3) {return list[params.dataIndex % 4];}return list[params.dataIndex];}},data: yData}]
};
if (xData.length <= 5) {option.dataZoom[0].show = false;option.dataZoom[0].end = 100 - ((xData.length - 5) / xData.length) * 100;
} else {option.dataZoom[0].end = null;option.dataZoom[0].start = null;option.dataZoom[0].startValue = xData.length - 5;option.dataZoom[0].endValue = xData.length;
}