echarts 立体柱图

转载:链接地址
复制到echarts里面直接使用

var rocket = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAeCAYAAACPOlitAAAAAXNSR0IArs4c6QAADOdJREFUaEPFmttvXNd1xn9r7TNnOBzeRIkSRetiW7Lk0q5tWXIcSS2qFrENFMlLADtNAyc24tZAC/ShL+1b1H+hQAuoqKvIjlvAfstLYSNFpCRO4tiMGsryTfcLZZOWeBvOcOZc9ir2GdKmZF1oKao3MDjDOZe993fW5VvfonA7x17T4WGiyhQRKyglKRq1iOKYMkKllVAlolN88Yk8qBm5OnLzZB7yCNJwBFJ1tMSoJxG1+Us0tg2SvfqUhHO3bcjv7clmMvwqpe6EjmZOt4OV3rPGKUMGdwBrUfrM6AU6xIgNqghlMUrAZWsJQGE0gXmEeRGaAk0PdSdMmTHuPWMScdopY02YiudozbTI40Fs9bv4gz8gR8RuZY+3BpCZ7Pkh5ZmcNcTcibARYUh9AUo/RrcZPSp0G/QA3UAXEAORGRoWL1dZhYVttX+3AJQICRSf8L1mMGPGNDAtcEk8Ex4+Qbloxrwas5ZztjbEx8f/XFo3C9LyAdpr+uRwe8lv1Sl1lemNE9aZMazKMMZGEwYRBswzIEKnQQSoUADhwvebXeiS+wJ0nrbbhWMarMxg2mBCYEzgEzEuePgwjTmWdTDWnKF++gwJP8C+iFUtC6Dt+6wUddOfZvRnQkWhx3LuUmGLGptNGMJYjbCStqUEMFi07WVNcovILRhcDZiEwoouiHAyV46jHNOcS5ozl2bMZQnT7/6tzC1nymuvfa/p9rV0uA4qaUSXZPTmxqAYG0VYhzKgMGSeTVCAUw2xZRGc5Ux+W64xEoM6MC7CWYTzAhfMOI9w2udMhkDvHTMdjlpWZ37keQlWeNVxdYD2mu4cpi9rsNYLK0yIEdIso0/gEadsQUhMqIjnfmAjUFmc4Ytazhe9fulOrnFvcL8xE97FGHfgvHEB400Pk6p0ecNEmIwd57I649cC6XMA7X7BupMOBjBW4unMBR/SrMvpyo3NKFtUiMzzsQirMB5D2LwQeBeiansLy3Wt2wBQiE3jGK+hvIcxYELVPCdVOKHKXGaUFJwYUw4mEs/EPVVqV9KGy/bw6I+sp5mx3hnrUSKFiTzmvCZEIuzyxh8jzAm8nRkXxdjlhO8b3HUtE71y8zcLxk3cN2fGfwA/FqHija+KsAYYdcJPs5w5IobIWREZlsGFWDn3m+/JpaV7WUikJl95kX4vrA1xJsso4ZmIlI+0mzqtIs78GXCXeEYSx+uSY5LzbXX8fcFxrjG+RIC8GP+WG/uyjI+iDnZqzk5RaiYcyowPSoJreQbwrFlIt5POGPMJlxZdToZfsTivUe5RNuURg5aTztW5kHZyKqTFR7Zyh6U87o2toox5OHj4afnd1hesu1P5jij/ANx5WwLurT20heeFXPjX3z0jRx88YHc4z6MmDJsw6YWfjT7N0T3/hBvbwIaqslYd3QjTmefk6Ekusle8bH/J1iYplVLEPYG4eTiRznFhMQ0+eMC2lBxP+owehJ+XU375q+dk8slXzB2r84QI/yjKbhZI363t6fd3txmngH9JMvYffU4mA1WRDu73nq95oVfg9cPPyM/CjOtescrKefrV2OSMrtwzlnVw9t4Ss/LgAdvmPGUcvWpMlCq8/6unZH5xqTtesq1mfNMbFYxD2uLtkedlJpx/aL/dI8K3Ub4uxjChdPjyR1j7GfMcyuHl0Wfl52FJe/Zbx6xwn8DjFjKz8drhZ+R/Pl2umWw/wN0q3BW4uzfG4ipn5KH99pg6NIJLecTpkb+Ui0v3uP2AbVDhidwYEs8xhDdHnpET4ZrN/2zlnj7utpyvIXxDhK9AUWt9WWMe422D18X4Sd1z9IPvSyCPPLLfBi1it3l2GDTxvPbbZ+XXSxcaklRiRZwNiWo2NUbl4f32TbRwkCO/PcHJ4HeXAbTPerXMg17YZbBSPIdTx09GvysTi9dt/6FtyoU/EuOrCFukzYs2QFGE/n+M2oJLBd5zyDl+8fbTHF0sKQrrcewS4XHJKefKm2r8cuR7cvayxe013baVQVrsEMFnwm9k2377i/CHwMiiZXzupg2s1JjHzLNHjJoYh/Kctw+f4+NFQLfvs05zDHnlPnXsNtgtcB9QXqjBFmux5dKjqwEbkmL4BCKYGYRyYVqMDz2EePKGa/HOYggIDwi8rl7mXmf8ifkiDLynyo+71nHi4J9KduUk9/279Ucldgm4csKv5ZED9q3gc7lypGc9x652E2ay40cFe97tc7aF4lNg1JS3aPD+yPPSWJzogRetGnnuNdgCBT0YAIYkFLKwyowVCyVJWaQoTW44QumgxpQJdYRZb4yLZ8wL5/F8kgkXyHnv6HNyfOnDHnrZ7pGMB9XxsBndAqdE+UVXwujBZyVIKZ8bW/7TVnW02BE7NM94Sx4+YF9XQ00Zd8bxK4nS0ids+y8bkownAulSK97g+yLBlDkrjmlqNJaCFShEXGdIjM2i3C3Keu8LoLowKuboFV9kx8pCxb84nXkIEkVToRHSsuSMI0wFOcMbp8w4ntY5s7ToDJkqdnTnMb0WOB1sxfMHHlap8L4o/z1ynKNXhpFPQ8U+65zrZH0FNkQ5DevkHdl2wHZayGIRJRHGWjHH331Kgu5y1bHtZduYJDxQgk1OWWNB8IJpD6fUONVKOPbOX8n40ptDDKhDX9rWg6qREmdKlIZ5PeVIiZwsqUwMS2mrik7JNGhAUM+haY5Gq8XMYvBdnCckjO5+Nolxv3qGTQsCmHrPxwmcFuXdVZ4Pr2U54TkPvGh3kRUqRYjDY31wTsKPHjqcZ30kpLnnlEuYWGoJVyIVeENvjS1lx8MibA0gEcQrYzbEBAsCljLnlZpLqWVKrZkxu/Yc8wf3ft7vb+hjCxcE7nU2oZq06DItKEVVHL1pRrdTOiOlPwh2BqvNk4px0mAka3DkyN/I1LXmCZbnS/SJcC+Ovtw47yNOHznGjOx8xSrzdcoqBUkaCCkwrXDBEsZGvytBNrjqKN5YtQjegxbu86wJLoSwHl/EmZYJ59XzsTcmchgjZ6oUMe/LzHc2CtCa15Ma9uy1qLaWOOjZvlbIs31OWJ0bq4hYpbDawyBGV1ARnXJJ2oXnOZ9zJsx9I+0ngD6as6acsr7kWWWOWYHjIycYL5h0sfu9po9uYSBPGRJYGUJ7rkyKZ7w+w8Xjf3d9yXL7Puu1CkNFajfuTANngpJTmtomXSZtuTQNlEKEQnHOwjnFgsy4lA+E61NB1COqRUaQ3AjisnMeh0PE40xRn1OyYrlMO+Uj5zg/H0qFJTTkWi/5of3W5yPWmGOw1KLiImZJOTc1x8Tinj9LuUEgG6ZbG6zLlXVFXIJpDW++xcWZFs3rdhH2mm7upxQPUoqadLZaVCvhLYc4ZaxRYZVAJW+L9BUzqk7oMArxPuBTqJBhSEjlCxq0GS1vZCK0MGZEuaRwyYesFshtxqT3TKdKY62ScifZVTPxgiGELsvqOtpQqi1j0Cnr1Bce9Ekp5swbH3xGXRbWcjm+wRrymNWRsNoouhCaK3MOLiUlxt/5kE+ulQWufFOBG/mIPikVtU+PX0gG5MQS4p5R8krkPZHoZ3q1GKZKhpBZRhY6HMECM2ioUIuEmqNQBWtvfofacjTm4EonM1ZkKf3O6MYttJqMvOSYsYzxepXJKxPUVUnbnp9aNP8RK1stNigMBkUxyJTmuJhlTHYIDVHSmYwkr5McnyRdLmjLDci3el0IvGmF2BxxXqIcp3Rj9JFSjSJKuccczErMR5Hj4tL6c+nc12S1AaTp03Q5pSdYkg8yZV4I9h2BeXuoWcq0q1DLYHZ+BY1baa/cKiBL7w9k1ZXo1SY9qdErwYpDs8GTBUoSSCee2WaZudCAvF6MXRbtD66SVun3Of14+gNIQaPGSDQiNyUzRyZNWs7RshaplkmcJ8mbZGmFrDFNtu4PyQ8ewn/R1sunm1/aqW3HrZLGRLRdNQ7HpEQpNCILhcIKS4m8EWlwpbgIFROllItvLBSxN3oxywIoPCRY1OnTRN0xlaRJRZVqrHSp0ONDg7AdU0K/r6m+6IY2zDMvJRKX0aJCSpM0a/u8v9gkW7OCJJnic/XQ4qJnWqirEre0HcBXlom8EJdSyll4SZ7O4P4FGEol8LmQ2XJIXV6UJY2WMZvNM93ZpO4625l05K9DfFtex3XZAF2GtJk88BKdgahZRldo+bj24sqmRQo2UXyUt9mxLWXJCw/KMkJ+lyB1Xm+EWLF4PooIub7424fyyNDAwIPLJzk+NBiCRWtOy5RGYN2aMve/Z5i92Rh5cwAVuzZ58lX05BQa3vTAIDo7SyWr0lGBOMoo59ARMlegDFG7/14yh4baT9qdkdiH9B4AXNj4Qp4v1iWhahfS4B7F70aWC63cSMI/NUg4uqImbLZCVotohP58d4yfqOJXD+ALl75CwrmRWy09/3+RuEhFeIi0mAAAAABJRU5ErkJggg==';
option = {
  backgroundColor:'black',
    tooltip: {
        trigger: 'axis',
        confine: true,
        axisPointer: { 
          type: 'none'
        },
        textStyle: { 
          fontSize: 12, 
          fontWeight: 500 
        },
        formatter(params) {
            // 只展示柱子对应的内容，把顶部底部的 tooltip 过滤掉
            return params.reduce((pre, i) => {
                if (i.componentSubType === 'bar') {
                    i.marker = i.marker.replace(/\[object Object\]/, i.color.colorStops[1].color);
                    i.value = `<span style="flex: 1; text-align: right; margin-left: 16px;">${i.value}</span>`;
                    const current = `<div>${i.seriesName}</div>` + `<div style="display: flex; align-items: center; height: 26px;">${i.marker}${i.name} ${i.value}</div>`;
                    return `${pre}${current}`;
                }
                return pre;
            }, '');
        },
    },
    // legend: {
    //     right: 10,
    //     top: 12,
    //     type: 'scroll',
    //     icon: 'circle',
    //     itemWidth: 10,
    //     itemHeight: 10,
    //     itemGap: 16,
    //     selectedMode: false,
    // },
    grid: { 
      left: '3%', 
      right: '4%', 
      bottom: '5%', 
      containLabel: true 
    },
    xAxis: {
        type: 'category',
        show: true,
        data: ['处理厂1', '处理厂2', '处理厂3', '处理厂4', '处理厂5'],
        axisLine: { 
          show:false,
          lineStyle: { 
            color: '#F2F4F7',
          } 
        },
        axisTick: { 
          show: false 
        },
        axisLabel: { 
          margin: 30,
          color: 'rgb(55,177,255)'
        },
    },
    yAxis: {
        boundaryGap: [0, 0.01],
        axisLine: { 
          show:false,
          lineStyle: { 
            color: '#F2F4F7'
            }
          },
        axisTick: { 
          show: false
        },
        axisLabel: { 
          show: true, 
          fontWeight:700,
          color:'rgb(55,177,255)',
        },
        splitLine: { 
          show: false, 
          lineStyle: { 
            color: '#F2F4F7' 
          } 
        },
    },
    series: [
        {
            name: '餐厨处理厂分析',
            type: 'bar',
            barWidth: 36,
            barCategoryGap: 12,
            data: [11, 10, 9, 8, 7],
            itemStyle: {　　　　　　　　　 // 柱体渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(50, 161, 255, 0.7)',
                    },
                    {
                        offset: 1,
                        color: 'rgba(50, 161, 255, 0.15)',
                    },
                ])
            },
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [36, 18],
            // 这个属性很重要，直接决定了顶部跟柱子是否契合
            symbolOffset: [0, -8],
            itemStyle: { 
              color: 'rgb(50, 161, 255)',
              // color:'red',
            },
            symbolPosition: 'end',
            // 要给成武汉这两个柱子的值，这是圆柱顶部，值不给对高度会对不上
            data: [11, 10, 9, 8, 7],
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [70, 30],
            symbolOffset: [0, 20],
            symbol: rocket,
            symbolPosition: 'start',　
            data: [1, 1, 1, 1, 1],
        },
    ],
}