echarts 渲染3d地图

最新推荐文章于 2024-07-26 13:56:51 发布

逆风优雅

最新推荐文章于 2024-07-26 13:56:51 发布

阅读量1k

点赞数

分类专栏： echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_44603011/article/details/126321875

版权

本文介绍了如何使用 echarts-gl 在前端项目中渲染3D地图，特别提示了遇到安装失败问题时，可能是因为高版本依赖导致的，建议降级到 'echarts-gl': '^1.1.2' 版本来解决问题。

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

与渲染2d地图类似

echarts 渲染3d地图要先安装依赖 echarts-gl

npm install echarts-gl

但是常常依赖安装失败，这往往是因为安装的这个依赖的版本太高造成的

可以尝试安装低版本 "echarts-gl": "^1.1.2",

npm install echarts-gl@1.2.2

代码如下：

  init() {
        setTimeout(() => {
            this.$e.registerMap("yangzhou", yangZhou); // 注册扬州数据
            this.myChart = this.$e.init(this.$el);
            this.setCharts();
            this.myChart.setOption(this.chartOption, true); // 将配置项加到echarts中
            window.addEventListener("resize", () => { // 监听屏幕缩放，使echarts同样缩放
                this.myChart.resize();
            });
        }, 1000);
    }

    setCharts() { // 配置echarts

        this.chartOption = {
            tooltip: {
                show: false,
            },
            visualMap: {
                show: fals