echarts绘制四川地图

1.效果图如下：

首先下载echarts-all.js。

代码如下：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 5 <title>四川地图显示</title>
 6 </head>
 7 <script type="text/javascript"    src="<?=$sRootPath?>js/mapJs/echarts-all.js"></script>
 8     <body>
 9         <div id="main" style="height: 530px;"></div>
10         <script>
11         mapDisplay();
12         function mapDisplay() {
13             var myChart = echarts.init(document.getElementById('main'));
14             var option = {
15                 title: {
16                     text: '四川省区域注册人数统计',
17                     //subtext: '-。-'  //子标题
18                 },
19                 tooltip: {
20                     trigger: 'item',
21                     formatter: function(a){//鼠标移到某个州市上弹出的提示内容。包括显示样式可以自定义，利用return返回样式即可。
22                     return a[1]+":"+a[2];//a[1]:州市名称，a[2]:data中的valuez值。
23             }
24                 },
25
26                 legend: {
27                     orient: 'vertical',
28                     x: 'right',
29                     data: ['数据名称']
30                 },
31
32                 dataRange: {
33                     min: 0,
34                     max: 1000,
35                     color: ['orange', '#6EA1F4'],
36                     //color: ['orange', 'blue'],
37                     boder: 3,
38                     text: ['高', '低'],           // 文本，默认为数值文本
39                     calculable: true
40                 },
41                 series: [
42                     {
43                         //name: '数据名称',
44                         type: 'map',
45                         mapType: '四川',//如果是其他省份，也可以改变，例如：上海，北京，天津等地。
46                         selectedMode: 'single',
47                         itemStyle: {
48                             normal: {
49                                 label: { show: true },
50                                 borderWidth: 2,//省份的边框宽度
51                                 childBorderWidth: 1,
52                                 childBorderColor: '#6EA1F4'
53
54                             },
55                             emphasis: { label: { show: true } }
56                         },
57                         data: [
58                             { name: '阿坝藏族羌族自治州', value: 0 },
59                             { name: '巴中市', value: 0 },
60                             { name: '成都市', value: 0 },
61                             { name: '达州市', value: 0 },
62                             { name: '德阳市', value: 0 },
63                             { name: '甘孜藏族自治州', value: 0 },
64                             { name: '广安市', value: 0 },
65                             { name: '广元市', value: 0 },
66                             { name: '乐山市', value: 0 },
67                             { name: '凉山彝族自治州', value: 0 },
68                             { name: '泸州市', value: 0 },
69                             { name: '眉山市', value: 0 },
70                             { name: '绵阳市', value: 0 },
71                             { name: '内江市', value: 0 },
72                             { name: '南充市', value: 0 },
73                             { name: '攀枝花市', value: 0 },
74                             { name: '遂宁市', value: 0 },
75                             { name: '雅安市', value: 0 },
76                             { name: '宜宾市', value: 0 },
77                             { name: '资阳市', value: 0 },
78                             { name: '自贡市', value: 0 }
79                         ]
80                     }
81                 ]
82             };
83             myChart.setOption(option);
84         }
85         </script>
86     </body>
87 </html>

View Code

转载于:https://www.cnblogs.com/lovely_life/p/5106286.html

echarts绘制四川地图相关推荐

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数据链接: ...
Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示
}, { name: "福建", value: 20, }, { name: "贵州", value: 74, }, { name: "广东" ...
如何通过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绘制四川地图相关推荐

最新文章

热门文章