```json
{
"summary

```json
{
"summary": "我将为图表展示组件填充示例数据，使用SVG绘制简单的柱状图和折线图混合图表来展示样式效果。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"bg-white rounded-xl shadow-md border border-solid border-gray-200 p-6\">\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4\">\n <div>\n <h2 class=\"text-2xl font-bold text-gray-800\">2023年销售数据</h2>\n <p class=\"text-gray-500\">单位：万元</p>\n </div>\n \n <div class=\"flex flex-wrap gap-2\">\n <select class=\"px-3 py-2 border border-solid border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\">\n <option>柱状图</option>\n <option>折线图</option>\n <option selected>混合图表</option>\n <option>饼图</option>\n </select>\n </div>\n </div>\n \n <div class=\"relative h-96 bg-gray-50 rounded-lg border border-solid border-gray-200 overflow-hidden\">\n <svg class=\"w-full h-full\" viewBox=\"0 0 800 400\" preserveAspectRatio=\"xMidYMid meet\">\n <!-- X轴 -->\n <line x1=\"50\" y1=\"350\" x2=\"750\" y2=\"350\" stroke=\"#6b7280\" stroke-width=\"1\" />\n \n <!-- Y轴 -->\n <line x1=\"50\" y1=\"350\" x2=\"50\" y2=\"50\" stroke=\"#6b7280\" stroke-width=\"1\" />\n \n <!-- Y轴刻度 -->\n <text x=\"30\" y=\"60\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"end\">120</text>\n <text x=\"30\" y=\"110\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"end\">90</text>\n <text x=\"30\" y=\"160\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"end\">60</text>\n <text x=\"30\" y=\"210\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"end\">30</text>\n <text x=\"30\" y=\"260\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"end\">0</text>\n \n <!-- 月份标签 -->\n <text x=\"100\" y=\"370\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"middle\">1月</text>\n <text x=\"200\" y=\"370\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"middle\">2月</text>\n <text x=\"300\" y=\"370\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"middle\">3月</text>\n <text x=\"400\" y=\"370\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"middle\">4月</text>\n <text x=\"500\" y=\"370\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"middle\">5月</text>\n <text x=\"600\" y=\"370\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"middle\">6月</text>\n <text x=\"700\" y=\"370\" font-size=\"12\" fill=\"#6b7280\" text-anchor=\"middle\">7月</text>\n \n <!-- 柱状图数据 -->\n <rect x=\"80\" y=\"230\" width=\"40\" height=\"120\" fill=\"#4f46e5\" rx=\"2\" />\n <rect x=\"180\" y=\"270\" width=\"40\" height=\"80\" fill=\"#4f46e5\" rx=\"2\" />\n <rect x=\"280\" y=\"190\" width=\"40\" height=\"160\" fill=\"#4f46e5\" rx=\"2\" />\n <rect x=\"380\" y=\"150\" width=\"40\" height=\"200\" fill=\"#4f46e5\" rx=\"2\" />\n <rect x=\"480\" y=\"110\" width=\"40\" height=\"240\" fill=\"#4f46e5\" rx=\"2\" />\n <rect x=\"580\" y=\"170\" width=\"40\" height=\"180\" fill=\"#4f46e5\" rx=\"2\" />\n <rect x=\"680\" y=\"210\" width=\"40\" height=\"140\" fill=\"#4f46e5\" rx=\"2\" />\n \n <!-- 折线图数据 -->\n <polyline points=\"100,130 200,150 300,90 400,70 500,50 600,90 700,110\" \n fill=\"none\" stroke=\"#10b981\" stroke-width=\"3\" stroke-linejoin=\"round\" />\n \n <!-- 折线图数据点 -->\n <circle cx=\"100\" cy=\"130\" r=\"4\" fill=\"#10b981\" stroke=\"white\" stroke-width=\"2\" />\n <circle cx=\"200\" cy=\"150\" r=\"4\" fill=\"#10b981\" stroke=\"white\" stroke-width=\"2\" />\n <circle cx=\"300\" cy=\"90\" r=\"4\" fill=\"#10b981\" stroke=\"white\" stroke-width=\"2\" />\n <circle cx=\"400\" cy=\"70\" r=\"4\" fill=\"#10b981\" stroke=\"white\" stroke-width=\"2\" />\n <circle cx=\"500\" cy=\"50\" r=\"4\" fill=\"#10b981\" stroke=\"white\" stroke-width=\"2\" />\n <circle cx=\"600\" cy=\"90\" r=\"4\" fill=\"#10b981\" stroke=\"white\" stroke-width=\"2\" />\n <circle cx=\"700\" cy=\"110\" r=\"4\" fill=\"#10b981\" stroke=\"white\" stroke-width=\"2\" />\n \n <!-- 图例 -->\n <rect x=\"650\" y=\"30\" width=\"12\" height=\"12\" fill=\"#4f46e5\" rx=\"2\" />\n <text x=\"670\" y=\"40\" font-size=\"12\" fill=\"#374151\">销售额</text>\n \n <circle cx=\"650\" y=\"60\" r=\"6\" fill=\"#10b981\" stroke=\"white\" stroke-width=\"2\" />\n <text x=\"670\" y=\"60\" font-size=\"12\" fill=\"#374151\">增长率</text>\n </svg>\n </div>\n \n <div class=\"mt-4 flex flex-wrap justify-between items-center\">\n <div class=\"flex space-x-2\">\n <span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800\">\n 数据点: 14\n </span>\n <span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800\">\n 更新于: 2023-07-31\n </span>\n </div>\n \n <div class=\"flex items-center space-x-4 mt-2 sm:mt-0\">\n <div class=\"flex items-center\">\n <span class=\"text-sm text-gray-500 mr-2\">时间范围:</span>\n <div class=\"relative\">\n <select class=\"appearance-none bg-white border border-solid border-gray-300 rounded-md pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\">\n <option selected>2023上半年</option>\n <option>2022全年</option>\n <option>近三年</option>\n </select>\n </div>\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加动画效果",
"实现数据切换",
"添加详细标签",
"添加导出按钮",
"优化响应式"
]
}
```