柱状图帽子

描述:当前是关于Echarts图表中的 示例。
 
                  var img = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABJCAYAAAB2MdXJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDA1IDc5LjE2NDU5MCwgMjAyMC8xMi8wOS0xMTo1Nzo0NCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjEgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkM0RkFDOUQ3RUQ4MTFFQjlCMzNENkNENUI2REUyMDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkM0RkFDOUU3RUQ4MTFFQjlCMzNENkNENUI2REUyMDEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2QzRGQUM5QjdFRDgxMUVCOUIzM0Q2Q0Q1QjZERTIwMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2QzRGQUM5QzdFRDgxMUVCOUIzM0Q2Q0Q1QjZERTIwMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnEcOd0AAAcFSURBVHjavFvL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";
      var option = {
        tooltip: {
          show: false
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '1%',
          top: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['西安省体广场', '新疆天正通达', '江苏路劲物业', '上海家利物业', '广州绿地集团'],
          axisLabel: {
            margin: 10,
            color: 'rgba(172, 179, 196, 1)'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(81, 108, 154, 1)',
              // opacity:0.2
            }
          },
          axisTick: {
            show: false
          }
        }],
        yAxis: [{
          axisLabel: {
            color: 'rgba(172, 179, 196, 1)',
          },

          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(81, 108, 154, 1)',
              // opacity:0.2
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          type: 'bar',
          data: [300, 450, 479, 229, 210],
          barWidth: '10px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(68, 200, 216, 1.00)'
              }, {
                offset: 1,
                color: 'rgba(68, 200, 216, 0.3)'
              }], false)
            }
          },
          label: {
            normal: {
              show: false,
              position: 'top'
            }
          }
        }, {
          name: 'glyph',
          type: 'pictorialBar',
          barGap: '-100%',
          symbolPosition: 'end',
          symbolSize: 60,
          symbolOffset: [0, '-20'],
          data: [{
            value: 300,
            color: 'rgba(68, 171, 201, 1.00)',
            symbol: img,
          }, {
            value: 450,
            color: 'rgba(68, 171, 201, 1.00)',
            symbol: img,
          }, {
            value: 479,
            color: 'rgba(68, 171, 201, 1.00)',
            symbol: img,
          }, {
            value: 229,
            color: 'rgba(68, 171, 201, 1.00)',
            symbol: img,
          }, {
            value: 210,
            color: 'rgba(68, 171, 201, 1.00)',
            symbol: img,
          },]
        }]
      };