相关实例
- made a pie 添加链接描述
2.添加链接描述
3.添加链接描述
一.下载安装所需包
npm install echarts@4.9.0 --save //之所以下载4点几版本是因为5以上的版本没有地图包
npm install echarts-gl@1.1.0 --save //此版本更高的版本会报错如下：
This dependency was not found:
* echarts/lib/label/labelStyle in ./node_modules/echarts-gl/lib/component/common/LabelsBuilder.js, ./node_modules/echarts-gl/lib/component/grid3D/Grid3DAxis.js and 1 other
To install it, you can run: npm install --save echarts/lib/label/labelStyle
npm install china-map --save
在main.js 引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts; //将echarts 挂载到vue 实例上去
新建地图组件
<template>
<div class="earth_header" id="box" >
<div class="bottom_bg"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import 'echarts/map/js/china'
import 'echarts-gl';
export default {
data() {
return{
alirl : [
[
[121.15, 31.89],
[109.781327, 39.608266]
],
[
[120.38, 37.35],
[122.207216, 29.985295]
],
[
[123.97, 47.33],
[120.13, 33.38]
],
[
[118.87, 42.28],
[120.33, 36.07]
],
[
[121.52, 36.89],
[117.93, 40.97]
],
[
[102.188043, 38.520089],
[122.1, 37.5]
],
[
[118.58, 24.93],
[101.718637, 26.582347]
],
[
[120.53, 36.86],
[121.48, 31.22]
],
[
[119.46, 35.42],
[122.05, 37.2]
],
[
[119.97, 35.88],
[116.1, 24.55]
],
[
[121.05, 32.08],
[112.02, 22.93]
],
[
[91.11, 29.97],
[118.1, 24.46]
]
],
}
},
mounted() {
this.$nextTick(()=>{
setTimeout(() => {
this.drawChina()
// this.getData()
}, 1000);
})
},
methods: {
drawChina() {
// 初始化echarts实例
var myEcharts = this.$echarts.init(document.getElementById("box"));
document.getElementById("box").style.width = 900 + "px";
document.getElementById("box").style.height = 800 + "px";
document.getElementById("box").style.zIndex = '1111';
myEcharts.resize(); // 直接加这句即可
console.log(this.$echarts)
var option = {
geo3D: {
map: 'china',
roam: true,
itemStyle: {
color: 'rgb(5,101,123)',
opacity: 1,
borderWidth: 0.8,
borderColor: 'rgb(62,215,213)'
},
label: {
show: true,
textStyle: {
color: '#fff', //地图初始化区域字体颜色
fontSize: 16,
opacity: 1,
backgroundColor: 'rgba(0,0,0,0)'
//backgroundColor: 'rgba(53,171,199,0)'
},
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 16,
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
}
},
realisticMaterial:{
detailTexture:'asset/leather/leather_albedo.jpg'
}
},
title: { //标题样式
text: '',
x: "center",
textStyle: {
fontSize: 18,
color: "red"
},
},
tooltip: { //这里设置提示框
// trigger: 'item', //数据项图形触发
// backgroundColor: "red", //提示框浮层的背景颜色。
// //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
// formatter: '地区：{b}<br/>模拟数据：{c}'
show: true,
// formatter:(params)=>{
// let data = "测试1:"+params.name + "<br/>"+"值:"+ params.value[2]+"<br/>"+"地理坐标:[" + params.value[0]+","+params.value[1] +"]";
// return data;
// },
},
visualMap: [{
type: 'continuous',
seriesIndex: 0,
text: ['bar3D'],
calculable: true,
max: 300,
inRange: {
color: ['#87aa66', '#eba438', '#d94d4c']
}
}, {
type: 'continuous',
seriesIndex: 1,
text: ['scatter3D'],
left: 'right',
max: 100,
calculable: true,
inRange: {
color: ['#000', 'blue', 'purple']
}
}],
legend:{
},
series: [
{
type: 'lines3D',
coordinateSystem: 'geo3D',
effect: {
show: true,
trailWidth: 4,
trailOpacity: 0.5,
trailLength: 0.3,
constantSpeed: 5
},
blendMode: 'lighter',
lineStyle: {
width: 0.2,
opacity: 0.05
},
data: this.alirl
}
]
};
// 使用刚指定的配置项和数据显示图表。
myEcharts.setOption(option);
// 点击触发
myEcharts.on("click", param => {
console.log(1111111)
});
},
},
};
</script>
<style lang="scss" scoped>
.earth_header {
width: 50%;
height: 100%;
position: absolute;
top: -44px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
padding-top: 12px;
background: url(../../src/assets/image/back_image.svg) no-repeat;
background-size: 100% 100%;
&::before {
content: '';
width: 610px;
height:610px;
position: absolute;
top: 140px;
left: 18%;
background: url(../../src/assets/image/diqiu2.png) no-repeat;
z-index: -1;
background-size: cover;
animation: rot_test 10s infinite linear;
}
@keyframes rot_test {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
}
}
&::after {
content: '';
width: 600px;
height:600px;
position: absolute;
top: 144px;
left: 50%;
transform: translateX(-50%);
background: url(../../src/assets/image/diqiu1.png) no-repeat;
z-index: -1;
background-size: cover;
}
}
</style>
