Echats柱状图的横坐标用图片显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片作为横坐标示例 - ECharts</title>
<!-- 引入 ECharts -->
<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>