效果图：（移动上去也会有效果的那种哦）
第一步：vue中安装echarts和echarts-gl
npm install echarts
npm install echarts-gl
或是
yarn add echarts
yarn add echarts-gl
package.json
也可以指定版本命令 加个@后面跟版本号即可
yarn add echarts-gl@2.0.9
成功之后可以在package.json中检查是否安装成功（如上图）
第二步：在vue文件中引入
引入位置：我没有在main.js中全局引用，而是哪个页面用到就引入哪里,
在引入所需的json文件
代码：
import * as echarts from 'echarts'
import 'echarts-gl';
import geoJson from "../src/assets/anhui.json";
第三步：实现具体代码（完整的）
注意：我没有封装起来（你也可以先直接在页面中实现，然后在考虑封装需求）
1、有一个装饼图的容器（可以都复制走 为了成功实现效果）
<div class="map">
<div class="map-container">
<div class="title">地图</div>
<div class="map-chart" id="mapEchart"></div>
</div>
</div>
2、对应样式
.map {
display: flex;
justify-content: center;
width: 100%;
height: 100vh;
}
.map-container {
width: 100%;
height: 100%;
background: #dfebff;
position: relative;
.title {
font-size: 25px;
font-weight: 600;
border-bottom: 1px solid #8b8b8b;
background: #AEDCFF;
}
}
.map-chart {
position: absolute;
top: 0;
left: 0;
z-index: 5;
height: 100%;
width: 100%;
}
3、3d图数据
name: "Charts-gl",
data() {
return {};
},
4、钩子中调用mouted
mounted() {
this.chartMap();
},
beforeDestroy() {
// 防止内存泄露
if (!this.myChart) {
return;
}
this.myChart.dispose();
this.myChart = null;
},
5、具体方法methods（为了你也方便修改样式 我注释尽量给到）
methods: {
chartMap() {
var myChart = echarts.init(document.getElementById("mapEchart"));
echarts.registerMap("anhui", geoJson);
myChart.hideLoading();
// 图表配置项
let option = {
geo3D: {
map: "anhui",
roam: true,
itemStyle: {
color: "#11EEEE",
opacity: 0.8,
borderWidth: 0.4,
borderColor: "#000",
// areaColor: '#fff'
},
emphasis: {
disabled: true, //是否可以被选中
label: {
//移入时的高亮文本
show: true,
color: "#000", //显示字体颜色变淡
fontSize: 18, //显示字体变大
},
itemStyle: {
color: "#ff7aff", //显示移入的区块变粉色
},
},
label: {
show: true,
position: "top",
color: "#111", //地图初始化区域字体颜色
fontSize: 14,
lineHeight: 16,
// textStyle: {
// color: "#fff", //地图初始化区域字体颜色
// fontSize: 12,
// opacity: 1,
// backgroundColor: "rgba(0,23,11,0)",
// },
},
shading: "lambert",
light: {
//光照阴影
main: {
color: "#fff", //光照颜色
intensity: 1, //光照强度
//shadowQuality: 'high', //阴影亮度
shadow: true, //是否显示阴影
shadowQuality: "medium", //阴影质量 ultra //阴影亮度
alpha: 55,
beta: 10,
},
ambient: {
intensity: 0.9,
},
},
},
};
myChart.setOption(option);
},
},
第四：我想说一下注意事项哈
1、因为这些代码比较复杂（我看不懂 只是尽量把配置样式相关给了一下注解 希望有帮助）
2、一开始只想实现效果的（不要先封装成组件 很可能会失败 先在要实现的页面写）
3、gl 3d相关的配置可以在官方文档上查看理解 （下面附赠链接）
https://echarts.apache.org/zh/option-gl.html#globe
网友评论