{b}

' + '

' + dotHtml1 + '在册人数：{c0} 人

' + '

' + dotHtml2 + '在场人数：{c1} 人

', }, legend: { data: ['在场人数', '在册人数'], right: '80', top: '100', textStyle: { //文字样式 color: '#fff', fontSize: '12', } }, // Y滑动框 dataZoom: [ //Y轴滑动条 { type: 'inside', //滑动条 show: true, //开启 yAxisIndex: 0, startValue: 0, endValue: 10, filterMode: 'filter', height: 4, bottom: 10, handleSize: '300%', left: '93%', //滑动条位置 start: 1, //初始化时，滑动条宽度开始标度 end: 50 //初始化时，滑动条宽度结束标度 }, //y轴内置滑动 { type: 'inside', //内置滑动，随鼠标滚轮展示 yAxisIndex: 0, startValue: 0, endValue: 10, filterMode: 'filter', height: 4, bottom: 10, handleSize: '300%', start: 1,//初始化时，滑动条宽度开始标度 end: 50 //初始化时，滑动条宽度结束标度 }], xAxis: { type: 'value', position: "top", splitLine: { show: true, lineStyle: { color: 'rgba(98, 162, 205, 0.4)', }, }, axisTick: { show: false, }, axisLabel: { textStyle: { color: '#fff', fontSize: 12, }, }, axisLine: { show: false, }, }, yAxis: { type: 'category', splitLine: { show: false, }, axisTick: { show: false, }, data: res.map(function (item) { return item.name; }), axisLabel: { textStyle: { color: '#fff', fontSize: 12, }, }, axisLine: { lineStyle: { color: 'rgba(98, 162, 205, 0.4)', }, }, }, series: [ { name: '在场人数', type: 'bar', data: res.map(function (item) { return item.value2; }), itemStyle: { emphasis: { barBorderRadius: [0, 20, 20, 0], }, normal: { barBorderRadius: [0, 20, 20, 0], color: new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ { offset: 0, color: 'rgba(2, 22, 80, 0.3)', // 0% 处的颜色 }, { offset: 1, color: 'rgba(0, 255, 255, 0.8)', // 100% 处的颜色 }, ], false ), }, }, label: { normal: { show: false, formatter: '{c}', position: 'insideRight', offset: [-2, 1.5], textStyle: { color: '#fff', fontSize: 10, }, }, }, }, { name: '在册人数', textStyle: { // 提示框浮层的文本样式。 color: '#fff', fontStyle: 'normal', fontWeight: 'normal', fontFamily: 'sans-serif', fontSize: 14, }, type: 'bar', z: -10, data: res.map(function (item) { return item.value; }), barGap: '-100%', itemStyle: { color: 'rgba(0,0,0,0)', borderColor: '#fff', padding: 0, emphasis: { barBorderRadius: [0, 20, 20, 0], }, normal: { barBorderRadius: [0, 20, 20, 0], color: new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ { offset: 0, color: 'rgba(2, 30, 86, 0.1)', // 0% 处的颜色 }, { offset: 1, color: 'rgba(255, 177, 102, 0.9)', // 100% 处的颜色 }, ], false ), }, }, label: { normal: { show: false, lineHeight: 12, formatter: '{c}', position: 'right', right: 0, textStyle: { color: '#fff', fontSize: 12, }, }, }, }, ], barCategoryGap: '60%', };

渐变可滚动缩放柱状图