Echarts实战案例代码(24)：柱图数据顶部显示图片的解决方案

调用的图片

var weatherIcons = {
    'icon1': 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png',
    'icon2':'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png',
   'icon3':'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'
};

提示框组件tooltip设置

    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        },
        formatter: function (params) {
            return params[0].name + ': ' + params[0].value;
        }
    }

由于图片的展示，是在象形柱图上实现的，因此鼠标触发提示框时，只显示主要数据指标数据即可。

系列列表设置

  series: [{
        name: 'hill',
        type: 'bar',
        barWidth:'30%',
        barCategoryGap: '30%',
        data: [123, 60, 25],
        z: 10
    }, {
        name: 'glyph',
        type: 'pictorialBar',
        barGap: '-100%',
        symbolPosition: 'end',
        symbolSize: 50,
        symbolOffset: [0, '-120%'],
        data: [{
            value: 123,
            symbol: 'image://'+weatherIcons.icon1,
            symbolSize: [60, 60]
        }, {
            value: 60,
            symbol:  'image://'+weatherIcons.icon2,
              symbolSize: [60, 60]
        }, {
            value: 25,
            symbol:  'image://'+weatherIcons.icon3,
            symbolSize: [60, 60]
        }]
    }]

1. series[0]，设置展示的数据；
2. series[1]，设置对应的图片；

Done！