echarts柱状图背景替换

zluz_
已于 2023-03-17 16:47:09 修改
阅读量998
点赞数
文章标签： echarts 前端 javascript
于 2022-12-01 11:39:30 首次发布
本文链接：https://blog.csdn.net/zluz_/article/details/128129460
版权
参考文章：http://www.duanlonglong.com/qdjy/1226.html
在这里插入图片描述
top_right_options: {
        padding: [0],
        grid: {
          top: 20,
          bottom: 35,
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: { color: '#75baea' },
          },
          data: ['房屋\n故障', '园区工\n程故障', '园区建\n筑故障', '工业机\n械故障', '园区电\n路故障', '消防\n故障', '器材\n故障'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            barWidth: '25%',
            itemStyle: {
              normal: {
                color() {
                  // 默认柱子消失
                  return null;
                },
                label: {
                  formatter: '{c}',
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '10',
                    color: '#fff',
                  },
                },
              },
            },
            data: [650, 810, 400, 400, 600, 600, 400],
            type: 'bar',
          },
          {
            type: 'pictorialBar',
            data: [650, 810, 400, 400, 600, 600, 400],
            symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAByCAYAAABeOoENAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF8WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTA5LTA1VDEwOjAxOjE1KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIyLTA5LTA1VDEwOjAxOjE1KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0wOS0wNVQxMDowMToxNSswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplOTVlZDNkMS00YjY0LTliNGMtODE3MC1lY2NmYTNhMjQwOTgiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo0ZGY5NjRmNS0yNjE0LWQ0NDItOGJjMi03YWM2YmRiMGY1ZmQiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyYWE4OWIzYi1iNmFhLWIwNGUtOTlkYy03YjQxZGY1NzYyYmMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjJhYTg5YjNiLWI2YWEtYjA0ZS05OWRjLTdiNDFkZjU3NjJiYyIgc3RFdnQ6d2hlbj0iMjAyMi0wOS0wNVQxMDowMToxNSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplOTVlZDNkMS00YjY0LTliNGMtODE3MC1lY2NmYTNhMjQwOTgiIHN0RXZ0OndoZW49IjIwMjItMDktMDVUMTA6MDE6MTUrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6G1rVwAAAIHklEQVRoge1ZS48cVxX+vlu3uzwz3fLIJh6QwyKCkAjxCyJYseIH8A/CIguUBasIgQQSLGCLeElI/AiWQUiwBpkNICSEIEZ4iD2eZDKPru66h8U959xTPWMTewCxoDRW1+PWeX7nO+eWefftB7jqWB4fJABvgPgqBCOAbwH40cn+ocR19z9/AABITxDyGQC/GvPwvdPFo4+dLh+9OOb1DwD8cnl88OpV76QtAf3y+OCbQvn1xe77r50tHqN0G5Rug7PFES52Tj4rlHvL44OvL48P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',
            symbolOffset: [0, '5%'],
            symbolSize: ['40%', '100%'],
          },
        ],
      },