<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片作为横坐标示例 - ECharts</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body><div id="chart" style="width: 600px; height: 400px;"></div><script>var myChart = echarts.init(document.getElementById('chart'));const data = [{ value: 'A', label: { image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' } },{ value: 'B', label: { image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' } },{ value: 'C', label: { image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' } },{ value: 'D', label: { image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' } }]const rich = {}data.forEach(item=>{rich[item.value] ={height: 50,width: 50,backgroundColor:{ image: item.label.image }}})var option = {xAxis: {type: 'category',data:data,axisLabel: {formatter: function (value) {return `{${value}| }`; },rich:rich}},yAxis: {type: 'value'},series: [{type: 'bar',data: [120, 200, 150, 80]}]};myChart.setOption(option);</script>
</body>
</html>