vue+echarts绘制3D地图
1、安装依赖
npm install echarts@^4.9.0
npm install echarts-gl@1.1.0 --save
2、引入echarts,echarts-gl，添加全局变量
import echarts from 'echarts'
import echartsGL from 'echarts-gl'
const app = createApp(App)
app.config.globalProperties.$echarts = echarts
app.config.globalProperties.$echartsGL = echartsGL
3、代码部分
//地图echarts
mapChart() {
var myChart = this.$echarts.init(document.getElementById("map"));
this.mapOption = {
viewControl: {
projection: "orthographic",
panMouseButton: "left",
rotateMouseButton: "left",
zoomSensitivity: 1,
panSensitivity: 1,
beta: 2,
alpha: 38,
},
geo3D: {
map: "china",
regionHeight: 0,
itemStyle: {
color: 'rgba(12, 64, 129, 0)',
opacity: 1,
borderWidth: 0,
borderColor: "rgba(12, 64, 129, 0)",
},
label: {
show: false,
textStyle: {
color: "#fff",
fontSize: 16,
opacity: 1,
backgroundColor: "rgba(0,0,0,0)",
},
},
emphasis: {
label: {
show: true,
textStyle: {
color: "#27a5b8",
fontSize: 14,
},
},
},
light: {
main: {
color: "#fff",
intensity: 1.2,
shadow: false,
alpha: 50,
beta: 10,
},
ambient: {
intensity: 0.3,
},
},
},
visualMap: [
{
type: "continuous",
seriesIndex: 0,
calculable: true,
max: 300000,
inRange: {
color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
},
left: 70,
bottom: 20,
},
],
series: [
{
type: "map3D",
map: "china",
data: [
{
name: "河北",
value: 300000,
},
{
name: "北京",
value: 250000,
},
{
name: "上海",
value: 150000,
},
{
name: "四川",
value: 200000,
},
{
name: "重庆",
value: 100000,
},
{
name: "青海",
value: 300000,
},
],
shading: "lambert",
regionHeight: 3,
// zlevel: 10,
label: {
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
opacity: 1,
backgroundColor: "rgba(0,0,0,0)",
},
},
itemStyle: {
color: 'rgba(12, 64, 129, 1)',
opacity: 1,
borderWidth: 1,
borderColor: "#2affff",
},
// silent: false,
instancing: true,
emphasis: {
//当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: "#fff",
fontSize: 16,
backgroundColor: "rgba(50, 50, 50, 0.7)",
},
formatter: (params) => {
return `${params.data.name}:${params.data.value || 0}家`;
},
},
// itemStyle:{
// color:'rgba(50, 50, 50, 0.7)',
// }
},
},
{
type: "bar3D",
coordinateSystem: "geo3D",
data: [
{
name: "北京",
value: [116.41433, 39.91095, 50],
},
{
name: "上海",
value: [121.477091,31.235682, 55],
},
{
name: "成都",
value: [104.071738,30.576798, 49],
},
{
name: "重庆",
value: [106.563036,29.572766, 48],
},
],
barSize: 1.5,
shading: "lambert",
bevelSmoothness: 0,
bevelSize: 1,
label: {
show: false,
},
silent: false,
minHeight: 4,
itemStyle: {
color: "rgb(223, 157, 0)",
opacity: 1,
},
emphasis: {
//当鼠标放上去 地区区域是否显示名称
label: {
show: true,
distance: 0,
textStyle: {
color: "#fff",
fontSize: 13,
backgroundColor: "rgba(50, 50, 50, 0.7)",
},
formatter: (params) => {
console.log(params);
return `${params.data.name}:${params.data.value[2]}家`;
},
},
},
},
],
};
myChart.setOption(this.mapOption);
},
注：中国地图js我是在当前页面引入的。