Echarts实战案例代码(24)：柱图数据顶部显示图片的解决方案-阿里云开发者社区

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

2023-07-19 279

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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]
        }]
    }]