用AI生成数据地图
提供各省市数据并让AI基于javascript echarts生成数据地图AI返回的文件保存为 index.html!DOCTYPE html html head meta charsetutf-8 title各省份数值分布/title script src./echarts.min.js/script script src./china.js/script style#container { width: 1000px; height: 700px; margin: 20px auto; }/style /head body div idcontainer/div script var chart echarts.init(document.getElementById(container)); // 你的原始数据可自行修改数值 var data [ {name: 北京, value: 96}, {name: 上海, value: 53}, {name: 浙江, value: 46}, {name: 江苏, value: 26}, {name: 四川, value: 22}, {name: 广东, value: 20}, {name: 广西, value: 16}, {name: 辽宁, value: 12}, {name: 安徽, value: 9}, {name: 重庆, value: 7}, {name: 湖南, value: 6}, {name: 湖北, value: 5}, {name: 山西, value: 5}, {name: 福建, value: 3}, {name: 山东, value: 3}, {name: 陕西, value: 3}, {name: 河南, value: 4}, {name: 河北, value: 4}, {name: 吉林, value: 4}, {name: 贵州, value: 2}, {name: 甘肃, value: 2}, {name: 天津, value: 1}, {name: 黑龙江, value: 1}, {name: 内蒙古, value: 1}, {name: 江西, value: 0}, {name: 云南, value: 0}, {name: 西藏, value: 0}, {name: 海南, value: 0}, {name: 青海, value: 0}, {name: 宁夏, value: 0}, {name: 新疆, value: 0}, {name: 台湾, value: 0}, {name: 香港, value: 0}, {name: 澳门, value: 0} ]; chart.setOption({ title: { text: 各省份数值分布, left: center, textStyle: {fontSize: 22, fontWeight: bold} }, tooltip: { formatter: {b}br/数值{c}, backgroundColor: rgba(255,255,255,0.95), borderColor: #ddd, textStyle: {color: #333} }, visualMap: { min: 0, max: 96, left: 10%, bottom: 5%, inRange: { color: [#f0f9ff, #3b82f6, #1e3a8a] }, textStyle: {color: #333} }, series: [{ name: 数值, type: map, map: china, roam: false, // 这里是修改的核心优化文字显示完全不被遮挡 label: { show: true, formatter: {b}\n{c}, fontSize: 11, fontWeight: bold, // 文字加粗 color: #000, // 文字颜色黑色 textBorderColor: #ffffff, // 加2px白色描边不管背景深浅都清晰 textBorderWidth: 2, z: 10 // 提升文字层级强制显示在色块最上层 }, // 小省份港澳/天津等的特殊适配避免文字挤在一起 emphasis: { label: { fontSize: 13, color: #fff, textBorderColor: #000, textBorderWidth: 2 } }, data: data }] }); // 自适应窗口大小 window.addEventListener(resize, () chart.resize()); /script /body /html下载 china.js 和 echarts.min.jshttps://download.csdn.net/download/weixin_38883338/92841757放到index.html同级目录并替换index.html中文件路径。双击打开 index.html效果如下很漂亮。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2571503.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!