vue+Echarts+3D
我是Echarts初学者，这是我通过vue简单做的小案列，正在钻研地图下钻三级，随后会更新下钻三级。
import echtar from “echarts”;
import “echarts/map/js/china.js”; //引入中国数据地图
import “echarts-gl”;
export default {
name: “echarts”,
props: [“userJson”],
data() {
return {
chart: null,
Mapname:null,
pd:false
};
},
mounted() {
this.chinaConfigure();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
chinaConfigure() {
let mychart = echtar.init(this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …; this.emit(‘sname’,t.name)
}.bind(this))*/
var convertData = function(data) {
var res = []
return res;
};
const options = {
textStyle: {
fontFamily: 'KaiTi',
},
backgroundColor: 'rgba(0,0,0,0)', //背景颜色设置
tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
x: "right",
y: "bottom",
show: false, //值域展示
min: 0,
max: 1000,
text: ["高", "低"], //所得数值作为值域文字显示【高，低】
realtime: true,
calculable: false, //值域是否显示为线性渐变
color: ["#003c77", "#6ba4e2"] //值域颜色标识
},
series: [
{
type: "map3D", // 系列类型
map: "china",
label: {
show: true, // 是否显示省份标签
textStyle: {// 标签的字体样式
color: "#000", // 地图初始化区域字体颜色
fontSize: 15, // 字体大小
opacity: 1, // 字体透明度
backgroundColor: "rgba(0,0,0,0)", // 字体背景色
}
},
shading: 'color',
itemStyle: {
color: "#000", // 地图板块的颜色
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderColor: '#5EEcf0',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 1,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'red' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'red',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
shading:'lambert',
emphasis: {
// 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
label: {
show: true,
textStyle: {
color: "#000", // 高亮时标签颜色变为 白色
fontSize: 15, // 高亮时标签字体 变大
fontFamily:'nomber'
}
},
itemStyle: {
opacity: 1,
color: "#fff" // 高亮时地图板块颜色改变
}
},
light: {//光照效果
main: { // 场景主光源的设置，在 globe 组件中就是太阳光。 color: "#fff",
intensity: 3, //主光源的强度。[ default: 1 ]
shadow: false, //主光源是否投射阴影。默认关闭。
//shadowQuality: 'high',
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
},
ambient: {
// 全局的环境光设置。
color: "#000", // 环境光的颜色
intensity:3.5 // 环境光的强度
}
},
viewControl: {//用于鼠标的旋转，缩放等视角控制。
projection: "perspective", //
autoRotate: false, // 是否开启视角绕物体的自动旋转查看
autoRotateDirection: "cw", // 。
autoRotateSpeed: 10, // 物体自传的速度
autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。
damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞
rotateSensitivity: 1, // 点击移动地图
zoomSensitivity: 1, //调整缩放比例
panSensitivity: 0,
panMouseButton: "right", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
rotateMouseButton: "right", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
distance: 92, // 地图大小调整
minDistance: 40, //
maxDistance: 400, //
alpha: 70, // 视角绕 x 轴
beta: 1, // 视角绕 y 轴
center: [5,0, 0], // 视角中心点(x,y,z)
animation: false, // 是否开启动画。
animationDurationUpdate: 1000, // 过渡动画的时长
animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。
},
data: [
//东北三省
{name:"黑龙江",regionHeight: 100, itemStyle: { color: '#2192ED' }}, //渲染省份颜色参数
{name:"吉林",regionHeight: 100, itemStyle: { color: '#2192ED' }},
{name:"辽宁",regionHeight: 100, itemStyle: { color: '#2192ED' }},
//华东华南地区
{name:"北京",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"天津",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"河北",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"山东",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"江苏",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"浙江",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"福建",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"广东",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"上海",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"台湾",regionHeight: 100, itemStyle: { color: '#0368BA' }},
{name:"海南",regionHeight: 100, itemStyle: { color: '#0368BA' }},
//中原地区
{name:"山西",regionHeight: 100, itemStyle: { color: '#003366' }},
{name:"河南",regionHeight: 100, itemStyle: { color: '#003366' }},
{name:"湖北",regionHeight: 100, itemStyle: { color: '#003366' }},
{name:"湖南",regionHeight: 100, itemStyle: { color: '#003366' }},
{name:"安徽",regionHeight: 100, itemStyle: { color: '#003366' }},
{name:"江西",regionHeight: 100, itemStyle: { color: '#003366' }},
//华北区域南方区域
{name:"内蒙古",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"宁夏",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"陕西",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"四川",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"云南",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"贵州",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"广西",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"甘肃",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"青海",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"新疆",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"西藏",regionHeight: 100, itemStyle: { color: '#0d3358' }},
{name:"重庆",regionHeight: 100, itemStyle: { color: '#0d3358' }},
]
}
]
};
mychart.setOption(options);
}
}
};
