We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中国地图</title> <!-- 引入 Vue 3 的 CDN --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"></script> <!-- 引入 ECharts 的 CDN --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> <!-- 引入中国地图数据 --> <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> </head> <body> <div id="app"> <div ref="chart" style="width: 100%; height: 600px;"></div> </div> <script> const app = Vue.createApp({ mounted() { const myChart = echarts.init(this.$refs.chart); myChart.setOption({ title: { text: '中国地图', left: 'center', textStyle: { color: '#000', fontSize: 16, }, }, tooltip: { trigger: 'item', formatter: '{b}', }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {}, }, }, visualMap: { min: 0, max: 1000, left: 'left', top: 'bottom', text: ['高', '低'], calculable: true, inRange: { color: ['#f0f0f0', '#e0e0e0', '#c0c0c0', '#a0a0a0', '#808080', '#606060', '#404040'], }, }, series: [ { name: '中国地图', type: 'map', mapType: 'china', roam: false, label: { show: true, }, emphasis: { label: { show: true, }, }, data: [ { name: '北京', value: Math.round(Math.random() * 1000) }, { name: '天津', value: Math.round(Math.random() * 1000) }, { name: '上海', value: Math.round(Math.random() * 1000) }, { name: '重庆', value: Math.round(Math.random() * 1000) }, { name: '河北', value: Math.round(Math.random() * 1000) }, { name: '山西', value: Math.round(Math.random() * 1000) }, { name: '辽宁', value: Math.round(Math.random() * 1000) }, { name: '吉林', value: Math.round(Math.random() * 1000) }, { name: '黑龙江', value: Math.round(Math.random() * 1000) }, { name: '江苏', value: Math.round(Math.random() * 1000) }, { name: '浙江', value: Math.round(Math.random() * 1000) }, { name: '安徽', value: Math.round(Math.random() * 1000) }, { name: '福建', value: Math.round(Math.random() * 1000) }, { name: '江西', value: Math.round(Math.random() * 1000) }, { name: '山东', value: Math.round(Math.random() * 1000) }, { name: '河南', value: Math.round(Math.random() * 1000) }, { name: '湖北', value: Math.round(Math.random() * 1000) }, { name: '湖南', value: Math.round(Math.random() * 1000) }, { name: '广东', value: Math.round(Math.random() * 1000) }, { name: '海南', value: Math.round(Math.random() * 1000) }, { name: '四川', value: Math.round(Math.random() * 1000) }, { name: '贵州', value: Math.round(Math.random() * 1000) }, { name: '云南', value: Math.round(Math.random() * 1000) }, { name: '西藏', value: Math.round(Math.random() * 1000) }, { name: '陕西', value: Math.round(Math.random() * 1000) }, { name: '甘肃', value: Math.round(Math.random() * 1000) }, { name: '青海', value: Math.round(Math.random() * 1000) }, { name: '宁夏', value: Math.round(Math.random() * 1000) }, { name: '新疆', value: Math.round(Math.random() * 1000) }, { name: '台湾', value: Math.round(Math.random() * 1000) }, { name: '香港', value: Math.round(Math.random() * 1000) }, { name: '澳门', value: Math.round(Math.random() * 1000) }, ], }, { name: '到过的次数', type: 'scatter', coordinateSystem: 'geo', data: [ { name: '北京', value: [116.407, 39.904, Math.round(Math.random() * 100)] }, // 北京的经纬度及到过的次数 { name: '天津', value: [117.200983, 39.084158, Math.round(Math.random() * 100)] }, // 天津的经纬度及到过的次数 { name: '上海', value: [121.473701, 31.230416, Math.round(Math.random() * 100)] }, // 上海的经纬度及到过的次数 { name: '重庆', value: [106.551643, 29.562849, Math.round(Math.random() * 100)] }, // 重庆的经纬度及到过的次数 { name: '河北', value: [114.530235, 38.037433, Math.round(Math.random() * 100)] }, // 河北的经纬度及到过的次数 { name: '山西', value: [112.562678, 37.873499, Math.round(Math.random() * 100)] }, // 山西的经纬度及到过的次数 { name: '辽宁', value: [123.431474, 41.836175, Math.round(Math.random() * 100)] }, // 辽宁的经纬度及到过的次数 { name: '吉林', value: [125.32568, 43.897016, Math.round(Math.random() * 100)] }, // 吉林的经纬度及到过的次数 { name: '黑龙江', value: [126.661669, 45.742347, Math.round(Math.random() * 100)] }, // 黑龙江的经纬度及到过的次数 { name: '江苏', value: [118.767413, 32.041544, Math.round(Math.random() * 100)] }, // 江苏的经纬度及到过的次数 { name: '浙江', value: [120.153576, 30.287459, Math.round(Math.random() * 100)] }, // 浙江的经纬度及到过的次数 { name: '安徽', value: [117.283042, 31.86119, Math.round(Math.random() * 100)] }, // 安徽的经纬度及到过的次数 { name: '福建', value: [119.306239, 26.075302, Math.round(Math.random() * 100)] }, // 福建的经纬度及到过的次数 { name: '江西', value: [115.892151, 28.676493, Math.round(Math.random() * 100)] }, // 江西的经纬度及到过的次数 { name: '山东', value: [117.019915, 36.671156, Math.round(Math.random() * 100)] }, // 山东的经纬度及到过的次数 { name: '河南', value: [113.665412, 34.757975, Math.round(Math.random() * 100)] }, // 河南的经纬度及到过的次数 { name: '湖北', value: [114.298572, 30.584355, Math.round(Math.random() * 100)] }, // 湖北的经纬度及到过的次数 { name: '湖南', value: [112.982279, 28.19409, Math.round(Math.random() * 100)] }, // 湖南的经纬度及到过的次数 { name: '广东', value: [113.280637, 23.125178, Math.round(Math.random() * 100)] }, // 广东的经纬度及到过的次数 { name: '海南', value: [110.33119, 20.031971, Math.round(Math.random() * 100)] }, // 海南的经纬度及到过的次数 { name: '四川', value: [104.075809, 30.651239, Math.round(Math.random() * 100)] }, // 四川的经纬度及到过的次数 { name: '贵州', value: [106.70546, 26.600055, Math.round(Math.random() * 100)] }, // 贵州的经纬度及到过的次数 { name: '云南', value: [102.710002, 25.045806, Math.round(Math.random() * 100)] }, // 云南的经纬度及到过的次数 { name: '西藏', value: [91.132212, 29.660361, Math.round(Math.random() * 100)] }, // 西藏的经纬度及到过的次数 { name: '陕西', value: [108.948024, 34.263161, Math.round(Math.random() * 100)] }, // 陕西的经纬度及到过的次数 { name: '甘肃', value: [103.823557, 36.058039, Math.round(Math.random() * 100)] }, // 甘肃的经纬度及到过的次数 { name: '青海', value: [101.778916, 36.623178, Math.round(Math.random() * 100)] }, // 青海的经纬度及到过的次数 { name: '宁夏', value: [106.278179, 38.46637, Math.round(Math.random() * 100)] }, // 宁夏的经纬度及到过的次数 { name: '新疆', value: [87.617733, 43.792818, Math.round(Math.random() * 100)] }, // 新疆的经纬度及到过的次数 { name: '台湾', value: [120.960515, 23.69781, Math.round(Math.random() * 100)] }, // 台湾的经纬度及到过的次数 { name: '香港', value: [114.109497, 22.396428, Math.round(Math.random() * 100)] }, // 香港的经纬度及到过的次数 { name: '澳门', value: [113.543028, 22.186835, Math.round(Math.random() * 100)] }, // 澳门的经纬度及到过的次数 ], symbolSize: function (val) { return val[2] / 10; // 圆点大小与到过的次数相关 }, label: { formatter: '{b}', position: 'right', show: true, }, itemStyle: { color: '#ff0000', // 圆点颜色 }, }, ], }); } }).mount('#app'); </script> </body> </html>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
The text was updated successfully, but these errors were encountered: