2021-06-06在vue中使用 echarts3d地图

vue中使用 echarts地图

main.js中

`// 导入Echarts插件`
import * as echarts from 'echarts';
import "echarts-gl"; //echarts 3D插件，有用到3d地图的需要此插件，普通图表不需要引入
Vue.prototype.$echarts = echarts;

package.json 使用版本

"echarts": "^4.9.0",
"echarts-gl": "^1.0.0-beta.5",

在vue文件中使用

div要设置高度
<div id="main" ref="chart" style="width: 100%;height:600px;"></div>

const myChart = this.$echarts.init(document.getElementById('main'));
option={
  //此处配置可参考官网例子即可
}；
myChart.setOption(option);

3d地图示例
中国地图json数据

image.png

import '@/components/china'
var myChart = this.echarts.registerMap("china", china);//china为上图中的json数据

const myChart = this.$echarts.init(document.getElementById('main'));
option={
//此处配置可参考官网例子即可
}；
myChart.setOption(option);

此处说明如何出现geo3d（立体地图）

    var myChart = this.$echarts.init(document.getElementById('main'));
    this.$echarts.registerMap("china", china);        
    myChart.hideLoading();
    // 图表配置项
    let option = {        
      geo3D: {
        map: 'china',
        roam: true,
        itemStyle: {
            color: '#1d5e98',
            opacity: 1,
            borderWidth: 0.4,
            borderColor: '#000'
        },
        label: {
            show: true,
            textStyle: {
                color: '#00ff7f', //地图初始化区域字体颜色
                fontSize: 8,
                opacity: 1,
                backgroundColor: 'rgba(0,23,11,0)'
            },
        },
        emphasis: { //当鼠标放上去  地区区域是否显示名称
            label: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 3,
                    backgroundColor: 'rgba(0,23,11,0)'
                }
            }
        },
        shading: 'lambert',
        light: { //光照阴影
            main: {
                color: '#fff', //光照颜色
                intensity: 1.2, //光照强度
                //shadowQuality: 'high', //阴影亮度
                shadow: false, //是否显示阴影
                alpha: 55,
                beta: 10

            },
            ambient: {
                intensity: 0.3
            }
        }
      }       
    };
    myChart.setOption(option);

image.png

数据来源
http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
按照需求，选择对应的数据，保存为json文件引入项目中即可