```json
{
"summary

```json
{
"summary": "已扩展图表类型支持多种显示模式，包括横向/纵向/堆叠柱状图、带标记/面积填充的折线图、环形/嵌套饼图和可调气泡大小的散点图",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"bg-white rounded-xl shadow-md overflow-hidden\">\n <div class=\"p-6\">\n <div class=\"flex flex-col md:flex-row md:justify-between md:items-center mb-6 gap-4\">\n <h3 class=\"text-xl font-bold text-gray-800\">高级图表分析系统</h3>\n \n <div class=\"flex flex-wrap gap-2\">\n <div class=\"relative\">\n <select id=\"chartTypeSelect\" class=\"appearance-none bg-gray-50 border border-gray-300 text-gray-700 py-1 px-3 pr-8 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <option value=\"verticalBar\">纵向柱状图</option>\n <option value=\"horizontalBar\">横向柱状图</option>\n <option value=\"stackedBar\">堆叠柱状图</option>\n <option value=\"lineWithMarker\">带标记折线图</option>\n <option value=\"areaChart\">面积填充图</option>\n <option value=\"pieChart\">饼图</option>\n <option value=\"donutChart\">环形图</option>\n <option value=\"nestedDonut\">嵌套环形图</option>\n <option value=\"scatterPlot\">散点图</option>\n <option value=\"bubbleChart\">气泡图</option>\n </select>\n <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700\">\n <svg class=\"fill-current h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"/></svg>\n </div>\n </div>\n \n <button id=\"randomDataBtn\" class=\"px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm font-medium hover:bg-gray-200 transition-colors\">随机数据</button>\n </div>\n </div>\n \n <div class=\"relative h-96 bg-gray-50 rounded-lg border border-gray-200 overflow-hidden\">\n <!-- 纵向柱状图 -->\n <div id=\"verticalBarChart\" class=\"absolute inset-0 flex flex-col items-center justify-center p-4\">\n <div class=\"w-full h-4/5 flex items-end space-x-4 justify-center px-4\">\n <div class=\"flex flex-col items-center\">\n <div class=\"w-10 h-16 bg-blue-400 rounded-t-sm transition-all hover:opacity-80 hover:shadow-md\" style=\"height: 30%\" title=\"产品A: 30%\"></div>\n <span class=\"text-xs mt-1 text-gray-500\">1月</span>\n </div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-10 h-32 bg-green-400 rounded-t-sm transition-all hover:opacity-80 hover:shadow-md\" style=\"height: 60%\" title=\"产品B: 60%\"></div>\n <span class=\"text-xs mt-1 text-gray-500\">2月</span>\n </div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-10 h-48 bg-purple-400 rounded-t-sm transition-all hover:opacity-80 hover:shadow-md\" style=\"height: 90%\" title=\"产品C: 90%\"></div>\n <span class=\"text-xs mt-1 text-gray-500\">3月</span>\n </div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-10 h-24 bg-yellow-400 rounded-t-sm transition-all hover:opacity-80 hover:shadow-md\" style=\"height: 45%\" title=\"产品D: 45%\"></div>\n <span class=\"text-xs mt-1 text-gray-500\">4月</span>\n </div>\n </div>\n </div>\n \n <!-- 横向柱状图 -->\n <div id=\"horizontalBarChart\" class=\"absolute inset-0 hidden flex flex-col items-center justify-center p-4\">\n <div class=\"w-full h-4/5 flex flex-col space-y-4 justify-center px-4\">\n <div class=\"flex items-center\">\n <span class=\"text-xs text-gray-500 w-16\">产品A</span>\n <div class=\"flex-1 flex items-center\">\n <div class=\"h-6 bg-blue-400 rounded-r-sm transition-all hover:opacity-80 hover:shadow-md\" style=\"width: 30%\" title=\"30%\"></div>\n <span class=\"text-xs ml-2 text-gray-700\">30%</span>\n </div>\n </div>\n <div class=\"flex items-center\">\n <span class=\"text-xs text-gray-500 w-16\">产品B</span>\n <div class=\"flex-1 flex items-center\">\n <div class=\"h-6 bg-green-400 rounded-r-sm transition-all hover:opacity-80 hover:shadow-md\" style=\"width: 60%\" title=\"60%\"></div>\n <span class=\"text-xs ml-2 text-gray-700\">60%</span>\n </div>\n </div>\n <div class=\"flex items-center\">\n <span class=\"text-xs text-gray-500 w-16\">产品C</span>\n <div class=\"flex-1 flex items-center\">\n <div class=\"h-6 bg-purple-400 rounded-r-sm transition-all hover:opacity-80 hover:shadow-md\" style=\"width: 90%\" title=\"90%\"></div>\n <span class=\"text-xs ml-2 text-gray-700\">90%</span>\n </div>\n </div>\n </div>\n </div>\n \n <!-- 堆叠柱状图 -->\n <div id=\"stackedBarChart\" class=\"absolute inset-0 hidden flex flex-col items-center justify-center p-4\">\n <div class=\"w-full h-4/5 flex items-end space-x-4 justify-center px-4\">\n <div class=\"flex flex-col items-center w-12\">\n <div class=\"w-full h-8 bg-blue-400 rounded-t-sm hover:opacity-80 transition-all\" style=\"height: 20%\" title=\"品类1: 20%\"></div>\n <div class=\"w-full h-8 bg-green-400 hover:opacity-80 transition-all\" style=\"height: 30%\" title=\"品类2: 30%\"></div>\n <div class=\"w-full h-8 bg-purple-400 rounded-b-sm hover:opacity-80 transition-all\" style=\"height: 50%\" title=\"品类3: 50%\"></div>\n <span class=\"text-xs mt-1 text-gray-500\">1季度</span>\n </div>\n <div class=\"flex flex-col items-center w-12\">\n <div class=\"w-full h-8 bg-blue-400 rounded-t-sm hover:opacity-80 transition-all\" style=\"height: 30%\" title=\"品类1: 30%\"></div>\n <div class=\"w-full h-8 bg-green-400 hover:opacity-80 transition-all\" style=\"height: 50%\" title=\"品类2: 50%\"></div>\n <div class=\"w-full h-8 bg-purple-400 rounded-b-sm hover:opacity-80 transition-all\" style=\"height: 20%\" title=\"品类3: 20%\"></div>\n <span class=\"text-xs mt-1 text-gray-500\">2季度</span>\n </div>\n <div class=\"flex flex-col items-center w-12\">\n <div class=\"w-full h-8 bg-blue-400 rounded-t-sm hover:opacity-80 transition-all\" style=\"height: 50%\" title=\"品类1: 50%\"></div>\n <div class=\"w-full h-8 bg-green-400 hover:opacity-80 transition-all\" style=\"height: 20%\" title=\"品类2: 20%\"></div>\n <div class=\"w-full h-8 bg-purple-400 rounded-b-sm hover:opacity-80 transition-all\" style=\"height: 30%\" title=\"品类3: 30%\"></div>\n <span class=\"text-xs mt-1 text-gray-500\">3季度</span>\n </div>\n </div>\n </div>\n \n <!-- 带标记的折线图 -->\n <div id=\"lineWithMarkerChart\" class=\"absolute inset-0 hidden flex flex-col items-center justify-center p-4\">\n <div class=\"w-full h-4/5 relative flex items-center justify-center\">\n <svg viewBox=\"0 0 500 300\" class=\"w-full h-full\">\n <polyline \n points=\"50,270 150,210 250,90 350,150 450,30\" \n fill=\"none\" \n stroke=\"#3b82f6\" \n stroke-width=\"3\" \n stroke-linejoin=\"round\" \n stroke-linecap=\"round\"/>\n <circle cx=\"50\" cy=\"270\" r=\"5\" fill=\"white\" stroke=\"#3b82f6\" stroke-width=\"2\" class=\"cursor-pointer hover:r-6 transition-all\"/>\n <circle cx=\"150\" cy=\"210\" r=\"5\" fill=\"white\" stroke=\"#3b82f6\" stroke-width=\"2\" class=\"cursor-pointer hover:r-6 transition-all\"/>\n <circle cx=\"250\" cy=\"90\" r=\"5\" fill=\"white\" stroke=\"#3b82f6\" stroke-width=\"2\" class=\"cursor-pointer hover:r-6 transition-all\"/>\n <circle cx=\"350\" cy=\"150\" r=\"5\" fill=\"white\" stroke=\"#3b82f6\" stroke-width=\"2\" class=\"cursor-pointer hover:r-6 transition-all\"/>\n <circle cx=\"450\" cy=\"30\" r=\"5\" fill=\"white\" stroke=\"#3b82f6\" stroke-width=\"2\" class=\"cursor-pointer hover:r-6 transition-all\"/>\n <text x=\"50\" y=\"260\" text-anchor=\"middle\" class=\"text-xs\" fill=\"#3b82f6\">120</text>\n <text x=\"150\" y=\"200\" text-anchor=\"middle\" class=\"text-xs\" fill=\"#3b82f6\">240</text>\n <text x=\"250\" y=\"80\" text-anchor=\"middle\" class=\"text-xs\" fill=\"#3b82f6\">360</text>\n <text x=\"350\" y=\"140\" text-anchor=\"middle\" class=\"text-xs\" fill=\"#3b82f6\">280</text>\n <text x=\"450\" y=\"20\" text-anchor=\"middle\" class=\"text-xs\" fill=\"#3b82f6\">400</text>\n </svg>\n </div>\n <div class=\"flex justify-between w-full px-8 text-xs text-gray-500\">\n <span>Q1</span>\n <span>Q2</span>\n <span>Q3</span>\n <span>Q4</span>\n <span>年度</span>\n </div>\n </div>\n \n <!-- 面积填充图 -->\n <div id=\"areaChart\" class=\"absolute inset-0 hidden flex flex-col items-center justify-center p-4\">\n <div class=\"w-full h-4/5 relative flex items-center justify-center\">\n <svg viewBox=\"0 0 500 300\" class=\"w-full h-full\">\n <defs>\n <linearGradient id=\"areaGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#3b82f6\" stop-opacity=\"0.8\"/>\n <stop offset=\"100%\" stop-color=\"#3b82f6\" stop-opacity=\"0.1\"/>\n </linearGradient>\n </defs>\n <path \n d=\"M50,270 L150,210 L250,90 L350,150 L450,30 L450,300 L350,300 L250,300 L150,300 L50,300 Z\" \n fill=\"url(#areaGradient)\" \n stroke=\"#3b82f6\" \n stroke-width=\"2\" \n stroke-linejoin=\"round\"/>\n <polyline \n points=\"50,270 150,210 250,90 350,150 450,30\" \n fill=\"none\" \n stroke=\"#3b82f6\" \n stroke-width=\"2\" \n stroke-linejoin=\"round\" \n stroke-linecap=\"round\"/>\n </svg>\n </div>\n <div class=\"flex justify-between w-full px-8 text-xs text-gray-500\">\n <span>1月</span>\n <span>2月</span>\n <span>3月</span>\n <span>4月</span>\n <span>5月</span>\n </div>\n </div>\n \n <!-- 饼图 -->\n <div id=\"pieChart\" class=\"absolute inset-0 hidden flex items-center justify-center\">\n <div class=\"relative w-64 h-64\">\n <svg viewBox=\"0 0 100 100\" class=\"w-full h-full\">\n <path \n d=\"M 50 50 L 100 50 A 50 50 0 0 0 50 0 Z\" \n fill=\"#3b82f6\" \n class=\"cursor-pointer hover:opacity-80 transition-all\"\n title=\"品类A: 25%\"/>\n <path \n d=\"M 50 50 L 50 0 A 50 50 0 0 0 0 50 Z\" \n fill=\"#10b981\" \n class=\"cursor-pointer hover:opacity-80 transition-all\"\n title=\"品类B: 25%\"/>\n <path \n d=\"M 50 50 L 0 50 A 50 50 0 0 0 5 80 Z\" \n fill=\"#8b5cf6\" \n class=\"cursor-pointer hover:opacity-80 transition-all\"\n title=\"品类C: 15%\"/>\n <path \n d=\"M 50 50 L 5 80 A 50 50 0 0 0 50 100 Z\" \n fill=\"#f59e0b\" \n class=\"cursor-pointer hover:opacity-80 transition-all\"\n title=\"品类D: 20%\"/>\n <path \n d=\"M 50 50 L 50 100 A 50 50 0 0 0 100 50 Z\" \n fill=\"#ef4444\" \n class=\"cursor-pointer hover:opacity-80 transition-all\"\n title=\"品类E: 15%\"/>\n </svg>\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <span class=\"text-sm font-medium text-gray-600\">总销售额</span>\n </div>\n </div>\n </div>\n \n <!-- 环形图 -->\n <div id=\"donutChart\" class=\"absolute inset-0 hidden flex items-center justify-center\">\n <div class=\"relative w-64 h-64\">\n <svg viewBox=\"0 0 100 100\" class=\"w-full h-full\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#f3f4f6\" stroke=\"none\"/>\n <path \n d=\"M 50 10 A 40 40 0 0 1 90 50 L 50 50 Z\" \n fill=\"#3b82f6\" \n class=\"cursor-pointer hover:opacity-80 transition-all\"\n title=\"品类A: 30%\"/>\n <path \n d=\"M 90 50 A 40 40 0 0 1 50 90 L 50 50 Z\" \n fill=\"#10b981\" \n class=\"cursor-pointer hover