使用Echarts地图

最新推荐文章于 2024-08-14 19:18:20 发布

this.Moon

最新推荐文章于 2024-08-14 19:18:20 发布

阅读量634

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/kioik/article/details/107670510

版权

本文档介绍了如何在Vue项目中使用Echarts地图。首先，通过npm安装Echarts，接着说明由于Echarts 3的地图数据不内置，需要从地图下载界面获取并注册地图。地图数据可以以JS文件或JSON格式引入。然后，在main.js中全局引入echarts，并在Vue组件中导入地图JS文件，最后配置即可在组件中使用Echarts地图。

摘要由CSDN通过智能技术生成

1.使用npm 安装Echarts

npm install echarts --save

2.引入map

在Echarts中不能直接使用地图，ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

3.js引入

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

4.JSON引入

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});