vue echarts 中国地图实现用户分布

效果如图所示

vue中echarts@4.9版本，地图的使用，

避免进坑，亲测4.9版本正常，5.0版本不支持因为官方移除了地图数据和map文件夹china.js

1.安装echarts@4.9版本

npm install echarts@4.9.0

2.main.js中引入echarts以及china.js

// 引入echarts以及中国地图china.js
import * as echarts from 'echarts';
import '../node_modules/echarts/map/js/china';
Vue.prototype.$echarts = echarts;

3.新建组件echars_china.vue

<template><div class="chinaecharts"><div id="mapChart" ref="mapChart" ></div></div>
</template>
<script>
export default {name: "ChinaEcharts",methods: {mapFn() {// 基于准备好的dom，初始化echarts实例// var mapChart = this.$echarts.init(this.$refs.mapChart);var mapChart = this.$echarts.init(document.getElementById("mapChart"));mapChart.setOption({backgroundColor: "", //背景颜色title: {text: "",subtext: "",color: "#fff",x: "center",},//是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。visualMap: {// 左下角定义 在选中范围中的视觉元素 渐变地区颜色type: "piecewise", // 类型为分段型top: "bottom",// calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。right: 10,splitNumber: 6,seriesIndex: [0],itemWidth: 20, // 每个图元的宽度itemGap: 2, // 每两个图元之间的间隔距离，单位为pxpieces: [// 自定义每一段的范围，以及每一段的文字{ gte: 10000, label: "10000人以上", color: "#1890FF" }, // 不指定 max，表示 max 为无限大（Infinity）。{gte: 1000,lte: 9999,label: "1000-9999人",color: "#83C2FF",},{gte: 500,lte: 999,label: "500-999人",color: "#CDE5FF",},{gte: 100,lte: 499,label: "100-499人",color: "#E6F1FF",},{gte: 1,lte: 99,label: "1-99人",color: "#EBF3FF",},{ lte: 0, label: "无", color: "#FAFAFA" }, // 不指定 min，表示 min 为无限大（-Infinity）。],textStyle: {color: "#737373",},},// 提示框，鼠标移入tooltip: {show: true, //鼠标移入是否触发数据trigger: "item", //出发方式formatter: "{b}-用户数量：{c}",},//配置地图的数据，并且显示series: [{name: "地图",type: "map", //地图种类map: "china", //地图类型。data: [{name: "北京",value: Math.round(Math.random() * 500),},{name: "天津",value: Math.round(Math.random() * 500),},{name: "上海",value: Math.round(Math.random() * 500),},{name: "重庆",value: Math.round(Math.random() * 500),},{name: "河北",value: Math.round(Math.random() * 500),},{name: "河南",value: Math.round(Math.random() * 500),},{name: "云南",value: Math.round(Math.random() * 500),},{name: "辽宁",value: Math.round(Math.random() * 500),},{name: "黑龙江",value: Math.round(Math.random() * 500),},{name: "湖南",value: Math.round(Math.random() * 500),},{name: "安徽",value: Math.round(Math.random() * 500),},{name: "山东",value: Math.round(Math.random() * 5000),},{name: "新疆",value: Math.round(Math.random() * 0),},{name: "江苏",value: Math.round(Math.random() * 5000),},{name: "浙江",value: Math.round(Math.random() * 50000),},{name: "江西",value: Math.round(Math.random() * 500),},{name: "湖北",value: Math.round(Math.random() * 5000),},{name: "广西",value: Math.round(Math.random() * 500),},{name: "甘肃",value: Math.round(Math.random() * 0),},{name: "山西",value: Math.round(Math.random() * 500),},{name: "内蒙古",value: Math.round(Math.random() * 0),},{name: "陕西",value: Math.round(Math.random() * 500),},{name: "吉林",value: Math.round(Math.random() * 500),},{name: "福建",value: Math.round(Math.random() * 500),},{name: "贵州",value: Math.round(Math.random() * 500),},{name: "广东",value: Math.round(Math.random() * 500000),},{name: "青海",value: Math.round(Math.random() * 0),},{name: "西藏",value: Math.round(Math.random() * 0),},{name: "四川",value: Math.round(Math.random() * 5000),},{name: "宁夏",value: Math.round(Math.random() * 500),},{name: "海南",value: Math.round(Math.random() * 500),},{name: "台湾",value: Math.round(Math.random() * 500),},{name: "香港",value: Math.round(Math.random() * 500),},{name: "澳门",value: Math.round(Math.random() * 500),},{name: "南海诸岛",value: Math.round(Math.random() * 500),},],itemStyle: {normal: {label: {show: true, //默认是否显示省份名称},areaStyle: {color: "#FAFAFA", //默认的地图板块颜色},borderWidth: 1,borderColor: "#D9D9D9",},//地图区域的多边形 图形样式。emphasis: {label: {show: true, //选中状态是否显示省份名称},areaStyle: {color: "#90c31d", //选中状态的地图板块颜色},},},zoom: 1, //放大比例label: {//图形上的文本标签，可用于说明图形的一些数据信息show: true,},},{type: "scatter",showEffectOn: "render", //配置什么时候显示特效coordinateSystem: "geo", //该系列使用的坐标系symbolSize: 10, //标记的大小data: [{ name: "宜昌", value: [111.3, 30.7, 130] }],zlevel: 99999,},],}),window.addEventListener("resize", () => {// 自动渲染echartsmapChart.resize();});},},mounted() {this.mapFn();},
};
</script>
<style scoped>
.chinaecharts {width: 100%;height: 500px;
}
#mapChart {width: 100%;height: 500px;
}
</style>

4.需要的vue页面引入echars_china.vue组件并注册使用

vue echarts 中国地图实现用户分布相关推荐

vue+echarts中国地图+省市级地图（全程教学，你也可以）
echarts+vue中国地图,点击进入省级地图 VUE+Echarts+省市地图钻取(简洁版,超详细) 以上两篇来自站内,是本文的主要参考来源. 首先上才艺首先需要引入 echarts 包 npm ...
前端jq/vue echarts中国地图的实现
一.jquery项目实现echarts中国地图 1.引入相关资源文件 jquery.echarts 等 <script src="https://cdn.bootcdn.net/aja ...
vue echarts 中国地图省级联动+散点图（各省json文件及china.js）
最近用echarts 做个散点图,且省级联动,效果图如下: 1.安装echarts cnpm install echarts --save 2.引入echarts.中国地图及省份地图json impo ...
vue+echarts中国地图数据可视化展示
1.效果展示 2.步骤: 2.1.在main.js文件中加入 //引入echartsimport * as echarts from "echarts";Vue.prototype ...
vue+ echarts实现地图（中国地图）
** vue+ echarts实现地图(中国地图) ** <div class="myChartMap" id="myChartMap" >< ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...

vue echarts 中国地图实现用户分布

效果如图所示

vue中echarts@4.9版本，地图的使用，

1.安装echarts@4.9版本

2.main.js中引入echarts以及china.js

3.新建组件echars_china.vue

4.需要的vue页面引入echars_china.vue组件并注册使用

vue echarts 中国地图实现用户分布相关推荐

最新文章

热门文章