2018-01-30-echarts地图标注

由于项目需要，根据接口返回城市数据，标注国内地图城市点，这里记录实现过程，以备不时之需。

一、echart插件引入

  1. 按需引入

echart在线定制 这里提供echart官网所给的在线打包工具，可自由选择所需图表、坐标系、组件进行打包下载，并且可对兼容及压缩问题进行设置

  1. 引入完成echart

echart最新版本插件下载 根据所需可选择版本，有常用、精简、完成版，以及源码可供下载

二、地图文件引入

eharts3 之后版本不再内置地图文件，因此需要我们手动引入官网的js或者json文件（http://echarts.baidu.com/download-map.html 官网可能暂时下架了js文件，可以导入下面链接的china.js文件）

加载地图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var myChart = echarts.init(document.getElementById('main'));
var option = {
  tooltip: {
                    show: false //不显示提示标签
//    formatter: '{b}', //提示标签格式
//    backgroundColor:"#ff7f50",//提示标签背景颜色
//    textStyle:{color:"#fff"} //提示标签字体颜色
  },
  series: [{
    type: 'map',
    mapType: 'china',
    label: {
      normal: {
        show: true,//显示省份标签
        textStyle:{color:"#4C77B5", fontSize: "12px" }//省份标签字体颜色
      },
      emphasis: {//对应的鼠标悬浮效果
        show: true,
        textStyle:{color:"#800080"}
      }
    },
    itemStyle: {
      normal: {
        borderWidth: .5,//区域边框宽度
        borderColor: '#46719A',//区域边框颜色
        areaColor:"#fff",//区域颜色
      },
//      emphasis: {
//        borderWidth: .5,
//        borderColor: '#4b0082',
//        areaColor:"#ffdead",
//      }
      emphasis:{
        areaColor: null,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowBlur: 20,
        borderWidth: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
    data:[
      {name:'福建', selected:true},//福建为选中状态
      {name:'重庆', selected:true},//福建为选中状态
      {name:'北京', selected:true},//福建为选中状态
      {name:'日本', selected:true}//福建为选中状态
    ]
  }]
};

myChart.setOption(option);

完整demo

演示地址1
演示地址2

若提示H5单页面手势滑屏切换(请用手机或模拟器访问)，请进入移动端手机模式F5刷新查看，谷歌浏览器直接F12

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 源码实现 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>行啊我的2017</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
</head>
<body>
<div id="main" style="height:400px"></div>
<script src="js/map.js"></script>
</body>
</html>

china.js 下载地址：https://github.com/zhangyingxuan/my2017Demo/blob/master/js/china.js

map.js 下载地址：https://github.com/zhangyingxuan/my2017Demo/blob/master/js/map.js

echart
#echart #前端
2018-01-30-echarts地图标注
https://zhangyingxuan.github.io/2018-01-30-echarts地图标注/
作者
blowsysun
许可协议