vue使用echarts实现地图的方法详解 vue使用echarts实现地图的方法详

全局安装echarts
将echarts绑定在原型上(main.js文件中)
准备画布
地图配置option
中国地图包（china.json）
总结

文章图片

全局安装echarts

npm i echarts --save

将echarts绑定在原型上(main.js文件中)

import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts;

准备画布

地图配置option

option = {// 地图背景色backgroundColor: "#ccd3e4",geo: {map: 'china',},tooltip: {trigger: 'item',// 自定义提示框的内容/** 这里自定义显示的值是data中value数组的第二个值* formatter(params) {return ("" +params.data.name +"
" +"省份总额度：" +params.data.value[2] +"（万元）"); }*/},series: [{type: 'map',map: 'china',geoIndex: 1,showLegendSymbol: false, // 存在legend时显示tooltip: {show: false},label: {normal: {show: false},emphasis: {show: false}},roam: false,itemStyle: {normal: {areaColor: "#aaa",borderColor: "#ccd3e4",borderWidth: 1,},emphasis: {areaColor: "#aaa",},},}, {name: '省份总额度',type: 'effectScatter',coordinateSystem: 'geo',data: [{name: "深圳",value: [121.15, 31.89, 12],},{name: "武汉",value: [109.781327, 39.608266, 29]}],symbolSize: 20,symbol: 'circle',label: {normal: {show: false,},emphasis: {show: false,},},showEffectOn: "render",itemStyle: {normal: {color: {type: "radial",colorStops: [{offset: 0,color: "#e5c68b",},{offset: 0.8,color: "#6e96d4",},{offset: 1,color: "#6e96d4",},],global: false, // 缺省为 false},},},},]}

中国地图包（china.json） 【vue使用echarts实现地图的方法详解】去除了海南多余的地方的中国地图

总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!