调用的图片
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！
