Echats柱状图的横坐标用图片显示

2025/4/4 6:17:29 来源：https://blog.csdn.net/weixin_55896343/article/details/143573521 浏览: 次关键词：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>

Echats柱状图的横坐标用图片显示

相关资讯

热文排行

最新新闻

推荐新闻

热搜词