一效果图

二上代码

封装好的组件可以直接使用，根据自己数据传入props

<template><div class="mapContent"><div ref="MapScatter" class="echarts"></div></div></template>
<script>
import 'echarts/map/js/china' //导入echart的中国地图插件 export default {name: 'MapScatter',mounted() {  //vue的生命周期函数this.initEcharts()      //调用初始化图表的函数},methods: {initEcharts() {let echarts = this.$echarts.init(this.$refs.MapScatter) //获取到容器的节点，初始化echarts实例let option = {// 图表主标题title: {text: '在线率', // 主标题文本，支持使用 \n 换行top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比left: 'center', // 值: 'left', 'center', 'right' 同上textStyle: { // 文本样式fontSize: 24,fontWeight: 600,color: '#fff',},},// 提示框组件tooltip: {trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式// 使用函数模板  传入的数据值 -> value: number | ArraybackgroundColor: 'rgba(255,255,255,0.9)',formatter: function (e) {let context = `<div class="showTool"><div class="title">${ e.data.name} </div><div class="rate">在线率：${ (e.data.value[2]).toFixed(0) }%</div></div>`return context},},geo: {map: 'china', // 地图类型show: true, // 是否显示地理坐标系组件// 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，// 可以设置成 'scale' 或者 'move' 设置成 true 为都开启roam: false,// 图形上的文本标签label: {show: false, // 是否显示对应地名},// 地图区域的多边形 图形样式itemStyle: {areaColor: '#eee', // 地图区域的颜色borderColor: 'gray', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数borderType: 'solid', // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'},// 高亮状态下的多边形和标签样式emphasis: {label: {show: true, // 是否显示标签color: '#fff', // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色},itemStyle: {areaColor: 'rgba(238, 238, 238, 1)', // 地图区域的颜色},},},series: [{type: 'scatter', // 类型coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', // 'pin', 'arrow', 'none'symbol: 'circle', symbolSize: 8, // 标记的大小// 图形的样式itemStyle: {color: 'purple',},// 系列中的数据内容数组, 数组项通常为具体的数据项data: [{ name: '北京', value: [116.405285, 39.904989, 24] },{ name: '天津', value: [117.190182, 39.125596, 60] },{ name: '上海', value: [121.472644, 31.231706, 24] },{ name: '重庆', value: [106.504962, 29.533155, 2] },{ name: '河北', value: [114.502461, 38.045474, 56] },{ name: '河南', value: [113.665412, 34.757975, 5] },{ name: '云南', value: [102.712251, 25.040609, 30] },{ name: '辽宁', value: [123.429096, 41.796767, 59] },{ name: '黑龙江', value: [126.642464, 45.756967, 73] },{ name: '湖南', value: [112.982279, 28.19409, 99] },{ name: '安徽', value: [117.283042, 31.86119, 24] },{ name: '山东', value: [117.000923, 36.675807, 10] },{ name: '新疆', value: [87.617733, 43.792818, 87] },{ name: '江苏', value: [118.767413, 32.041544, 51] },{ name: '浙江', value: [120.153576, 30.287459, 37] },{ name: '江西', value: [115.892151, 28.676493, 48] },{ name: '湖北', value: [114.298572, 30.584355, 17] },{ name: '广西', value: [108.320004, 22.82402, 26] },{ name: '甘肃', value: [103.823557, 36.058039, 37] },{ name: '山西', value: [112.549248, 37.857014, 18] },{ name: '内蒙古', value: [111.670801, 40.818311, 34] },{ name: '陕西', value: [108.948024, 34.263161, 64] },{ name: '吉林', value: [125.3245, 43.886841, 4] },{ name: '福建', value: [119.306239, 26.075302, 41] },{ name: '贵州', value: [106.713478, 26.578343, 20] },{ name: '广东', value: [113.280637, 23.125178, 10] },{ name: '青海', value: [101.778916, 36.623178, 3] },{ name: '西藏', value: [91.132212, 29.660361, 4] },{ name: '四川', value: [104.065735, 30.659462, 41] },{ name: '宁夏', value: [106.278179, 38.46637, 8] },{ name: '海南', value: [110.33119, 20.031971, 4] },// { name: '台湾', value: [121.509062, 25.044332, 58] },// { name: '香港', value: [114.173355, 22.320048, 45] },// { name: '澳门', value: [113.54909, 22.198951, 3] },// { name: '南海诸岛', value: [114.252615, 15.86029, 271.13] },],},{type: 'effectScatter', // 类型coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', // 'pin', 'arrow', 'none'symbol: 'circle',  // 标记的大小, 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数 // (value: Array|number, params: Object) => number|Array// 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数symbolSize: function (val) {return val[2] / 10},// 图形的样式itemStyle: {color: 'purple',},// 系列中的数据内容数组。数组项通常为具体的数据项data: [{ name: '广东', value: [113.280637, 23.125178, 88] },{ name: '山东', value: [117.000923, 36.675807, 90] },{ name: '河南', value: [113.665412, 34.757975, 80] },{ name: '四川', value: [104.065735, 30.659462, 83] },{ name: '江苏', value: [118.767413, 32.041544, 81] },{ name: '河北', value: [114.502461, 38.045474, 77] },],},],}echarts.setOption(option)  // 使用刚指定的配置项和数据显示图表。},},
}
</script><style lang="less" scoped>
.mapContent {width: 100%;height: 100%;.echarts {width: 100%;height: 100%;}/deep/ .showTool {width: 160px;height: auto;padding: 10px 0 10px 10px;box-sizing: border-box;background: rgba(255, 255, 255, 0.9);// box-shadow: 0px 2px 8px 0px rgba(13, 4, 8, 0.2);border-radius: 5px;.title {font-size: 14px;font-family: Microsoft YaHei;font-weight: bold;color: #333333;line-height: 22px;}.rate {font-size: 12px;font-family: Microsoft YaHei;font-weight: bold;color: #333333;line-height: 22px;}}
}</style>

vue中使用中国地图scatter散点图相关推荐

vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
在vue中实现中国地图
前言 4.9版本的可以看这篇文章,5.x版本的可以看 echarts地图的常见用法:基本使用.区域颜色分级.水波动画.区域轮播案例更加丰富安装 npm install echarts@4.9 不要 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
VUE中使用百度地图BaiduMap
VUE中使用百度地图BaiduMap 以前在html页中使用了echart,做了很多图表,也集成了百度地图,效果很好.最近,开始研究vue加 .net core的框架,所以也想把echart和百度地图 ...
vue中使用echart地图
vue中使用echart地图获取湖南的地图数据实现的效果步骤一些方法地图options 总结获取湖南的地图数据 https://gallery.echartsjs.com/editor.h ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
Vue + echart 实现中国地图和省市地图（可切换省份
vue + echart 实现中国地图和省市地图(可切换省份) - 伏沙金 - 博客园
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...

vue中使用中国地图scatter散点图

一效果图

二上代码

vue中使用中国地图scatter散点图相关推荐

最新文章

热门文章

vue中使用中国地图scatter散点图

一 效果图

二 上代码

vue中使用中国地图scatter散点图相关推荐

最新文章

热门文章

一效果图

二上代码