echarts 全国各省市3D图

实现步骤如下
1，npm安装组件

npm install echarts
npm install echarts-gl

2, 下载所显示省市区的json数据

下载地址如下 点击跳转

3，依次引入

  import echarts from 'echarts';import  'echarts-gl';//这个json文件，通过跳转地址获取import shanJson from '../../assets/mockData/shanxi.json';

4，echarts注册地图

 echarts.registerMap('shanxi', shanJson);

5，剩下的就是配制option,以及实例化组件。

  let initEcharts = echarts.init(me.$refs.container);initEcharts.setOption(me.option);

代码如下

<template><div><p>geoJSON获取地址   <a :href="href">跳转地址</a></p><div id="echarts" ref="container"></div></div>
</template><script>import echarts from 'echarts';import  'echarts-gl';//这个json文件，通过跳转地址获取import shanJson from '../../assets/mockData/shanxi.json';export default {data() {return {href:' http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4',option: {}}},methods: {init() {let me = this;var barData = [{"name": "太原市","value": [112.48699,37.94036,100]}];echarts.registerMap('shanxi', shanJson);me.option = {title: {text: '山西省3D地图',left: 'center',top: 20},legend:{show:true,right:10,top:10},tooltip:{show:true,formatter:function(params){let value = params.data.value;return params.seriesName + ':'+ value[2];}},geo3D: {map: 'shanxi',boxWidth:50,boxHeight:6,boxDepth:90,// environment: 'auto',//鼠标旋转，缩放等视觉设置viewControl: {// center: [-10, 0, 10]},//光源的设置light: {main: {intensity: 1,shadow: true,alpha:150,beta: 70},ambient: {intensity: 0}},//地面的背景颜色groundPlane: {show: true,color:'transparent'},//特效设置postEffect: {enable:false},//标签样式label: {show:true,formatter:function(params){var content='',content=params.name;return content;},distance:0,textStyle:{color:'#ffffff',fontWeight : 'normal',fontSize :12,backgroundColor: 'rgba(255,255,255,0)'},},//地图样式 ===》地图各省市区的颜色，边界itemStyle: {color:'#73a4ff',borderColor: 'rgb(62,215,213)',borderWidth: 1},//鼠标 hover 高亮时图形和标签的样式emphasis:{label:{show:true,distance:10},itemStyle: {color:'#ffa8cc',}}},series: [{type: 'bar3D',name:'某某柱状图',coordinateSystem: 'geo3D',itemStyle: {color: 'red',opacity: 1},emphasis:{label:{show:false,}},data: barData,}]};let initEcharts = echarts.init(me.$refs.container);initEcharts.setOption(me.option);}},created() {},mounted() {this.$nextTick(() => {this.init();})}}
</script><style scoped>#echarts {width: 100%;height: 500px;}
</style>

效果如下

参考地址 https://www.echartsjs.com/zh/option-gl.html#geo3D.light.ambient

echarts 全国各省市3D图相关推荐

echarts 全国各省市地图切换展示
效果如上图,开始默认为全国地图,选择省或者市渲染为对应的地图 index.html <script type="text/javascript" src="http ...
湖北地图html代码,echarts全国省市地图代码
[实例截图] echarts全国省市地图代码 [实例截图] [核心代码] html5 canvas echarts全国省市地图代码 *{margin: 0;padding: 0;} body{widt ...
echarts——实现地图——获取全国+各省市的数据js——基础积累
前几天写了一篇关于 echarts实现地图的博文,关于全国+各省市的数据js的获取,下面做一下记录. 1.阿里云获取地图数据的网址阿里云获取全国+各省市数据js的链接:http://datav.al ...
全国各省市高考有多难？Python动态图给你盘点！
开场段子???? : 下面我们用平行坐标系图来直观呈现全国各省市高考难度(4维度,分别是一本录取率,211录取率,985录取率,清北录取率). 平行坐标系图是一种适合呈现高维数据(3维以上)的图表形式 ...
2018计算机专业高考人数,2018年全国31省市高考人数及各省历年高考人数分析【图】...
2018年共有975万考生报名高考.中国高考人数一直在持续变化.高考人数顶峰时期是2008年,为1050万,到2013年下降到912万,2014.2015年分别增加到939万.942万,2016.20 ...
Pyecharts3D图：常见的3D图
Pyecharts3D图:常见的3D图文章目录 Pyecharts3D图:常见的3D图前言一.3D柱状图 1. 穿孔卡片 2. 堆砌图二.3D折线图 1. 自转图 2. 正交投影三.3D散点 ...
四川农大2020计算机专业录取分数线,四川农业大学2020年在全国各省市分专业录取分数线！含艺体类！...
四川农业大学:简称"川农大",是国家"双一流"世界一流学科建设高校."211工程"重点建设高校.有博士后科研流动站8个.其中,农业科学.植物 ...
使用echarts完成中国省市区县镇地图展示
目录前言一.中国地图 1.1 地图数据-china.js 1.2 代码应用二.省份地图--以山东为例,其他省份同理 2.1 地图数据-shandong.js 2.2 代码应用三.市级地图--以 ...
全国各地省市地区plist文件（数据跟微信的地区一致）
全国各地省市地区plist文件(数据跟微信的地区一致),直接上数据,自己复制黏贴. <?xml version="1.0" encoding="UTF-8" ...
echarts实现某个市3D地图展示
应业务需求,以3D形式展示某个城市的地图,并根据该城市下属区域车辆的多少,动态变幻区域颜色大概效果如下(颜色随便给的,超丑简单记录下吧) 以舟山市为例: 1.生成舟山市的geojson文件查询链 ...

echarts 全国各省市3D图

echarts 全国各省市3D图相关推荐

最新文章

热门文章