vue + echarts实现地图

全局安装echarts

npm i echarts --save

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

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

准备画布

<template><div ref="openingChart" style="height: 600px;">div>
template>

<script>
import china from "../store/china.json";
export default {methods: {initCharts() {// 初始化中国地图this.$echarts.registerMap("china", china);// 获取dom节点let openingChart= this.$echarts.init(this.$refs.openingChart);// option配置写在最下面的openingChart.setOption(option);window.addEventListener("resize", () => {openingBankChart.resize();});}},mounted() {this.initCharts();}
}
</script>

地图配置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）

去除了海南多余的地方的中国地图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！