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

时间:2024-11-07 07:06:26
<!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>