echarts.js 绘制地图/图表

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

安装 echart.js

npm

npm install echarts --save

yarn

yarn add echarts

按需加载 ehcart.js

全量加载:

var echarts = require('echarts');

默认使用 require(‘echarts’) 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

可以按需引入的模块列表见 https://github.com/apache/incubator-echarts/blob/master/index.js

初始化 echart.js

1
2
3
4
<body>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>
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
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));

// 指定图表的配置项和数据
var option = {
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  legend: {
    data: ["销量"],
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

核心就是使用 echart的 setOption方法来显示图表.

echart 绘制图表

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
initTrending() {
     this.trendingChart = echarts.init(document.getElementById("trending"));
     this.trendingChart.setOption({
       tooltip: {},
       //图例
       legend: {
         data: ["新增确诊", "新增治愈", "死亡人数"]
       },
       //横坐标
       xAxis: {
         data: ["02.04", "02.05", "02.06", "02.07", "02.08", "02.09", "02.10"]
       },
       //纵坐标
       yAxis: {},
       //数据集合
       series: [
         {
           name: "新增确诊",
           type: "line",
           // symbol:true,
           color: "#AD443D",
           smooth: true,
           data: [80, 67, 51, 42, 31, 20, 11]
         },
         {
           name: "新增治愈",
           type: "line",
           color: "#85B89E",
           smooth: true,
           data: [6, 12, 21, 23, 31, 21, 27]
         },
         {
           name: "死亡人数",
           type: "line",
           color: "grey",
           smooth: true,
           data: [0, 0, 0, 0, 0, 0, 0]
         }
       ]
     });
   }

效果:

WX20200211-151258@2x.png

echart 渲染地图

首先需要下载地图文件.地图文件分为两种,一种是 .js格式,一种是.json(.geoJson)格式.
echart 官方目前不提供地图数据下载,需要从https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ下载.下载下来的数据格式为.geoJson,
关于 geojson 的介绍,可以看下https://juejin.im/post/5d8e0eaa5188250915506b9b.
我们把需要的地图数据都下载下来备用.

注册地图

1
2
3
this.mapChart = echarts.init(document.getElementById("main"));

echarts.registerMap(mapName, require(`@/static/${mapName}.json`));

根据数据渲染地图不同区域颜色

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
//按需引入 echart 模块
//主模块
var echarts = require("echarts/lib/echarts");
//图标线组件
// require("echarts/lib/chart/line");
//地图图标模块
require("echarts/lib/chart/map");
//提示框组件
require("echarts/lib/component/tooltip");
//图例组件
require("echarts/lib/component/legend");
//地图组件
require("echarts/lib/component/geo");
//视觉映射组件
require("echarts/lib/component/visualMap");

//定义 options

options: {
    //配置需要的提示框组件
        tooltip: {},
        //视觉映射组件
        visualMap: {
            //类型:分段式(根据数据大小划分为不同的区段,并根据不同区段来渲染颜色)
          type: "piecewise",
          //定义不同区段的值域以及对应的颜色
          pieces: [
            {
              max: 10,
              color: "#FAEBD2"
            },
            {
              min: 10,
              max: 100,
              color: "#E9A188"
            },
            {
              min: 100,
              max: 200,
              color: "#D56354"
            },
            {
              min: 200,
              max: 500,
              color: "#BB3A37"
            },
            {
              min: 500,
              color: "#480F10"
            }
          ],
          calculable: true,
          //对应的数据索引
          seriesIndex: [0]
        },
        //数据
        series: [
          {
              //tooltip 名称
            name: "确诊人数",
            //类型
            type: "map",
            //对应 geo 索引
            geoIndex: 0,
            //数据(通过 ajax 获取)
            data: [
                {
                    name:"name",
                    value:10
                }
            ]
          }
        ],
        //地图组件
        geo: {
            //地图名称(需要提前使用registerMap注册)
          map: "zhejiang",
          //是否允许用户手动缩放
          roam: false,
          //放大比例
          zoom: 1.2,
          //标识名称
          label: {
            show: true,
            color: "rgba(0,0,0,0.4)",
            fontSize: 12
          },
          itemStyle: {
            borderColor: "rgba(0, 0, 0, 0.2)"
          },
          emphasis: {
            itemStyle: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      }

效果:
WX20200211-150537@2x.png

地图下钻/上浮

地图下钻

监听点击事件,根据点击的名称 require 地图,注册地图,修改 options,接着 setOptions 就可以了.

1
2
3
4
5
6
mapChart.on("click", (data) => {
  echarts.registerMap(data.name, require(`@/static/${data.name}.json`));

  this.options.geo.map = data.name;
  this.mapChart.setOption(this.options);
});

地图上浮

与地图下钻的方法类似,使用父地图重新渲染就可以了.

添加地图标点

在option中添加新的 series,类型为:effectScatter

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
{
          type: "effectScatter",
          //坐标系统,因为我们使用的是geo 组件,所以选择geo.
          coordinateSystem: "geo",
          data: [
            {
              //名称
              name: "name",
              //点的坐标,可以到地图的 json 文件中查找或者从地图 app 中查找.

              value: []
            }
          ],
          // 标点的大小
          symbolSize: 12,
          showEffectOn: "render",
          //动态效果
          rippleEffect: {
            //周期
            period: 5,
            //放大倍数
            scale:  6
          },
          itemStyle: {
            color: "#FFB93D",
            borderWidth: 3,
            shadowColor: "rgba(0, 0, 0, 0.5)",
            shadowBlur: 6
            // borderColor: "red"
          }
        }

如图:

img

同时可以监听点击事件,根据 e.name 获取点击的名称.

1
2
3
echart.on("click",e=>{
  console.log(e.name)
}

自定义地图

打开http://geojson.io，这是一个可以在线绘制 geoJson 的网站，就是因为它我们才能随心所欲的绘制我们想要的地图样式和 geoJson 数据。
绘制好的地图可以以 json 格式下载,在 echart.js 中使用registerMap注册以后就可以使用了.

附

echart.js 官方教程

w3c echart 教程

thank u !