echarts省份地图

html

   <div id="mainMap" style="width: 600px;height:400px;margin: 200px auto;"></div>

引入文件

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script><script>

js

 var myChart = echarts.init(document.getElementById('mainMap')); //在id为mainMap的dom元素中显示地图$.getJSON('https://geo.datav.aliyun.com/areas_v2/bound/360000_full.json', function(geoJson) {//请求对应省份的编码，如江西360000具体可查询http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5echarts.registerMap('jiangxi', geoJson);var data = [{name: '上饶市',value: 123}, {name: '新余市',value: 123}, {name: '鹰潭市',value: 123}, {name: '萍乡市',value: 123}, {name: '景德镇市',value: 123}, {name: '南昌市',value: 123}, {name: '宜春市',value: 123}, {name: '抚州市',value: 123}, {name: '九江市',value: 123}, {name: '吉安市',value: 123}, {name: '赣州市',value: 123}]option = {// backgroundColor: '#36F3BE', //echarts图表背景颜色tooltip: {trigger: "item",formatter: function(params) {if (params.seriesType == "scatter") {return params.name + " : " + params.value[2];}if (isNaN(params.value)) {return params.name + " : " + 0;} else {return params.name + " : " + params.value;}}},visualMap: {show: false,// calculable: true,seriesIndex: [0],inRange: {}},geo: {show: true,map: "jiangxi",label: {normal: {show: true,color: "#ccc" //控制地图省市文字颜色},emphasis: {show: false,color: "#fff" //悬浮字体颜色}},roam: true,layoutSize: '95%',layoutCenter: ['50%', '50%'],itemStyle: {normal: {areaColor: "#4885FF", //地图背景颜色borderColor: "#ccc" //边界颜色},emphasis: {areaColor: "skyblue", //悬浮背景颜色}}},series: [{type: "map",map: "jiangxi",geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示roam: false,animation: false,data: data}]};myChart.setOption(option);});

效果图

echarts省份地图相关推荐

eCharts省份地图配置及方法
eCharts省份地图配置及方法文章目录: 广东地图使用方法广东地图使用方法 var geoCoordMap = { "广州":[113.30,23.20] }; var co ...
echarts省份地图制作
目录 1.引入插件 2.地图json数据选择 3.创建一个容器 4.读取json的数据,并加载到echarts 5.最终效果图 6.特殊效果如有其他不懂的记得私我哦 1.引入插件 <scrip ...
关于echarts省份地图不显示
1.一开始做测试,现在Note-pad++编辑,发现world.js 和china.js都能用,但是zhejiang.js等其他省份的js不能用 2.于是我把这些代码放到自己的项目中编辑,用的ecli ...
Echarts省份地图展示
效果图: 文件中引入的咸阳json数据如下: xianyang.json /* * Licensed to the Apache Software Foundation (ASF) under one ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
vue echarts绘制省份地图并添加自定义标注
效果图在main.js中引入地图 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 省份是动态引入的,在.vue文件中 ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
echarts全国地图资源，省份名称居中
echarts 全国地图资源 echarts全国地图资源全国地图山东黑龙江吉林辽宁北京天津河北河南山西陕西内蒙古安徽江苏上海浙江福建台湾广东香港澳门广西江 ...
vue+echarts实现省份地图展示
一.效果下面以四川省地图为例,展示效果如下: 二.echarts的安装这里我是使用npm进行安装的,命令如下: npm install echarts 三.echarts各省份地图js导入以下是 ...

echarts省份地图

html

引入文件

js

效果图

echarts省份地图相关推荐

最新文章

热门文章