飞机柱状图echarts value配置项内容和展示

      let data1 = {
    name: ['XXX派出所', 'XXX派出所', 'XXX派出所', 'XXX派出所'],
    value: [23, 45, 67, 78],
    max: [100, 100, 100, 100],
};
const RocketBox = `path://M39.4160625,7.21295363 C39.6488591,8.059973 39.7668394,8.93442196
39.7668394,9.81285015 C39.7668394,15.230972 35.3745838,19.6232275
29.956462,19.6232275 C29.0780338,19.6232275 28.2035849,19.5052473
27.3565655,19.2724507 L17.9483435,16.6866751 C13.1169314,15.3587997
8.12906054,14.6858384 3.11849215,14.6858384 L-3.19744231e-14,14.685
L-3.19744231e-14,4.939 L3.11849215,4.93986187 C8.12906054,4.93986187
13.1169314,4.26690064 17.9483435,2.93902518 L27.3565655,0.353249627
C32.5809586,-1.08263357 37.9801793,1.98856052 39.4160625,7.21295363 Z
`;
let series = [];
const Rocket = `path://M25.6400613,11.9611252 C25.7612457,11.8541243 25.9431472,11.8541243 26.0643284,11.9612462 C26.1712921,12.0823813 26.1713443,12.2642002 26.0644496,12.3853954 L26.0644496,12.3853954 L23.751769,14.698076 C23.6305847,14.8050769 23.4486832,14.8050769 23.3274988,14.698076 C23.2204979,14.5768916 23.2204979,14.3949901 23.3274988,14.2738058 L23.3274988,14.2738058 Z M26.3478657,12.6684446 C26.4690501,12.5614437 26.6509516,12.5614437 26.772136,12.6684446 C26.8791368,12.789629 26.8791368,12.9715305 26.772136,13.0927148 L26.772136,13.0927148 L25.2384114,14.6264394 C25.117227,14.7334403 24.9353255,14.7334403 24.8141411,14.6264394 C24.7071402,14.5052551 24.7071402,14.3233536 24.8141411,14.2021692 L24.8141411,14.2021692 Z M27.1206588,5.98320781 C29.9162278,3.1172034 33.5243463,4.17969294 33.736239,4.2497581 C33.889999,4.83812031 33.9698879,5.44334079 33.9741348,6.05140483 L33.9741348,6.05140483 L33.9741348,6.18705011 C33.982501,7.94994301 33.2705522,9.6398034 32.0031473,10.8651733 C32.1454593,11.6441342 32.1099465,12.6698985 31.119089,13.519045 C30.1282414,14.3681915 28.5718965,14.0846574 28.2533305,13.6959049 C27.9347644,13.3071524 28.2883631,13.1654463 28.2883631,13.1654463 L28.2883631,13.1654463 L28.6771159,12.5633471 L25.422959,9.30883614 L24.820859,9.69758863 C24.820859,9.69758863 24.6793959,10.0511871 24.2904004,9.73262121 C23.9014049,9.41405823 23.6177616,7.85799567 24.4667871,6.86726607 C25.3158096,5.87653451 26.3416989,5.84150173 27.1206588,5.98320781 Z M24.897715,11.1466445 C25.0188994,11.0396436 25.2008009,11.0396436 25.3219853,11.1466445 C25.4289861,11.2678289 25.4289861,11.4497304 25.3219853,11.5709148 L25.3219853,11.5709148 L23.5047295,13.3887765 C23.3830464,13.4954341 23.2011724,13.4954341 23.0794893,13.3887765 C22.9735036,13.2672105 22.9735036,13.0860724 23.0794893,12.9645063 L23.0794893,12.9645063 Z M25.3401676,9.80971155 L28.1876286,12.6583825 C27.8080878,12.7208109 27.3309664,12.7741479 27.227323,12.6705045 L27.227323,12.6705045 L26.2716242,11.7148057 L25.3159237,10.7593495 C25.2334943,10.6770414 25.2838003,10.1953122 25.3401676,9.80971155 L25.3401676,9.80971155 Z M31.6835059,6.30136797 C31.5782856,6.26633539 30.587556,5.41718851 29.5966985,6.33640055 C28.7126403,7.43246852 29.5265122,8.31810214 29.5966985,8.3881673 C29.6668782,8.45823247 30.5525154,9.27222557 31.6484733,8.38817537 C32.5675642,7.39731789 31.7551469,6.37143313 31.6835059,6.30136797 Z`;
let colorArr = [
    {
        color1: '#1582CE',
        color2: '#4BCEFF',
    },
    {
        color1: '#65A149',
        color2: '#8DE165',
    },
    {
        color1: '#C48C30',
        color2: '#F4AE3D',
    },
    {
        color1: '#B5435E',
        color2: '#E8466C',
    },
];
function formatColor1(sData) {
    var sss = [];
    sData.forEach(function (item, i) {
        let itemStyle = {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: colorArr[i].color1
                  },
                  {
                    offset: 1,
                   color: colorArr[i].color2
                  }
                ])
        };
        sss.push({
            value: item,
            itemStyle: itemStyle,
        });
    });
    return sss;
}
function formatColor2(sData) {
    var sss = [];
    sData.forEach(function (item, i) {
        let itemStyle = {
            color: colorArr[i].color2
        };
        sss.push({
            value: item,
            itemStyle: itemStyle,
        });
    });
    return sss;
}

option = {
    backgroundColor: '#0a1235',
    grid: {
        left: '10',
        right: '20',
        bottom: '0',
        top: '20',
        containLabel: true,
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        formatter: function (param) {
            return param[0].value;
        },
        textStyle: {
            color: '#fff',
            fontSize: 20,
        },
    },
    xAxis: {
        show: true,
        type: 'value',
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff',
            },
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#3E3E3E',
            },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
    },
    yAxis: [
        {
            type: 'category',
            inverse: true,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                },
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
            },
            data: data1.name,
        },
    ],
       series: [
          {
            name: '排名',
            type: 'bar',
             data: formatColor1(data1.value),
            itemStyle: {
              normal: {
                barBorderRadius: 20,
              },
            },
            label: {
              show: false,
              position: 'right',
              color: '#1798ff',
              offset: [10, 0],
              fontSize: 14
            },
            z: 2,
            barWidth: 10,
          },
          {
            name: 'fly',
            type: 'pictorialBar',
            barGap: '-100%',
            symbolPosition: 'end',
            symbol: RocketBox,
            symbolSize: [35, 20],
            symbolOffset: [8, 0],
            silent: true,
            z: 4,
           data: formatColor2(data1.value),

          },
          {
            name: 'rocket',
            type: 'pictorialBar',
            barGap: '-100%',
            silent: true,
            symbolPosition: 'end',
            symbol: Rocket,
            symbolSize: [12, 12],
            symbolOffset: [2, 0],
            itemStyle: {
              color: '#FFFFFF'
            },
            z: 5,
            data: data1.value,
            symbolRotate: 315
          },
          {
            name: '排名',
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.15)'
              }
             
            },
            z: 2,
            barWidth: 10,
            data: data1.max

          }
        ]
};