目前最新版本"@antv/g2": "5.0.16"仍然存在此问题，浏览器渲染图例时会卡死 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true #5309

/**

• A recreation of this demo: https://observablehq.com/@d3/variable-color-line
• / import { Chart } from '@antv/g2';

// 准备数据 const data = [ { date: '2023-06-18 00:00:00', condition: '未审核', sortTime: '2023-06-18 00:00:00.000', value: 3.91, }, { date: '2023-06-18 01:00:00', condition: '未审核', sortTime: '2023-06-18 01:00:00.000', value: 3.59, }, { date: '2023-06-18 02:00:00', condition: '未审核', sortTime: '2023-06-18 02:00:00.000', value: 3.57, }, { date: '2023-06-18 03:00:00', condition: '未审核', sortTime: '2023-06-18 03:00:00.000', value: 3.49, }, { date: '2023-06-18 04:00:00', condition: '未审核', sortTime: '2023-06-18 04:00:00.000', value: 3.94, }, { date: '2023-06-18 05:00:00', condition: '未审核', sortTime: '2023-06-18 05:00:00.000', value: 3.57, }, { date: '2023-06-18 06:00:00', condition: '未审核', sortTime: '2023-06-18 06:00:00.000', value: 3.54, }, { date: '2023-06-18 07:00:00', condition: '未审核', sortTime: '2023-06-18 07:00:00.000', value: 4.11, }, { date: '2023-06-18 08:00:00', condition: '未审核', sortTime: '2023-06-18 08:00:00.000', value: 4.38, }, { date: '2023-06-18 09:00:00', condition: '未审核', sortTime: '2023-06-18 09:00:00.000', value: 4.19, }, { date: '2023-06-18 10:00:00', condition: '未审核', sortTime: '2023-06-18 10:00:00.000', value: 4.02, }, { date: '2023-06-18 11:00:00', condition: '未审核', sortTime: '2023-06-18 11:00:00.000', value: 3.9, }, { date: '2023-06-18 12:00:00', condition: '未审核', sortTime: '2023-06-18 12:00:00.000', value: 4.44, }, { date: '2023-06-18 13:00:00', condition: '未审核', sortTime: '2023-06-18 13:00:00.000', value: 4.01, }, { date: '2023-06-18 14:00:00', condition: '未审核', sortTime: '2023-06-18 14:00:00.000', value: 4.09, }, { date: '2023-06-18 15:00:00', condition: '未审核', sortTime: '2023-06-18 15:00:00.000', value: 4.07, }, { date: '2023-06-18 16:00:00', condition: '未审核', sortTime: '2023-06-18 16:00:00.000', value: 4.37, }, { date: '2023-06-18 17:00:00', condition: '未审核', sortTime: '2023-06-18 17:00:00.000', value: 4.07, }, { date: '2023-06-18 18:00:00', condition: '未审核', sortTime: '2023-06-18 18:00:00.000', value: 4.15, }, { date: '2023-06-18 19:00:00', condition: '未审核', sortTime: '2023-06-18 19:00:00.000', value: 4.21, }, { date: '2023-06-18 20:00:00', condition: '未审核', sortTime: '2023-06-18 20:00:00.000', value: 4.38, }, { date: '2023-06-18 21:00:00', condition: '未审核', sortTime: '2023-06-18 21:00:00.000', value: 3.88, }, { date: '2023-06-18 22:00:00', condition: '未审核', sortTime: '2023-06-18 22:00:00.000', value: 4, }, { date: '2023-06-18 23:00:00', condition: '未审核', sortTime: '2023-06-18 23:00:00.000', value: 3.85, }, { date: '2023-06-19 00:00:00', condition: '未审核', sortTime: '2023-06-19 00:00:00.000', value: 4.15, }, { date: '2023-06-19 01:00:00', condition: '未审核', sortTime: '2023-06-19 01:00:00.000', value: 3.48, }, { date: '2023-06-19 02:00:00', condition: '已审核', sortTime: '2023-06-19 02:00:00.000', value: 3.32, }, { date: '2023-06-19 03:00:00', condition: '已审核', sortTime: '2023-06-19 03:00:00.000', value: 3.55, }, { date: '2023-06-19 04:00:00', condition: '已审核', sortTime: '2023-06-19 04:00:00.000', value: 4.08, }, { date: '2023-06-19 05:00:00', condition: '已审核', sortTime: '2023-06-19 05:00:00.000', value: 3.79, }, { date: '2023-06-19 06:00:00', condition: '已审核', sortTime: '2023-06-19 06:00:00.000', value: 3.87, }, { date: '2023-06-19 07:00:00', condition: '已审核', sortTime: '2023-06-19 07:00:00.000', value: 3.92, }, { date: '2023-06-19 08:00:00', condition: '已审核', sortTime: '2023-06-19 08:00:00.000', value: 4.52, }, { date: '2023-06-19 09:00:00', condition: '已审核', sortTime: '2023-06-19 09:00:00.000', value: 4.18, }, { date: '2023-06-19 10:00:00', condition: '已审核', sortTime: '2023-06-19 10:00:00.000', value: 4.27, }, { date: '2023-06-19 11:00:00', condition: '已审核', sortTime: '2023-06-19 11:00:00.000', value: 4.08, }, { date: '2023-06-19 12:00:00', condition: '未审核', sortTime: '2023-06-19 12:00:00.000', value: 4.55, }, { date: '2023-06-19 13:00:00', condition: '未审核', sortTime: '2023-06-19 13:00:00.000', value: 4.18, }, { date: '2023-06-19 14:00:00', condition: '未审核', sortTime: '2023-06-19 14:00:00.000', value: 4.49, }, ];

const chart = new Chart({ container: 'container', theme: 'classic', autoFit: true, });

chart .line() .data({ type: 'inline', value: data, }) .scale('y', { nice: true }) .scale('color', { domain: ['未审核', '已审核'], range: ['#858685', '#30cb13'], }) .encode('x', (d) => new Date(d.date)) .encode('y', 'value') .encode('shape', 'hvh') .encode('color', 'condition') .encode('series', () => 'a') .style('gradient', 'x') .style('lineWidth', 2) .axis('x', { title: '日期' });

chart.render();