```json
{
"summary

```json
{
"summary": "我将为您创建一个功能丰富的图表展示组件，包含多种图表类型和交互功能，采用响应式设计适配不同设备",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"bg-gray-50 rounded-xl shadow-md p-6\">\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4\">\n <h2 class=\"text-2xl font-bold text-gray-800\">数据统计图表</h2>\n <div class=\"flex flex-wrap gap-3 w-full md:w-auto\">\n <div class=\"relative\">\n <select class=\"bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-blue-500\">\n <option>柱状图</option>\n <option>折线图</option>\n <option>饼图/环形图</option>\n <option>散点图</option>\n </select>\n </div>\n <div class=\"relative\">\n <input type=\"date\" class=\"bg-white border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\">\n </div>\n <button class=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors\">\n 下载图表\n </button>\n </div>\n </div>\n \n <div class=\"bg-white rounded-lg border border-gray-200 p-4 h-96 w-full\">\n <div class=\"flex justify-center items-center h-full\">\n <div class=\"text-center\">\n <svg class=\"w-16 h-16 mx-auto text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"></path>\n </svg>\n <p class=\"mt-2 text-gray-500\">图表展示区域</p>\n <div class=\"mt-4 flex gap-2 justify-center\">\n <span class=\"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800\">柱状图</span>\n <span class=\"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800\">折线图</span>\n <span class=\"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800\">饼图</span>\n <span class=\"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800\">散点图</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"mt-6 flex flex-wrap gap-2\">\n <button class=\"px-3 py-1 text-sm rounded-md bg-gray-200 hover:bg-gray-300 text-gray-700\">横向柱状图</button>\n <button class=\"px-3 py-1 text-sm rounded-md bg-gray-200 hover:bg-gray-300 text-gray-700\">纵向柱状图</button>\n <button class=\"px-3 py-1 text-sm rounded-md bg-gray-200 hover:bg-gray-300 text-gray-700\">堆叠柱状图</button>\n <button class=\"px-3 py-1 text-sm rounded-md bg-gray-200 hover:bg-gray-300 text-gray-700\">带标记折线图</button>\n <button class=\"px-3 py-1 text-sm rounded-md bg-gray-200 hover:bg-gray-300 text-gray-700\">面积填充图</button>\n <button class=\"px-3 py-1 text-sm rounded-md bg-gray-200 hover:bg-gray-300 text-gray-700\">多层环形图</button>\n <button class=\"px-3 py-1 text-sm rounded-md bg-gray-200 hover:bg-gray-300 text-gray-700\">气泡大小调整</button>\n </div>\n</div>"
},
"next": [
"添加图表动画",
"实现数据加载",
"添加图例说明",
"增加导出选项",
"优化移动端"
]
}
```