echarts官网配置,主要配置dataZoom
option = {xAxis: {type: 'category',data: ['张三','李四','王五','赵六','孙七','周八','吴九','郑十','钱十一','陈十二','刘十三','杨十四','黄十五','何十六','宋十七'],axisLabel: {formatter: function (value) {return value.split('').join('\n'); // 使用换行符实现垂直排列},interval: 0,margin: 30}},yAxis: [{type: 'value',name: '客户数(人)',position: 'left',alignTicks: true, // 对齐刻度线axisLine: { show: true }// axisLabel: {formatter: '{value} 单位1'}},{type: 'value',name: '承接率',position: 'right',alignTicks: true, // 对齐刻度线axisLine: { show: true },min: 0,max: 100,axisLabel: { formatter: '{value}%' }}],series: [{data: [12, 7, 19, 3, 10, 1, 18, 14, 0, 9, 5, 16, 20, 4, 11],type: 'bar',itemStyle: {color: '#03D7FF' // 设置数据1的颜色}},{data: [6, 4, 12, 3, 8, 1, 15, 14, 0, 7, 5, 12, 15, 4, 8],type: 'bar',itemStyle: {color: '#006BFF' // 设置数据1的颜色}},{data: [50, 52, 95, 64, 21, 100, 83, 100, 0, 78, 100, 75, 75, 100, 73],type: 'line',yAxisIndex: 1,itemStyle: {color: '#ffd230'}}],dataZoom: [{type: 'slider', // 滑动条类型start: 0, // 数据窗口范围的起始百分比end: 50, // 数据窗口范围的结束百分比show: true,zoomLock: true,backgroundColor: '#edf0fa',handleIcon: 'circle',handleSize: 8,handleStyle: {color: '#c5ccde',borderWidth: 0},showDetail: false,showDataShadow: false,borderRadius: 15,bottom: 50,height: 8,brushSelect: false,fillerColor: '#c5ccde',filterMode: 'empty'}]
};
运行效果图: