echarts如何实现中国地图

ppylox
·1/19/2022·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

本文介绍使用ECharts实现中国地图的方法。先通过npm安装echarts和echarts-countries-js,再初始化echarts并引入china地图文件,配置series为map类型、map为china并传入数据,最后setOption渲染。引入echarts-countries-js后会自动加载对应地图js文件,该包还包含其他国家地图,可按需加载。

很奇怪的一个问题是echarts官网居然没有中国地图的实例,美国和其他国家的都有,不过在官网的某个地方的文档里面有提到这个问题。

出于需要,参考了官网提供的文档,整理了一下如何使用echarts实现中国地图的步骤。

安装echarts

npm i echarts -S

安装echarts-countries-js

npm i  echarts-countries-js -S

初始化echarts

import * as echarts from  "echarts"\nimport chinajs from "echarts-countries-js/echarts-countries-js/china"\n\nlet  options = {\n  series: [\n      {\n        type: "map",\n        map: "china",\n        data: [\n          { name: "北京", value: 123 },\n          { name: "河南", value: 236 },\n        ]\n      }\n    ]\n}\n\nlet chart =  echarts.init(document.getElementById("echarts"))\n\nchart.setOption(options)

引入echarts-countries-js 后,初始化echarts的时候会自动加载对应的地图js文件,虽然chinajs这个文件没有用,但是echarts已经用到了。

当然这个包里面还包含其他国家的地图js文件,只需要按需加载即可。

相关文章

评论 (0)

暂无评论,来写第一条吧