标签:添加 pes dem 阿根廷 德国 tom 个人 charts 最大
首先先附上官网 http://echarts.baidu.com/option.html#series-line.label 以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo
以下仅是个人在开发中逐步摸索出来的。demo目前没出问题。如果有错误地方请留言指出 (若转载请标注出处)
直接上效果图,对应代码在效果图下面
安装:
1. npm install echarts --save
import * as echarts from ‘echarts‘(
2. npm install --save @types/echarts
3.在所需要用到的组件中TS引入,也可以在main.ts里面引入
)
1. 因为typescript的限制原因,在引入的时候校对以上步骤。然后在需要用到的组件中ts文件引入对应的地图js
例如:
<div class="table-line"> <div class="table-title">全球地域分布数据折线表</div> <div id="allChart" class="charts"></div> </div> <div class="table-line"> <div class="table-title">国内地域分布数据折线表</div> <div id="provinceChart" class="charts"></div> </div>
3. 接下来通过function将数据转入(这里只举例世界地图的相关数据配置) P.S 在这里面放入data数据记得格式跟ECharts相符,即对应的省份名称例如广东,上海,北京。黑龙江等。后面跟着对应的value值(number格式)
chinaConfigure() { let myChart = echarts.init(document.getElementById(‘provinceChart‘)) //这里是为了获得容器所在位置 myChart.setOption({ // 进行相关配置 tooltip: {}, // 鼠标移到图里面的浮动提示框 visualMap: { //左侧小柱子的配置 min: 0, // 最小值 max:15000, //最大值 left: ‘left‘, // 定位左边 top: ‘bottom‘, // 定位底部 text: [‘高‘, ‘低‘], // 上下两个文字 seriesIndex: [1], inRange: { color: [‘#e0ffff‘, ‘#006edd‘] // 深浅颜色 }, calculable: true // 显示与否 }, geo: { // 这个是重点配置区 map: ‘china‘, // 表示中国地图 roam: true, label: { normal: { show: true, // 是否显示对应地名 textStyle: { color: ‘rgba(0,0,0,0.4)‘ } } }, itemStyle: { normal: { borderColor: ‘rgba(0, 0, 0, 0.2)‘ }, emphasis: { areaColor: null, shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: ‘rgba(0, 0, 0, 0.5)‘ } } }, series: [ { type: ‘scatter‘, coordinateSystem: ‘geo‘ // 对应上方配置 }, { name: ‘启动次数‘, // 浮动框的标题 type: ‘map‘, geoIndex: 0, data: [ {name:‘广东‘, value: 1324} ]// 这里就是数据,即数组可以单独放在外面也可以直接写 } ] }) }
以上数据data填写完后即可看到对应的效果了。如果是后端数据返回的时候省份没有对应的格式,则需要自己遍历然后slice截取前两个字。但黑龙江和内蒙古要额外处理。
说完中国地图相信世界地图也不是难事。但要注意的是。ECharts里面提供的世界地图js是英文版的国家名称。在开发中难免会遇到数据返回的事中文国家名。所以这时候要在配置世界地图的时候加入nameMap更改对应的字段。
如下:
worldConfigure() { let myChart = echarts.init(document.getElementById(‘allChart‘)) myChart.setOption({ tooltip: {}, visualMap: { min: 0, max: this.maxValue, left: ‘left‘, top: ‘bottom‘, text: [‘高‘, ‘低‘], seriesIndex: [1], inRange: { color: [‘#e0ffff‘, ‘#006edd‘] }, calculable: true }, geo: { map: ‘world‘, roam: true, label: { normal: { // show: true, textStyle: { color: ‘rgba(0,0,0,0.4)‘ } } }, itemStyle: { normal: { borderColor: ‘rgba(0, 0, 0, 0.2)‘ }, emphasis: { areaColor: null, shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: ‘rgba(0, 0, 0, 0.5)‘ } }, nameMap: { Afghanistan: ‘阿富汗‘, Singapore: ‘新加坡‘, Angola: ‘安哥拉‘, Albania: ‘阿尔巴尼亚‘, ‘United Arab Emirates‘: ‘阿联酋‘, Argentina: ‘阿根廷‘, Armenia: ‘亚美尼亚‘, ‘French Southern and Antarctic Lands‘: ‘法属南半球和南极领地‘, Australia: ‘澳大利亚‘, Austria: ‘奥地利‘, Azerbaijan: ‘阿塞拜疆‘, Burundi: ‘布隆迪‘, Belgium: ‘比利时‘, Benin: ‘贝宁‘, ‘Burkina Faso‘: ‘布基纳法索‘, Bangladesh: ‘孟加拉国‘, Bulgaria: ‘保加利亚‘, ‘The Bahamas‘: ‘巴哈马‘, ‘Bosnia and Herzegovina‘: ‘波斯尼亚和黑塞哥维那‘, Belarus: ‘白俄罗斯‘, Belize: ‘伯利兹‘, Bermuda: ‘百慕大‘, Bolivia: ‘玻利维亚‘, Brazil: ‘巴西‘, Brunei: ‘文莱‘, Bhutan: ‘不丹‘, Botswana: ‘博茨瓦纳‘, ‘Central African Republic‘: ‘中非共和国‘, Canada: ‘加拿大‘, Switzerland: ‘瑞士‘, Chile: ‘智利‘, China: ‘中国‘, ‘Ivory Coast‘: ‘象牙海岸‘, Cameroon: ‘喀麦隆‘, ‘Democratic Republic of the Congo‘: ‘刚果民主共和国‘, ‘Republic of the Congo‘: ‘刚果共和国‘, Colombia: ‘哥伦比亚‘, ‘Costa Rica‘: ‘哥斯达黎加‘, Cuba: ‘古巴‘, ‘Northern Cyprus‘: ‘北塞浦路斯‘, Cyprus: ‘塞浦路斯‘, ‘Czech Republic‘: ‘捷克共和国‘, Germany: ‘德国‘, Djibouti: ‘吉布提‘, Denmark: ‘丹麦‘, ‘Dominican Republic‘: ‘多明尼加共和国‘, Algeria: ‘阿尔及利亚‘, Ecuador: ‘厄瓜多尔‘, Egypt: ‘埃及‘, Eritrea: ‘厄立特里亚‘, Spain: ‘西班牙‘, Estonia: ‘爱沙尼亚‘, Ethiopia: ‘埃塞俄比亚‘, Finland: ‘芬兰‘, Fiji: ‘斐‘, ‘Falkland Islands‘: ‘福克兰群岛‘, France: ‘法国‘, Gabon: ‘加蓬‘, ‘United Kingdom‘: ‘英国‘, Georgia: ‘格鲁吉亚‘, Ghana: ‘加纳‘, Guinea: ‘几内亚‘, Gambia: ‘冈比亚‘, ‘Guinea Bissau‘: ‘几内亚比绍‘, ‘Equatorial Guinea‘: ‘赤道几内亚‘, Greece: ‘希腊‘, Greenland: ‘格陵兰‘, Guatemala: ‘危地马拉‘, ‘French Guiana‘: ‘法属圭亚那‘, Guyana: ‘圭亚那‘, Honduras: ‘洪都拉斯‘, Croatia: ‘克罗地亚‘, Haiti: ‘海地‘, Hungary: ‘匈牙利‘, Indonesia: ‘印尼‘, India: ‘印度‘, Ireland: ‘爱尔兰‘, Iran: ‘伊朗‘, Iraq: ‘伊拉克‘, Iceland: ‘冰岛‘, Israel: ‘以色列‘, Italy: ‘意大利‘, Jamaica: ‘牙买加‘, Jordan: ‘约旦‘, Japan: ‘日本‘, Kazakhstan: ‘哈萨克斯坦‘, Kenya: ‘肯尼亚‘, Kyrgyzstan: ‘吉尔吉斯斯坦‘, Cambodia: ‘柬埔寨‘, ‘South Korea‘: ‘韩国‘, Kosovo: ‘科索沃‘, Kuwait: ‘科威特‘, Laos: ‘老挝‘, Lebanon: ‘黎巴嫩‘, Liberia: ‘利比里亚‘, Libya: ‘利比亚‘, ‘Sri Lanka‘: ‘斯里兰卡‘, Lesotho: ‘莱索托‘, Lithuania: ‘立陶宛‘, Luxembourg: ‘卢森堡‘, Latvia: ‘拉脱维亚‘, Morocco: ‘摩洛哥‘, Moldova: ‘摩尔多瓦‘, Madagascar: ‘马达加斯加‘, Mexico: ‘墨西哥‘, Macedonia: ‘马其顿‘, Mali: ‘马里‘, Myanmar: ‘缅甸‘, Montenegro: ‘黑山‘, Mongolia: ‘蒙古‘, Mozambique: ‘莫桑比克‘, Mauritania: ‘毛里塔尼亚‘, Malawi: ‘马拉维‘, Malaysia: ‘马来西亚‘, Namibia: ‘纳米比亚‘, ‘New Caledonia‘: ‘新喀里多尼亚‘, Niger: ‘尼日尔‘, Nigeria: ‘尼日利亚‘, Nicaragua: ‘尼加拉瓜‘, Netherlands: ‘荷兰‘, Norway: ‘挪威‘, Nepal: ‘尼泊尔‘, ‘New Zealand‘: ‘新西兰‘, Oman: ‘阿曼‘, Pakistan: ‘巴基斯坦‘, Panama: ‘巴拿马‘, Peru: ‘秘鲁‘, Philippines: ‘菲律宾‘, ‘Papua New Guinea‘: ‘巴布亚新几内亚‘, Poland: ‘波兰‘, ‘Puerto Rico‘: ‘波多黎各‘, ‘North Korea‘: ‘北朝鲜‘, Portugal: ‘葡萄牙‘, Paraguay: ‘巴拉圭‘, Qatar: ‘卡塔尔‘, Romania: ‘罗马尼亚‘, Russia: ‘俄罗斯‘, Rwanda: ‘卢旺达‘, ‘Western Sahara‘: ‘西撒哈拉‘, ‘Saudi Arabia‘: ‘沙特阿拉伯‘, Sudan: ‘苏丹‘, ‘South Sudan‘: ‘南苏丹‘, Senegal: ‘塞内加尔‘, ‘Solomon Islands‘: ‘所罗门群岛‘, ‘Sierra Leone‘: ‘塞拉利昂‘, ‘El Salvador‘: ‘萨尔瓦多‘, Somaliland: ‘索马里兰‘, Somalia: ‘索马里‘, ‘Republic of Serbia‘: ‘塞尔维亚‘, Suriname: ‘苏里南‘, Slovakia: ‘斯洛伐克‘, Slovenia: ‘斯洛文尼亚‘, Sweden: ‘瑞典‘, Swaziland: ‘斯威士兰‘, Syria: ‘叙利亚‘, Chad: ‘乍得‘, Togo: ‘多哥‘, Thailand: ‘泰国‘, Tajikistan: ‘塔吉克斯坦‘, Turkmenistan: ‘土库曼斯坦‘, ‘East Timor‘: ‘东帝汶‘, ‘Trinidad and Tobago‘: ‘特里尼达和多巴哥‘, Tunisia: ‘突尼斯‘, Turkey: ‘土耳其‘, ‘United Republic of Tanzania‘: ‘坦桑尼亚‘, Uganda: ‘乌干达‘, Ukraine: ‘乌克兰‘, Uruguay: ‘乌拉圭‘, ‘United States‘: ‘美国‘, Uzbekistan: ‘乌兹别克斯坦‘, Venezuela: ‘委内瑞拉‘, Vietnam: ‘越南‘, Vanuatu: ‘瓦努阿图‘, ‘West Bank‘: ‘西岸‘, Yemen: ‘也门‘, ‘South Africa‘: ‘南非‘, Zambia: ‘赞比亚‘, Zimbabwe: ‘津巴布韦‘ } }, series: [ { type: ‘scatter‘, coordinateSystem: ‘geo‘ }, { name: ‘启动次数‘, type: ‘map‘, geoIndex: 0, data: this.worldData } ] }) }
需要的朋友可以直接复制这里的nameMap到自己的js文件对应位置中。里面只有一百多个常用国家的对应更改。有些还是英文的国家名需要朋友自己对照ECharts里面地图显示的英文,再翻译成中文添加在nameMap中即可。
基于VUE+TS中引用ECharts的中国地图和世界地图密度表
标签:添加 pes dem 阿根廷 德国 tom 个人 charts 最大
原文地址:https://www.cnblogs.com/xiaozhu007/p/9029071.html