echarts绘制上海地图

2019独角兽企业重金招聘Python工程师标准>>>

效果图：

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body><div id="main" style="100%; height: 100%;"></div>
</body>
<script src="echarts-all.js"></script>
<script>var myChart = echarts.init(document.getElementById('main'));var option = {title: {text : '上海地图',subtext : '-。-'},tooltip : {trigger: 'item',formatter: function(a){return a[2];}},legend: {orient: 'vertical',x:'right',data:['数据名称']},dataRange: {min: 0,max: 1000,color:['orange','yellow'],text:['高','低'],           // 文本，默认为数值文本calculable : true},series : [{name: '数据名称',type: 'map',mapType: '上海',selectedMode : 'single',itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[{name: '崇明县',value: Math.round(Math.random()*1000)},{name: '宝山区',value: Math.round(Math.random()*1000)},{name: '嘉定区',value: Math.round(Math.random()*1000)},{name: '青浦区',value: Math.round(Math.random()*1000)},{name: '杨浦区',value: Math.round(Math.random()*1000)},{name: '虹口区',value: Math.round(Math.random()*1000)},{name: '闸北区',value: Math.round(Math.random()*1000)},{name: '普陀区',value: Math.round(Math.random()*1000)},{name: '静安区',value: Math.round(Math.random()*1000)},{name: '黄浦区',value: Math.round(Math.random()*1000)},{name: '卢湾区',value: Math.round(Math.random()*1000)},{name: '长宁区',value: Math.round(Math.random()*1000)},{name: '徐汇区',value: Math.round(Math.random()*1000)},{name: '浦东新区',value: Math.round(Math.random()*1000)},{name: '松江区',value: Math.round(Math.random()*1000)},{name: '闵行区',value: Math.round(Math.random()*1000)},{name: '金山区',value: Math.round(Math.random()*1000)},{name: '奉贤区',value: Math.round(Math.random()*1000)},{name: '南汇区',value: Math.round(Math.random()*1000)}]}]};myChart.setOption(option);</script>
</html>

转载于:https://my.oschina.net/chenhao901007/blog/374701

echarts绘制上海地图相关推荐

html画布上海地图,echarts绘制上海地图
效果图: var myChart = echarts.init(document.getElementById('main')); var option = { title: { text : '上海 ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Echarts绘制各省地图
Echarts 绘制全国地图近期工作需要用到echarts制作省内地图,研究了一番,好多人写的很模糊不好理解,我这里写个菜鸟教程记录一下. 在页面引入 jquery.js h和echarts.js ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
使用Echarts绘制geo地图（案例）
使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据链接: ...
如何通过echarts绘制北京市地图并可以添加标记并可点击
首先获取城市地图所对应的json文件通过这个网站可以获取到城市地图所对应的json echarts 中使用的是地图的js文件需要找到北京地图的js文件下载各个城市的js文件绘制出地图在地图上 ...
不习惯的 Vue3 起步六の Echarts绘制下钻地图
序看过一些可视化大屏展示地图的例子,准备动手做做. 既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用: Vue3 Vite Typescript echarts 实现效果: 准 ...
Echarts — 绘制省级地图
版本:vue@3.0.5 + echarts@5.1.2 本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例) 一.安装 echarts npm i echarts --save-de ...

echarts绘制上海地图

echarts绘制上海地图相关推荐

最新文章

热门文章