vue2使用echarts地图

创建步骤：

1、在页面导入echarts

2、引入下载好的json文件

地图下载链接

全部代码

效果图

创建步骤：

1、在页面导入echarts

import * as echarts from 'echarts';

2、引入下载好的json文件

const chinaJson = require("./chinaChange.json")

地图下载链接

中国地图及各省的json 链接: https://pan.baidu.com/s/1nTip56J1jtAqRyPaaplO4Q?pwd=knju 提取码: knju

全部代码

<template><div class=""><div id="map" :style="{ height: '521px', width: '100%' }" ref="myEchart"></div></div>
</template><script>import * as echarts from 'echarts';const chinaJson = require("./chinaChange.json")export default {name: 'map',data(){return{// 各省的人口数据mapData: [{ name: "河北", value: 10000 },{ name: "山西", value: 200 },{ name: "辽宁", value: 4000 },{ name: "吉林", value: 5000 },{ name: "黑龙江", value: 6000 },{ name: "江苏", value: 2000 },{ name: "浙江", value: 800 },{ name: "安徽", value: 2000 },{ name: "福建", value: 4600 },{ name: "江西", value: 3200 },{ name: "山东", value: 200 },{ name: "河南", value: 200 },{ name: "湖北", value: 2060 },{ name: "湖南", value: 3000 },{ name: "广东", value: 2900 },{ name: "海南", value: 2000 },{ name: "四川", value: 2120 },{ name: "贵州", value: 20 },{ name: "云南", value: 2000 },{ name: "陕西", value: 2890 },{ name: "甘肃", value: 2740 },{ name: "青海", value: 2660 },{ name: "台湾", value: 2440 },{ name: "内蒙古", value: 2350 },{ name: "广西", value: 2700 },{ name: "西藏", value: 2000 },{ name: "宁夏", value: 2000 },{ name: "新疆", value: 2000 },{ name: "北京", value: 2000 },{ name: "天津", value: 2000 },{ name: "上海", value: 2000 },{ name: "重庆", value: 2000 },{ name: "香港", value: 2000 },{ name: "澳门", value: 2000 },{ name: "南海诸岛", value: 800 },]}},mounted(){this.init();},methods:{init(data) {let myChart = echarts.init(document.getElementById('map'));echarts.registerMap('china', chinaJson);let option = {tooltip: {trigger: 'item',formatter:  function(params) {if(!params.value){return '该地区暂无访问量';}return params.seriesName+'<br />'+params.name+'：'+params.value+'次'},confine: true},visualMap: {min: 0,max: 10000,// text: ['高', '低'],realtime: false,calculable: false,itemWidth:16,itemHeight: 79,left: 0,top: 40,inverse: true,orient:"horizontal",inRange: {color: ['#E6F0FF', '#0955CE'],}},series: [{name: '',type: 'map',// zoom: 1.4,label: {normal: {show: false,},},mapType: 'china', // 自定义扩展图表类型itemStyle: {// normal: {label: {show: true}},emphasis: {label: {show: true}},normal:{label: {show: false,textStyle: {color: '#444'}},}},data: this.mapData,}]};myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();});}}}
</script>

效果图

vue2使用echarts地图相关推荐

vue 引入json地图_在vue2.x中使用echarts,地图或者theme引入js 文件，会有问题，地图的json文件重新注册可以...
One-line summary [问题简述] 在vue2.x中使用echarts,地图或者theme引入会有问题 import echarts from 'echarts/dist/echarts' ...
vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排 ...
【Web技术】1078- 一文搞定 echarts 地图轮播高亮
???? 前言这两天忙着做公司的超级数据大屏,实在挤不出时间连续更文. 但是更文活动都坚持这么久了也不想停止更新,那我就分享一下在工作中经常用到的echarts地图轮播高亮吧. 技术栈用的是vue2 ...
Echarts地图初体验
根据黑马pink老师的视频制作的echarts地图最近沉迷P社的钢4,断断续续几天才做好效果预览 echart拿来做这种动态图还是不错的官网百度的echarts 仓库地址链接: link. h ...
mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据，含世界地图
[实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │ ├── anhu ...
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档类资源-CSDN下载
echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
echarts 地图常见效果
echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...
html海南地图插件,Echarts 地图（map）插件之鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...

vue2使用echarts地图

创建步骤：

1、在页面导入echarts

2、引入下载好的json文件

地图下载链接

全部代码

效果图

vue2使用echarts地图相关推荐

最新文章

热门文章