ECharts地图柱状图：自定义Tooltip及最大高度设置咨询

Hey there! Let's break down your two ECharts needs step by step—these are super common tweaks for map-bar combinations, so you're already on solid ground.

ECharts tooltips are fully customizable via the formatter function, which lets you pull in any data you've attached to your series items. Here's how to make it work:

Step 1: Bind Your Custom Text to Your Data #

First, tie each text_toltip[i] entry to the corresponding bar in your series. Update your data array to include the custom text as a property on each item:

// Assume your original data looks like this
const rawMapData = [
  { name: 'Beijing', value: 120 },
  { name: 'Shanghai', value: 90 },
  // ... more regions
];

// Merge with your text_toltip array
const formattedData = rawMapData.map((item, index) => ({
  ...item,
  customTooltipText: text_toltip[index] // Attach your custom text here
}));

Step 2: Configure the Tooltip Formatter #

Set up the tooltip to display coordinates, your original value, and the custom text. The params object passed to the formatter gives you access to all the data and coordinate info:

tooltip: {
  trigger: 'item',
  formatter: (params) => {
    // Get coordinate info (adjust based on your map type: geo or map series)
    const coords = params.data.coord || params.coord;
    const coordText = `Coordinates: ${coords[0].toFixed(2)}, ${coords[1].toFixed(2)}`;
    
    // Build the tooltip content
    return `
      <div style="padding: 8px;">
        <p><strong>${params.name}</strong></p>
        <p>${coordText}</p>
        <p>Value: ${params.value}</p>
        <p>Custom Note: ${params.data.customTooltipText}</p>
      </div>
    `;
  }
}

ECharts doesn't have a built-in maxHeight property for map bars, but you can easily calculate a scaling ratio to lock the tallest bar to your desired height, then scale all other bars proportionally. You can also use this ratio to adjust colors dynamically.

Step 1: Calculate Scaling Ratio #

First, find the maximum value in your dataset, then define your desired max bar height (in pixels). Use these to compute a scaling factor:

const maxValue = Math.max(...rawMapData.map(item => item.value));
const desiredMaxBarHeight = 75; // Adjust this to your preferred max height
const scaleRatio = desiredMaxBarHeight / maxValue;

Step 2: Scale Your Data & Add Color Logic #

Update your formatted data to include scaled values (for bar height) and keep the original value for display. Then use the original value's ratio to set dynamic colors:

const scaledData = rawMapData.map((item, index) => ({
  ...item,
  customTooltipText: text_toltip[index],
  scaledValue: item.value * scaleRatio, // Scaled height for the bar
  originalValue: item.value // Keep original for tooltip/color
}));

// Add this to your ECharts option's series
series: [
  {
    type: 'bar',
    coordinateSystem: 'geo', // Make sure this matches your map setup
    data: scaledData.map(item => ({
      name: item.name,
      value: item.scaledValue, // Use scaled value for bar height
      originalValue: item.originalValue,
      customTooltipText: item.customTooltipText
    })),
    barWidth: 12, // Adjust bar width as needed
    itemStyle: {
      // Dynamic color based on original value's ratio to max
      color: (params) => {
        const valueRatio = params.data.originalValue / maxValue;
        // Example: Gradient from green (low) to red (high)
        const red = Math.floor(255 * valueRatio);
        const green = Math.floor(255 * (1 - valueRatio));
        return `rgb(${red}, ${green}, 0)`;
      }
    }
  }
]

Step 3: Update Tooltip to Show Original Value #

Tweak the tooltip formatter to show the original value instead of the scaled one:

// Inside the tooltip formatter
<p>Value: ${params.data.originalValue}</p>

内容的提问来源于stack exchange，提问作者yavg