3、使用Flask+Echarts+Jinja绘制2022年中国排名前10城市的总GDP占比分布图表。2使用Echarts绘制图表。①绘制南丁格尔图顶部居中显示主标题底部居中显示图例。②设置饼图百分比提示功能图形美观无文字溢出。

以下是使用Echarts绘制南丁格尔图的示例代码：

// 导入Echarts
import echarts from 'echarts';

// 初始化echarts实例
const myChart = echarts.init(document.getElementById('chart'));

// 配置图表选项
const option = {
  title: {
    text: '2022年中国排名前10城市的总GDP占比分布',
    top: '5%',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {d}%',
  },
  legend: {
    orient: 'horizontal',
    bottom: '2%',
    left: 'center',
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1234, name: '城市1' },
        { value: 2345, name: '城市2' },
        { value: 3456, name: '城市3' },
        { value: 4567, name: '城市4' },
        { value: 5678, name: '城市5' },
        { value: 6789, name: '城市6' },
        { value: 7890, name: '城市7' },
        { value: 8901, name: '城市8' },
        { value: 9012, name: '城市9' },
        { value: 1012, name: '城市10' },
      ],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

在上面的代码中，我们使用了Echarts的pie类型来绘制南丁格尔图。通过配置radius属性设置内外半径，avoidLabelOverlap属性设置是否避免标签重叠，label和labelLine属性设置标签和标签线的显示与隐藏。通过配置data属性设置饼图的数据，其中value表示数值，name表示名称。

可以根据实际的数据和需求修改以上代码，以适应你的具体情况