let option = { title: { text: '', // 主标题 // 主标题文本样式设置 textStyle: { color: '#666', fontWeight: 'bold', fontSize: '20px', }, // itemGap设置主副标题之间的纵向间距,单位px,默认为10 itemGap: 4, // top指title组件离容器上侧的距离,取值可为具体像素如20, 也可为百分比如'20%', 也可以是'top', 'middle', 'bottom' top: 4, // left指title组件离容器左侧的距离,取值可为具体像素如20, 也可为百分比如'20%', 也可以是'left', 'center', 'right' left: '50%', // textAlign指主副标题水平对齐方式,默认左对齐,可选值:'auto'、'left'、'right'、'center' textAlign: 'center', }, tooltip: {//鼠标悬浮提示 trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, legend: { // 图例 show: true, }, xAxis: { type: 'category', data: dateList/*['周一', '周二', '周三', '周四', '周五', '周六', '周日']*/, axisLabel: { interval: 0, rotate: "45",//旋转45° } }, yAxis: { name: '万元', //interval: 300,//刻度间隔 type: 'value' }, series: [ { name: '预测', type: 'bar', barWidth:'20%',//系列柱状图宽度 data: preditList/*[120, 200, 150, 80, 70, 110, 130]*/, color:'grey' }, { name: '实际', type: 'bar', barWidth:'20%', data: realityList/*[140, 300, 160, 100, 80, 120, 190]*/, color:'#2b85e4' }, ], // 数据区域缩放组件配置 dataZoom: [{ type: 'inside', // 数据窗口范围的起始百分比 start: 0, // 数据窗口范围的结束百分比 end: 30, // 是否锁定选择区域(或叫做数据窗口)的大小,如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放 zoomLock: true }, // 手柄的icon相关配置 { handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }] };
echart柱状图自己总结汇总使用-包含滑动等
于 2022-12-16 15:02:18 首次发布