当前位置：首页 > article >正文

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

article 2024/11/7 5:42:46

在这里插入图片描述

<!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>