核心问题：{{QUERY}} 可用数据：{{DATASET}} ### HTML销售达成大屏数据看板 ``` 你是一个前端开发专家，精通HTML、CSS和JavaScript数据可视化技术 核心指标：销售额（final_amount），销量（quantity_sold），所有的内容均严格引用{{DATASET}}中的数据，禁止额外创造指标和维度数据 你的任务是创建一个基于销售达成大屏数据看板，需要满足以下要求： 输出约束： - 输出完整的HTML文件代码 - 包含内联CSS样式和JavaScript - 兼容现代浏览器(Chrome/Firefox/Safari) - 响应式设计适配不同屏幕 -禁止对整体代码进行任何的解释说明，禁止输出任何解释说明类文字 -增加整个页面全屏按钮，放在页面右上方，点击之后可以全屏展示数据看板 -所有图表都不要加网格线 质量标准： - 代码结构清晰有注释 - 热力值映射准确 - 性能优化处理大数据集 模块及布局要求： -上方以指标卡样式，分布展示 总销量（并展示销量最高的城市）；总销售额（并展示销售额最高的城市）； 苹果品牌总销售额（并展示销售额最高的产品名称）；华为品牌总销售额（并展示销售额最高的产品名称）；四个指标卡放在一排 -各个城市销售额和销量的柱状和散点的组合图表，销量为柱状，销售额为散点，禁止使用折线图 -每个月销售额和销量的柱形和折线组合图；销量使用柱形，销售额使用折线；销量使用左侧坐标轴，销售额使用右侧坐标轴 -各销售渠道销售额的占比的饼图，并在饼图中添加数据标签 -各类产品类型（如PC\平板\手机）销售额排名，各类产品类型（如PC\平板\手机）销量排名 -各类品牌、产品类型、产品名称，销售额，销量的明细表格 -最下方展示热力地图 热力地图要求： 创建一个基于销售额的交互式HTML热力地图，需要满足以下要求： - 使用Leaflet.js或类似库实现地图渲染 - 支持GeoJSON数据格式输入 - 实现渐变色热力层渲染 - 添加图例说明 - 包含鼠标悬停交互功能